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.