McMenu: Mobile-Compatible Responsive Dropdown Menu

Purely CSS, JavaScript & HTML

Mobile-compatible responsive dropdown menu

Online code generator

No coding knowledge needed

Responsive

Resize the browser window to see how the demo works.

Many Options

  • Rich HTML mega menu, or unlimited multi-dropdown.
  • Open by mouse over, or by click

Browser Compatibility

Supported by all major browsers (including IE 7+).

One Menu File for all pages

Option to populate navigation menu through an external single file

License Fee: $19.99
About License

FREE version: Pure CSS Menu (has no responsive feature)

 

DEMO
Templates: 1 2 3 4 5
Menu animation effect

You may have noticed the animation effect of the top-level menu items in mobile mode, and they are different for each demo templates.

It is configured in the Customization Step 5. You can modify them to any animations that you like in the Step 5.

Version 2019.6.29

 

CUSTOMIZE
  • Step 1: Breakpoint

    It is the width setting. The menu will become a hamburger icon when the window width is less than the setting, and clicking on the icon will toggle the menu display.

    The menu will switch to mobile mode if the width <= this breakpoint.

    The width mentioned above can be browser viewport width, containing element width, or device width. It is specified in the breakpointMode option in mcmenu.js. For details please refer to the breakpointMode option in the Documentation - JavaScript section in this page.


    Note:
    • When mobile breakpoint is reached, it will add a class mobile to the menu container <div id="mcmenu" class="mobile">...</div>.
    • The setting is the mobileBreakpoint option in mcmenu.js file. You can alter it directly in mcmenu.js in your download.
    • You can also set a tablet breakpoint at which the menu will turn to multiple rows. For details please refer to Step 4.
  • Step 2

    Sub-menus are opened by



    Note: In mobile mode the menu will always open on click.

  • Step 3: Choose style template

     

     

    Select the style template that best fits your needs.

    Your style customization in next step will be based on the chosen template.

  • Step 4: Styles

    • Display

      Alignment

      Background Color

      Border Color

      Arrow Thickness

      px

      Arrow Size

      • Inline-block: The menu allows other adjacent inline elements stay in the same line.
      • Block: The menu takes up the full block. Other adjacent elements will NOT stay in the same line.
      px
    • Padding X

      Padding Y

      This Padding Y and Font Size determine the height of the menu bar.

      The font in the list is Google Fonts except the Default.

      If a Google Font has been chosen, there will be a Google Font link in the head section in your download HTML demo page.

      This is for the top-level items in desktop mode only.

      Font Size of top-level items in mobile mode and Font Size of sub-menu items are configured at other places.

      Text Color

      Hover Text Color

      Font Size

      Hover Background

      Font Weight

      Uppercase

      Letter Spacing

      Font

    • Min-Width

      It specifies either the min-width of sub-menu UL, or if any, the min-width of each column (DIV.clm) under the full-width dropdown DIV.

      Set it to 0 or initial if no specific min width is required.

      We are using CSS box-shadow property to specify the border shadow effect.

      If you dislike the shadow border, you can remove the box-shadow specification from the generated mcmenu.css file, and if you prefer solid border, add border specification there.

      Padding X

      Padding Y

      Text Color

      Hover Text Color

      Background Color

      Hover Background

      Shadow Color

      Font Size

      Font Weight

      Font

    Top Menu in Multiple Rows

    This option is usually not required unless your top menu has many items, and you don't like the menu to turn to mobile style on tablet devices.

    Just let the menu directly come to mobile mode when the screen is not large enough.

    Just let the top menu always be one line.

    Control when to wrap the top menu and how it looks when wrapped.

    Breakpoint:     px  


    Columns of each row:      


    Note:
    • If you prefer the menu will also display in multi-rows in large screen desktop, just set the breakpoint to a very large value such as 99999
    • If you also has mobile phone breakpoint, this tablet breakpoint must be larger than the breakpoint for mobile devices
    • When tablet breakpoint is reached, it will add a class multirow to the menu container <div id="mcmenu" class="multirow">...</div>. So you can use the selector #mcmenu.multirow li.top-level to add more styles to it if you want.
    • The setting is the multirow option in mcmenu.js file. You can alter it directly in mcmenu.js in your download.
    • Position

      • Relative: The menu will appear in its default position in the HTML document
      • Absolute: Similar to above Relative except it is removed from the normal document flow. When the menu is open it will stay on top of its following contents instead of pushing them down.
      • Fixed: When the menu is open it will occupy the whole screen.

      Slide-in From

      Max Width

      Dropdown Open Direction

      When a sub-menu(dropdown) is opening, it is:

      • Horizontal: Sliding-in from right to left.
      • Vertical: Sliding-down. Opening a dropdown will not close other opened dropdowns.
      • Vertical Single: Sliding-down. Opening a dropdown will also close other opened dropdowns.

      The menu will slide in from this position when menu icon is clicked.

      Note:
      Some style codes, such as menu icon position, menu animations in mobile mode, are generated based on this option and the above Position option. Those codes are between the /*--begin mark1--*/ and /*--end mark1--*/ in mcmenu.css.

      If you dislike the default generated styles, you can directly eidt those codes.

      Following is an example of the updated code:

      /*--begin mark1--*/ #mcmenu.mobile { position:fixed;top:0;bottom:0;left:0;right:0; height:100%!important; transition:all 411ms ease; opacity:0; } #mcmenu.mobile.active { opacity:1; } #mcmenu.mobile {z-index:1000000004;} .mobile-fixed-bg {display:none;} .menu-icon.active { position:fixed;top:12px;left:12px;z-index:1000000006; } /*--end mark1--*/

      Arrow Position

      Menu Item Text Align

      Font Size (Top-level)

      Menu Border Color

    • Switch the Demo preview window to mobile mode, you will see that by default, the menu on mobile device will become a hamburger icon:

      • If you want to add text "MENU" after the menu icon, just add it to the HTML code. Example
        <div class="menu-icon" data-menu="mcmenu"> <div class="three-line"> <span></span> <span></span> <span></span> </div> <span style="font:bold 24px Arial;padding-left:10px;letter-spacing:-2px;">MENU</span> </div>

        You can see the live example in the One menu HTML code file for all pages viewing with mobile device or small browser window.

      • The configured menu icon styles can be found in the generated mcmenu.css under the .menu-icon-wrapper, .menu-icon, .menu-icon.active, .three-line selectors.
       

      Hamburger Icon

      Align

      Its position might also be specified based on the Position and Slide-in From options under the "Menu in Mobile Mode" tab.

      For details please click the question mark beside the Slide-in From option mentioned above.

      Icon Width

      px

      Line Spacing

      px

      Line Thickness

      px

      Line Color

      Icon padding

      px

      Icon Margin

      px

      Icon Background

      Border Color

  • Step 5

    Top Item Animation in Mobile mode

    Top Item Animation CSS Code

    More Styles that You Want to Add

    This specification and the next Top Item Animation CSS Code will specify 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.

    This setting will go the mcmenuOptions -> topItemAnimation in mcmenu.js.

    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.

    The animation code that applies to the top-level menu items (<span> or <a> element).

    Note:
    • You can freely change the animation code, but the code wrapper @keyframes topItemAnimation { ... } should not be changed.
    • The animation is disabled in IE browsers due to their poor performance with IE.

    Here you can add any additional CSS code to customize your menu styles.

  • Complete

    Congratulations! You have completed the menu customization.

    You can now click the "Download Source Code" button in this page to download the source code.

    Need more customization? It is highly recommended to read Directly modifying the generated mcmenu.css in the download package.

 

Documentation

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

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:

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", license: "mylicense" }; var mcmenu = new McMenu(mcmenuOptions); ......

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();

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:

Specify what width the mobileBreakpoint is referring to.

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

  • 1: Viewport width (browser width).
    This is equivalent to the CSS media queries @media (max-width: ?px).
  • 2: Device width.
    This is equivalent to the CSS media queries @media (max-device-width: ?px).
  • 3: Menu's containing element's width.
    Note: This requires the menu and all its parent elements has flexible width such as width:auto; or width:100%. Any of its parent has fixed width(e.g. width:700px) will make the menu mode never change.

1 is the most widely used option. 3 is used by the demo in this page.

Note: Don't forget to add the following code into the head section of your page:<meta name="viewport" content="width=device-width, initial-scale=1.0" /> Otherwise the script cannot interpret browser width correctly on mobile devices. For details please visit you will get a different device size and media query breakpoint when viewport meta is applied.

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.
Place to put your license key. License details

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

  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.


QUESTION & ANSWER
More ...

RECENT QUESTIONS

 

Your Name
+ =  

Question Title

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