Welcome to the Divi Mega Menu demo site!
Feel free to hover or click any of the examples in the naivation bar above to see what is possible with Divi Mega Menu.
Below we explain the features used on each of the examples, but feel free to contact our support team should you need further clarification.
Multi Column
A comprehensive multi-column layout designed to maximize browser space. This example organizes complex service offerings into an interactive interface, allowing users to preview detailed content before they click.
Key Features
-
Layout: Full-width (100% browser width) using a 3-column grid.
-
Module: Mega Tabs Module.
-
Interactivity: Hovering over service categories (Web Design, Marketing, etc.) dynamically reveals relevant content on the right.
-
Animation: “Fade Up” entrance on hover.
Woo Store
A high-converting shopping menu designed for e-commerce. This layout keeps the user in the shopping flow by utilizing overlays and categorized product previews without leaving the current page.
Key Features
-
Module: Mega Tabs Module utilizing WooCommerce Shortcodes.
-
Trigger: Activated on Click with a background overlay to focus attention.
-
Structure: Split categories (Men/Women) on the left; top-selling products display dynamically on the right upon hover.
-
Animation: “Fade Up” entrance.
Woo Categories
The definitive solution for websites with massive amounts of data. This layout demonstrates how to organize complex navigation trees into a clean, digestible format using parent-child relationships.
Key Features
-
Module: Mega Drop Down Module.
-
Capacity: Optimized for large quantities of links and information.
-
Logic: Multi-level reveal; hovering over a parent reveals children, and hovering over children reveals grandchildren.
-
Builder: Fully customizable manual menu building.
- Animation: “Flip X” entrance.
Magazine
Perfect for news sites and content creators, this layout transforms the navigation bar into a content consumption hub. It drives engagement by presenting the latest media and lead generation tools instantly.
Key Features
- Styling: Underlined active Mega Menu.
-
Modules: Divi Blog Module (Left) and Video Module (Right).
-
Conversion: Integrated Newsletter Opt-in module within the menu.
-
Animation: “Slide Down” entrance on hover.
-
Content: Dynamic feed of latest articles alongside a featured video.
Member Portal
A compact, restricted-width menu designed for user experience and account management. It utilizes conditional logic to provide a personalized interface based on the user’s authentication status.
Key Features
-
Styling: Custom “Triangle” pointer at the top with rounded UI borders.
-
Logic: Conditional display—shows a login form for guests, or “You are already logged in” with user details for members.
-
Layout: Restricted width (compact drop-down style).
-
Module: Login Module.
Fullscreen
A modern, immersive navigation experience. This layout demonstrates how to trigger a menu that covers the entire browser window, ensuring the user’s complete focus is on the navigation options without distractions.
Key Features
-
Layout: Full-screen coverage (100% height and width).
-
Trigger: Activated on Click.
-
UX: Ideal for mobile-first designs or minimalist headers where you want to hide complex navigation behind a simple toggle.
Tooltips
This example showcases the ultimate flexibility of the Mega Menu system by breaking free from the standard navigation bar. It demonstrates how to turn any element on your page—such as buttons or images—into interactive menu triggers.
Key Features
-
Element Triggers: Shows a standard Button Module triggering a popup menu with a “Fade Up” animation.
-
Image Hotspots: Utilizes Icon Modules absolutely placed over an image to create interactive hotspots.
-
Versatile Positioning: Demonstrates “Tooltip” behavior, where the menu appears directly above or below the specific icon or button.
-
Dual Interaction: Showcases layouts triggered by both Click (for the icons) and Hover (for the buttons).
-
Animations: detailed examples of “Flip In” and “Fade Up” entrance effects.
Button Trigger
Hover or click the buttons below.
Image Hotspot
Hover or click the icons over the image below.
