ddmenu Templates:   1 2 3 4 5

Customize:

Version 2017.3.17 (logs)

Mega Dropdown Menu Generator



Key Features (basic version)
  • 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

 



Advanced Features (advanced version)
  • 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:

<nav id="ddmenu"> <ul> <li>...</li> ... ... <li>...</li> </ul> </nav>
It is safe to use HTML5 NAV tag in ddmenu: ...details
Compatibility of the HTML5 NAV tag:
  • Don't worry about browser support for the HTML5 nav tag used here. The mega menu script, ddmenu.js, has made it work across all browsers.
  • You can change the nav tag to div tag if you like
  • Benefit of using NAV tag

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>

<nav id="ddmenu"> <div class="menu-icon"></div> <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:

<li> <span class="top-heading">Unde Omnis</span> <i class="caret"></i> <div class="dropdown"> <div class="dd-inner"> <div class="column"> <h3>Lorem Ipsum</h3> <a href="#">Dolor sit amet</a> <a href="#">Consectetur elit</a> ...... </div> <div class="column"> ...... </div> <div class="column"> ...... </div> </div> </div> </li>

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

The script of ddmenu, ddmenu.js, weighs only 9kb (packed). It is plain JavaScript that does not rely on any other libraries such as jQuery.

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:

var ddmenuOptions= { menuId: "ddmenu", linkIdToMenuHtml: null, open: "onmouseover",  //or "onclick" delay: 90, speed: 400, keysNav: true, singleOpen: false, // new since v2017.3.17 license: "mylicense" }; var ddmenu = new Ddmenu(ddmenuOptions);
linkIdToMenuHtml:  null by default. If you want to store your website menu in a separate file so that you do not need to cut and paste the menu HTML code on every page, you can assign linkIdToMenuHtml with a link ID that links to the separate menu file. Please refer to One Menu for All Pages for details.

Animation speed (in milliseconds) of the dropdown sub-menu.

Note: The transition speed for the background color of top-level menu items (<li>) is defined in the ddmenu.css:

#ddmenu li { transition:background-color 0.2s; }

Using TAB or arrow keys to navigate through the mega menu links. This accessibility feature is only available in the advanced version of the script.

Set it to false will disable this accessibility.

Notice: If you have forms in the menu drop down, and want to use the TAB key to switch <input>, the menu may close due to accessibility. Set it to false will resolve the issue.

Only applicable for the advanced version.

When the menu becomes vertically aligned in mobile devices, when SingleOpen: true has been set, click to open one menu item will automatically close all other opened menu items.

Place to put your license. License details

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

responsive and mobile-friendly menu
  • If you choose the basic version option when download, you will see the menu is always in horizontal layout on any devices.
  • The CSS file for Template 5 has been styled to vertical mobile layout only. So it will always be the "mobile version" even in wide desktop screens. The advanced version license is required to support Template 5.

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)" };
Basic Version
(with all the key features):
License Fee: $11.00
Advanced Version
(also including the advanced features):
License Fee: $20.00

FAQ about License

  1. How the license works? Does it go to another web service to verify? Answer
  2. Do I need a license for my dev and testing domain that is different from the final client's domain? Answer
  3. Will it work for sub-domains? Answer
  4. My website is on intranet. Do I need license for using your widgets in my intranet website? Answer
  5. Do you provide developer license that can be applied to multiple websites? Answer
  6. I have multiple domain names pointing to the same website. Can I apply multiple licenses to the same script? Answer
  7. Do I need to renew the license for future upgrades/releases of the widget? Answer
You need to set the acquired license key to the license property in the widget's JavaScript file.

The JavaScript will use its own match pattern code to verify the license with the domain name on the browser's address bar. The JavaScript file will perform the validation by itself and no other services will be involved.

If the validation failed(the domain name doesn't match the license key), the UI component may periodically display a trial version alert, or even disable some functionalities.

The code is fully functional even if the script is not licensed (though it may periodically show a trial version alert). So usually you don't need the license in your dev phase.

If you are developing under the domain localhost, either the trial version alert will be disabled, or we have provided a license for the localhost that you can find in the License section of the product's main page.

Yes. If the license is valid for the main domain, it will also be valid for all its sub-domains(such as sub1.mydomain.com, sub2.mydomain.com).
Yes license is required for intranet domains, and you can enter your intranet domain into the For website box after clicking the Buy Now button.
No. It is on a per-domain basis only.
Yes, it is supported. The following links are the instructions:

For JS Image Slider     For Ninja Slider     For ddmenu     For JS Tooltip

Note:
  • If your domain2.com will be redirected to your domain1.com, you only need a license for domain1.com. You don't need multiple licenses in this scenario.
  • If your multiple domains are obviously for the same site, such as menucool.com, menucool.net, menucool.com.us, you can input the regular price for the first domain, and input 1/2 of the price for the others.

No. The license will be valid forever as long as your domain is not changed.

If your domain name is changed, you need to purchase a separate license for the new domain.

Instructions are under the HTML tab in this page.

It seems that you've changed the menu HTML code. Starting a new template will lose your customization.

You can copy your HTML code before switching to a new template.

You are going to download the source code of the chosen template. Which version do you want?

     

Template 5 is only supported by the Advanced version

Download other templates?
Just click the template, then download.

Wanta customize the CSS or the HTML of the template?
You can do it before the download by clicking the HTML or the CSS button, or do it after the download by directly modifying the downloaded source code.


 

Your Name
+ =  

Question Title

If your question is about troubleshooting, please first go through the checking list in Troubleshooting Request.