> For the complete documentation index, see [llms.txt](https://bricksmotion.gitbook.io/bricksmotion-components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bricksmotion.gitbook.io/bricksmotion-components/components/menus/mega-menu-1.md).

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