DdMenu: Mega Dropdown Menu

Features

• A two-level dropdown menu created with pure CSS, JavaScript, and HTML.
  For menus with more than two levels, consider using McMenu.
• Fully mobile-friendly and responsive design.
• Options to open sub-menus on mouseover or click.
• Works with all major browsers, including (including IE 8+).

HTML

<nav id="ddmenu">
    <div class="menu-icon"></div>
    <ul>
        <li>...</li>
        ... ...
        <li>...</li>
    </ul>
</nav>

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).
3. To hide an element on mobile (but not on desktop), add class="may-hide" to that element in the dropdown.

CSS

JavaScript

Open ddmenu.js from the download package and configure the options as needed:

var ddmenuOptions=
{
    menuId: "ddmenu",
    linkIdToMenuHtml: null,
    open: "onmouseover",  //or "onclick"
    delay: 90,
    speed: 400,
    keysNav: true,
    singleOpen: false,
};

var ddmenu = new Ddmenu(ddmenuOptions);

Dynamic Menu Creation

ddmenu initializes when the page loads. If the menu markup is added later, initialize ddmenu using one of two methods:

• Option 1: Remove the following line from ddmenu.js: var ddmenu = new Ddmenu(ddmenuOptions);

  Then, add this line at the appropriate place in your code—such as inside a fetch callback—when you want to initialize the menu.

• Option 2: Or, call the following function at the time you want to (after the menu HTML is ready): ddmenu.init();