Full Screen Menu #2

Core Elements

FS2 NAVBAR (Div): Serves as the primary navigation bar, fixed to the top of the viewport, containing the logo and the menu activation trigger.
FS2 MENU WRAPPER (Div): Encases the full-screen menu, designed to fill the entire screen when activated, showcasing menu items against a backdrop of corresponding images.

Navigation and Content

LOGO (Image): Displays the brand or site logo, anchoring the user's navigation experience.
FS2 TRIGGER (Div): The interactive element used to open or close the full-screen menu, featuring a unique design for visual appeal.
FS2 MENU (Div): Lists navigation links in a full-screen layout, providing a clean and accessible menu structure.

Menu Items and Links

FS2 MENU ITEMS (Div): These represent the individual navigational options within the menu, each linking to different site sections or pages.

Visual Enhancement

FS2 MENU IMAGE WRAPPER (Div): Contains visually striking images associated with each menu item, enhancing the overall aesthetics and user engagement.

MENU ITEM - HOVER #1 to #4: Each hover animation focuses on a specific menu item, enhancing the associated background image's visibility while dimming others. These animations enrich the menu's interactivity by visually linking menu items with their corresponding images.
MENU TRIGGER: Manages the animation for the menu's activation and deactivation, incorporating the menu items' fade-in effect and the transformation of the trigger icon, signaling the menu's state.

FS2 - ON FOCUS - 1 to 4: Designed to improve accessibility and user interaction, these events trigger specific animations when menu links receive focus, typically through keyboard navigation. This functionality ensures that users navigating without a mouse still receive visual feedback on their navigation focus.
FS2 - ON BLUR - 1 to 4: This event complements the focus events by reversing the animation when the user navigates away from a menu link (on blur), ensuring the menu's visual state resets appropriately. It enhances the accessibility and user interaction by providing a visual transition that indicates when a menu item is no longer the focus of interaction.

Last updated 9 months ago