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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://bricksmotion.gitbook.io/bricksmotion-components/components/menus/mega-menu-1.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.