Mega Dropdown Menu Generator

• Mega menu opens on hover or click
• 100% Responsive Layout Design
• Adaptive or 100% submenu layout
• Works on all devices such as desktop, tablet, mobile
• Compatible with all major platforms such as iOS, Android, Windows Phone, etc.
• Support all major browsers including IE6 - IE12
• Menu skin builder online
• Support Populate navigation menu through an external single file
• License (without advanced features)
  License Fee: $11.00
  About License

• Becomes a menu icon that toggles the menu display on mobile devides
• Automatically transform mega dropdowns to vertical layout on mobile devices
• Accessibility: can navigate mega menu with tab or arrow keys
• License Fee: $20.00

Ddmenu is a responsive mega menu that wroks on all devices and platforms. Mega Menus refer to dropdown menus that contain multiple columns of links. This tutorial instructs how to markup your mega panel:

Mega Menu HTML Structure

Click the HTML button (above the Download button) you will see the HTML source code of the menu demo:

Add CSS Classes to LI

You need to add CSS class to the <li> element under the following two scenarios:

1. Add <li class="no-sub"> if there is no dropdown sub-menu under the <li> element;
2. Add <li class="full-width"> if you want the dropdown to have the same width of the menu (100% width of its parent UL element).

Support mobile layout

To support the vertical menu layout for mobile devices, add the following markup between <nav> and <ul>

How to make dropdown menu responsive and mobile-friendly

Top-level Menu Items

Top-level items can be plain text wrapped within <span class="top-heading">(text)</span>, or link (<a class="top-heading" href="...">(link)</a>), and followed by an arrow down element (<i class="caret"></i>) if the menu item has a dropdown.

Dropdown Sub-menu with Multiple Columns

Each sub-menu dropdown is a div block (<div class="dropdown" >...< />div>) following the top-level item. It should contain an inner div block (<div class="dd-inner">...</div>) that will contain one or multiple sub-menu columns:

You can include any HTML code and content within each column of the mega menu.

Select the menu template that is a best fit for you, then use our online CSS generator to tweak it to exactly what you want.

Using the Menu CSS Generator

• Click the "Customize: CSS" button on the page to open the Menu CSS Generator
• Only the key CSS properties are included in the Menu CSS Generator to make the customizing work easier
• Optionally you can download the demo and edit the CSS file directly

How to set the height of the navigation bar?

Open the Menu CSS Generator, choose the LIs selector, and set its height.

How to make the dropdown submenu the same width as the main mega menu bar?

Open the HTML code, add class="full-width" to the dropdown's parent LI element: <li class="full-width">

Adjust the dropdown position

If the dropdown is not in full width as described above, it will by default align itself to the left border of its parent LI. This default position can be easily changed:

• Right-aligned:

  Add class right-aligned to the dropdown markup, <div class="dropdown right-aligned">, to align the dropdown to the right border of its parent LI. You can see this effect from the dropdown under the last "Laudantium" item in the demo menu.

• Specify an offset:

  Examples

  Offset Examples:

  left: -100px; right: auto; or: left: auto; right: -240px;

  The dropdown of the "Accusantium" menu item in the demo 1:

  <div class="dropdown offset300"> And the specification of class offset300 in ddmenu.css: .offset300 {left:-300px;right:auto;}

Using CSS3 colors in the Menu

Transparent RGBA Color

The CSS3 RGBA color can be applied to the mega menu's background color, as demonstrated by the demo on this page.

Compatibility:

If you have applied the rgba color to the UL background, the color will fall back to the color declared in the UL background color field if the rgba color is not supported by the browser (such as IE8 and below).

If the rgba color is applied to the background of LI on hover or DIV.dropdown, you can add a hack targeting IE8 and below: #ddmenu div.dropdown { background-color:rgba(0,0,0,0.2); background-color:#ccc \9;/*fallback for old IE*/ }

Gradient Color

If you want a gradient background color for the main navigation bar, you can use the CSS3 linear gradient color:

background:linear-gradient(#fff,#ccc);

The linear-gradient is not supported by IE9 and below, and will fall back to the UL background color.

Pure JavaScript

Customize the dropdown menu with JavaScript ddmenu.js

Open the ddmenu.js in the download with Notepad, and update the options to suit your needs:

Load on Demand: Create nav menu dynamically

By default, the mega menu will be populated as soon as the DOM content is ready during page load.

If the dropdown menu markup has not been initiated on page load, the menu will not be populated properly. To build the menu at a later time, you can use the ddmenu's built-in init() function.

For example, when the menu markup is generated through AJAX, you can add the following call in the AJAX callback:ddmenu.init();

Open the Template 4, and then resize this page, you will see how the mega menu will change its layout to adapt to the screen.

For details please read How to make dropdown menu responsive and mobile-friendly

License

• License is required before the Mega menu goes live on web server. Otherwise a trial version alert may appear on the page.
• The license is issued on a per-domain basis (valid for a domain and its sub-domains). Intranet domains and IP domains should also be licensed.
• You can use the licensed widget multiple times within the website for which you've purchased the license.
• When you have acquired the license, open the ddmenu.js file with Notepad, and update the license value accordingly. var ddmenuOptions = { ......, license: "(license key)" };

FAQ about License