Bricksmotion Components
  • Getting Started
  • Setup
    • Where is my license key?
    • Activate you license within Bricksforge
  • Using components
    • Bricksforge One-Click
    • Bricks Structure
    • Activate "Event Panel"
    • Manual Importing Timelines and Events
    • Locked Classes
    • Reassign Timelines
    • Loading Conditions
  • Components
    • HEROES
      • Hero #1
      • Hero #2
      • Hero #3
      • Hero #4
      • Hero #5
      • Hero #6
      • Hero #7
      • Hero #8
      • Hero #9
      • Hero #10
    • SCROLL SCENES
      • Sticky Sections #1
      • Vertical Scroll #1
      • Scroll Scene #1
      • Scroll Scene #2
      • Scroll Scene #3
      • Scroll Scene #4
      • Scroll Scene #6
      • Scroll Scene #7
      • Scroll Scene #8
      • Scroll Scene #9
    • BUTTONS
      • Button #1
      • Button #2
      • Button #3
      • Button #4
      • Button #5
      • Button #6
      • Button #7
    • TABS
      • Tabs #3
      • Tabs #4
    • PROJECTS
      • Projects #1
      • Projects #2
      • Projects #3
      • Projects #4
      • Projects #5
      • Projects #6
      • Projects #7
    • CTA
      • CTA #1
      • CTA #2
    • CARDS
      • Cards #1
      • Cards #2
    • MENUS
      • Bottom Nav #1
      • Mega Menu #1
      • Full Screen Menu #2
      • Full Screen Menu #3
    • CUSTOM CURSORS
      • Custom Cursor #1
    • LOADING SCREENS
      • Loading Screen #1
      • Loading Screen #2
      • Loading Screen #3
    • TEXT
      • Text Hover #1
      • Split Text #2
    • IMAGE
      • Image Tilt #1
      • Image Reveal #1
      • Image Reveal #2
      • Image Reveal #3
    • PROGRESS BARS
      • Progress Bar #1
      • Progress Bar #2
Powered by GitBook
On this page
  • Component Structure
  • Animation Structure
  • Events
  1. Components
  2. MENUS

Full Screen Menu #2

Component Structure

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.

Animation Structure

  • 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.

Events

  • 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.

PreviousMega Menu #1NextFull Screen Menu #3

Last updated 1 year ago