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
  1. Components
  2. MENUS

Mega Menu #1

Component Structure

  • MM1 COMPONENT (Block): The main container of the Mega Menu, utilizing the mm1_component class for general styling, including padding and height adjustments to fit the menu within the viewport.

  • MM1 CONTAINER (Container): Directly contains the logo and navigation elements, styled with mm1__container to layout these elements horizontally with space between them.

    • MM1 LOGO WRAPPER (Div): Encapsulates the logo image, using mm1__logo-wrapper for any needed adjustments.

      • MM1 LOGO (Image): The logo of the menu, with mm1__logo applied to control its maximum width and ensure proper scaling.

    • MM1 NAV WRAPPER (Div): Hosts the navigation structure, applying mm1__nav-wrapper for styling.

      • MM1 NAV (Nav-Nested): The primary navigation block, styled with mm1__nav to adjust typography and item spacing, specifically tailored for both default and mobile landscape orientations.

Navigation Items

  • Navigation items are organized within a list, each item styled with mm1__nav-link for consistent typography and interaction states (hover, active).

  • Dropdown menus are part of navigation items, indicated with is--dropdown alongside mm1__nav-link, triggering specific animations on interaction.

Mega Menu Dropdown

  • The dropdown content, wrapped in mm1__mega-wrapper, is styled to appear seamlessly with the navigation bar.

  • Within, mm1__mega-container organizes the content into columns, applying a grid layout for desktop views and adjusting for mobile.

  • Content within each column, such as headlines, text, and buttons, is styled respectively with mm1__mega-headline, mm1__mega-card-text, and mm1__button for coherent visual hierarchy.

Animation Structure

Timelines

  • MM1 - HOVER IN: Animates the dropdown appearance and menu items for a dynamic entrance effect when hovered.

  • MM1 - CARD HOVER: Focuses on individual card items within the dropdown, enhancing their interactivity with scale and opacity changes.

  • MM1 - COL#1 HOVER and MM1 - COL#2 HOVER: These animations target the opacity of the mega menu columns, providing visual cues to the user's hover actions across different sections.

  • MM1 - NAV LINK: Adds subtle movement to the navigation links within the mega menu for an engaging user experience.

PreviousBottom Nav #1NextFull Screen Menu #2

Last updated 1 year ago