McMenu: Mobile-Compatible Responsive Dropdown Menu

HTML

• First of all, make web page to be responsive and mobile friendly. That is: adding the following code into the head section of your page:<meta name="viewport" content="width=device-width, initial-scale=1.0" /> Otherwise your menu will not be responsive as the menu script cannot interpret device size and media breakpoint correctly. For details please visit you will get a different device size and media query breakpoint when viewport meta is applied.

• Click Demo HTML 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 class="three-line"> <span></span> <span></span> <span></span> </div> </div> </div> <div id="mcmenu"> <ul> <li><a href="#">Portfolio</a></li> <li> <span>Creative <i class="arrow"></i></span> <ul class="dropdown"> <li><a href="#">Curabitur</a></li> <li> <span>Suspendisse vel <i class="arrow"></i></span> <ul class="dropdown"> <li><a href="#">Etiam vestibulum</a></li> <li><a href="#">Integer efficitur</a></li> <li><a href="#">Finibus nibh</a></li> </ul> </li> <li> <span> Eget <img src="/mcmenu/img1.jpg" style="margin:10px;width:80px;vertical-align:middle;" /> <i class="arrow"></i> </span> <ul class="dropdown"> <li><a href="#">Nam elementum</a></li> <li><a href="#">Magna pharetra</a></li> <li><a href="#">Pulvinar mi eget</a></li> <li><a href="#">Tincidunt orci</a></li> </ul> </li> </ul> </li> <li><a href="#">Studio</a></li> <li class="full-width"> <span>Press <i class="arrow"></i></span> <div class="dropdown"> <div class="clm"> <h3>Integer</h3> <a href="#">Lacus iaculis</a> <a href="#">Eu tortor</a> <a href="#">Luctus varius</a> </div> <div class="clm"> <h3>Efficitur Viverra</h3> <a href="#">Praesent</a> <h3>At Eros</h3> <a href="#">Pellentesque </a> <a href="#">Dignissim pulvinar</a> </div> <div class="clm"> <a href="#"><img src="/mcmenu/img2.jpg" style="width:280px;" /></a> </div> </div> </li> <li><a href="#">Blog</a></li> <li> <span>Contact <i class="arrow"></i></span> <ul class="dropdown right0"> <li><a href="#">Nam elementum</a></li> <li><a href="#">Magna pharetra</a></li> <li><a href="#">Pulvinar mi eget</a></li> <li><a href="#">Tincidunt orci</a></li> <li> <span> Eget <img src="/mcmenu/img1.jpg" style="margin:10px;width:80px;vertical-align:middle;" /> <i class="arrow"></i> </span> <ul class="dropdown right0"> <li><a href="#">Nam elementum</a></li> <li><a href="#">Magna pharetra</a></li> <li><a href="#">Pulvinar mi eget</a></li> </ul> </li> </ul> </li> </ul> </div>
  <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 get Mega menu dropdown (as the one under the demo's Press item), just: <li class="full-width">...<div class="dropdown">...</div></li>
• To get single-column dropdown (as the one under the demo's Creative or Contact item), you can: <li>...<ul class="dropdown">...</ul></li> Note:
  1. You can have nested ULs to aquire multiple-level sub-menus.
  2. If the sub-menus are under the last top-level item, you can add class="dropdown right0" so that the drowdown will be right-aligned and fly-out to the left.
• If you want certain menu content to display in desktop mode, but not to display in mobile mode, just add class="mobileHide" to the element.

CSS

Select the style template that best fits your needs in the customization Step 3, and then continue to next step for further customization.

Where is the mobile breakpoint setting?

It is set in the JavaScript file mcmenu.js. For details please refer to the mobileBreakpoint and breakpointMode properties inside the mcmenuOptions variable in the JavaScript section listed below.

Make some menu contents available in desktop mode but invisible in mobile mode

There is a pre-defined class mobileHide in the generated mcmenu.css. Just add class="mobileHide" to those elements.

Need to right align last submenu?

There is a pre-defined class right0. Just add class="right0" to the last top-level LI element.

Directly modifying the generated mcmenu.css in the download package.

• Editting styles for mobile mode, use the corresponding selector starting with #mcmenu.mobile;
• Editting styles for multiple menu rows, use the corresponding selector starting with #mcmenu.multirow.
• Note: Some CSS codes are generated by JavaScript code which are not in the mcmenu.css.
  1. The following settings are in the JavaScript file: mcmenu.js:
     mobileBreakpoint, breakpointMode, mobileDropdownDirection, multirow. For details click here.
  2. Some styles are dynamically created by mcmenu.js and inserted into the page
     How to find and overwrite those styles
     • Open your page with Chrome browser, press the Ctrl + Shift + I keys (Option + Command + I if Mac) to open the Developer Tools;
     • Switch to the Elements panel
     • Search for the word "mcmenu-style", then you will find the code that is in the page's head section: <style id="mcmenu-style"> (...style codes...) </style>
     • You can overwrite those settings by write your own specifications into mcmenu.css with more specific selectors, or use the !important keyword to force your setting to take the priority.

JavaScript

The mcmenu.js weighs only 11kb (packed). It is plain JavaScript that does not rely on any other libraries such as jQuery.

Open the mcmenu.js in the download with any plain text editor such as Notepad, and update the options to suit your needs:

Load on Demand: Create nav menu dynamically

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

However there are times that the menu should be built at a later time. For example, the menu markup is not present during page load. It is only when the user clicks a button that will trigger an AJAX call to populate the menu markup.

In such scenario there are two ways to start the menu after its markup is ready:

• Option 1: Remove the line of code from the mcmenu.js: var mcmenu = new McMenu(mcmenuOptions);

  And add it to the place where it is the time to run it (such as in AJAX callball).

• Option 2: Call the following function: mcmenu.rebuild();

License

• License is required before the McMenu goes live on web server. Otherwise a trial version alert may appear on the page.
• License key will be immediately sent to buyer's email address after we get the payment through PayPal's IPN.
• 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 mcmenu.js file with any test editor, and update the license value accordingly. var mcmenuOptions = { ......, license: "(license key)" };

FAQ about License