McMenu: Mobile-Compatible Responsive Dropdown Menu

Features

Create multi-level menus using pure CSS, JavaScript, and HTML.
For a simple two-level menu, you can use either McMenu or our DdMenu.
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

From the HTML (see the full code) you will see two elements: the menu icon wrapper which will be visible in mobile mode, and the menu.
```
<div class="menu-icon-wrapper">
	<div class="menu-icon" data-menu="mcmenu">
		...
	</div>
</div>

<div id="mcmenu">
	<ul>....</ul>
</div>
```
Note:
1. The two elements do not need to be placed together. If required by your design, you can place them at different positions in your page.
2. The data-menu attribute of the menu icon should take the menu id as its value.
To create a full-width menu dropdown (like the one under the demo's Press item), simply add class="full-width" to the dropdown's containing <li> element: <li class="full-width">...<div class="dropdown">...</div></li>
To create a single-column dropdown (like the one under the demo's Creative or Contact item), use: <li>...<ul class="dropdown">...</ul></li> Note:
1. You can nest UL elements to create multi-level sub-menus.
2. If the sub-menus are under the last top-level item, add class="dropdown right0" to make the dropdown right-aligned and fly out to the left.
To show menu content only in desktop mode (and hide it in mobile mode), add class="mobileHide" to the element.

CSS

The CSS file is provided in the download package.
Where is the mobile breakpoint setting?

It is set in the JavaScript file mcmenu.js. For details please refer to the following settings in the JavaScript section:

mobileBreakpoint, breakpointMode, mobileDropdownDirection, multirow.

JavaScript

Open mcmenu.js from the downloaded files and adjust the options to fit your needs:

var mcmenuOptions =
{
        menuId: "mcmenu",

        open: "onmouseover",  //or "onclick"

        delay: 90,

        mobileBreakpoint: 500,

        breakpointMode: 1,

        multirow: null,

        mobileDropdownDirection: 1,

        linkIdToMenuHtml: null,

        topItemAnimation: "1, 0.5, ease"
};
var mcmenu = new McMenu(mcmenuOptions);
......

Dynamic Menu Creation

McMenu 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 mcmenu.js: var mcmenu = new McMenu(mcmenuOptions);
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: Call the following function: mcmenu.rebuild();

The menu id specified in the HTML markup:<div id="mcmenu">...</div>

Ways to open sub-menu dropdown:

either "onmouseover" or "onclick".

The menu will turn to mobile mode if the width is or less than this breakpoint.

Please refer to next property, breakpointMode, to see what the width means.

Value:

Set it to 0 if no mobile mode is required; set it to 99999 if mobile mode is wanted with any devices.
If you are goint to test with your mobile phone whether the value is appropriate, please visit Test my mobile device size and media query breakpoint.

Specify what the mobileBreakpoint width refers to.

It has three possible values: 1, 2, or 3.

1: Viewport width (browser window width).
Equivalent to the CSS media queries @media (max-width: ?px).
2: Device width.
Equivalent to the CSS media queries @media (max-device-width: ?px).
3: Width of the menu's containing element, provided it is not fixed.

Option 1 is the most commonly used. Option 3 is demonstrated in the example on this page.

Note: Be sure to have the following code in the head section of your page:<meta name="viewport" content="width=device-width, initial-scale=1.0" /> Otherwise, the script may not correctly detect the browser width on mobile devices.

You can insert a breakpoint between desktop and mobile phone.

Its value can be:

null: There is no breakpoint for tablets.
"breakpoint:columnNumber": For example, "1000:3" means when the Width^* is or smaller than 1000px, the top menu will become multiple rows with 3 items in each row.
^*The Width mentioned above: Please refer to the previous property breakpointMode.

Configures the sliding direction when sub-menu(dropdown) is opening in mobile mode. Its value options:

1: Sliding-in from right to left.
2: Sliding-down. Opening a dropdown will not close other opened dropdowns.
3: Sliding-down. Opening a dropdown will also close other opened dropdowns.

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 into every pages, you can assign linkIdToMenuHtml with a link ID and link it to a separate menu code file. Please refer to Manage menu code in one central place for details.

Specifies the animation effect for the top-level links in mobile mode.

Leave this box blank if you don't need animations for the top-level links.

Its value format: Animation order, duration, timing-function

Animation order
- 1: The animation will start from the first link to the last
- -1: The animation will start from the last link to the first
duration: number in seconds
Timing-function: possible values such as linear, ease, cubic-bezier(n,n,n,n). For details please refer to animation-timing-function.

McMenu: Mobile-Friendly Dropdown Menu

Thanks for using Menucool McMenu

Features

HTML

CSS

Where is the mobile breakpoint setting?

JavaScript

Dynamic Menu Creation