ddmenu Templates:   1 2 3 4 5

Customize:

Version 2014.11.24   log

Online Dropdown Menu Generator

 



Key Features (basic version)
  • Submenu 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 - IE11
  • Menu skin builder online
  • Support Populate navigation menu through an external single file
  • License (without advanced features)
    License Fee: $7.00
    About License

 



Advanced Features (advanced version)
  • All the key features listed above
  • Automatically transform to vertical layout on mobile devices
  • Menu icon toggles the menu display
  • Accessibility: can navigate dropdown menu with tab or arrow keys
  • License Fee: $20.00
Navigation Menu that works across platforms

 

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 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 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 8kb (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: 0.4, license: "mylicense" };
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 seconds) of the dropdown sub-menu.

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

#ddmenu li { transition:background-color 0.2s; }
Place to put your license. License details

Load on Demand: Create nav menu dynamically

By default, the 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 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

Notice: The license has changed since this v2014.11.24 release.

If you are using the ddmenu that is prior to this v2014.11.24 release, and want to upgrade it to this release, you can use the same license you've purchased before for the basic version of this new release.

The old license will not work for the advanced version. You can contact us requesting a free renew of your old license for using the advanced version of the current ddmenu. Please mention your domain name and the license number you purchased before when requesting the free renew.

  • License is required before the slider goes live on web server. Otherwise a trial version alert may appear on the page.
  • Under local development environment (localhost server or local file path), you can use the license "6c0l68" to disable the trial version reminder.
  • The license is issued on a per-domain basis (valid for a domain and its sub-domains). Intranet domains and IP domains are also allowed.
  • 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: $7.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. Will it work for sub-domains? Answer
  3. My website is on intranet. Do I need license for using your widgets in my intranet website? Answer
  4. Do you provide developer license that can be applied to multiple websites? Answer
  5. I have multiple domain names pointing to the same website. Can I apply multiple licenses to the same script? Answer
  6. 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.

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 websites, and you can apply for license for intranet domains.
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 1/2 of the price for the second domain, 1/3 for the third domain and so on.
No. The license will be valid forever for your domain with no requirement to renew.

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.

Which version do you want?

Template 5 is only supported by the Advanced version

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


QUESTION & ANSWER
More ...

 

Your Name
Question Title
+ =  
Troubleshooting question? please read Troubleshooting Request before asking.