Examples introduction

Here are some of the more extensive examples, all build with default options, extensions and add-ons. If you're looking for more basic examples, check out the options, extensions and add-ons.

Menu examples

Check out what you can do with some small javascript, CSS and a little bit of creativity.

Open in a new window
Open in a new window
Open in a new window
Open in a new window

App examples

With the offCanvas option set to false, you can easily create web applications that look and feel like native apps.

Open in a new window
Open in a new window

Playground

Here's a quick demo of how easy it is to create a cool and unique menu. If you'd like to learn more about customizing your menu, check out the options, extensions, add-ons and API pages.

Please note that not all options play well together, for example: You cant have the "panels zoom" effect without having "sliding submenus".

  • Options
  • Use sliding submenus.
  • Extensions
  • Use the "menu zoom" effect.
  • Use the "panels zoom" effect.
  • Dim out the page to black.
  • Open the menu from the right.
  • Apply the "dark" theme to the menu.
  • Add-ons
  • Prepend a fixed iconbar to the menu.
  • Show a small part of the parent panel.
  • Append a counter to the menu items.
  • Prepend a fixed header to the menu.
  • Prepend a fixed searchfield to the menu.
  • Append a fixed footer to the menu.



Congratulations, you're done!
Here's your HTML and javascript, the unimportant parts have been faded out:

<!DOCTYPE html>
<html>
   <head>

      <title>jQuery.mmenu playground</title>
      <meta charset="utf-8" />
      <link href="layout.css" rel="stylesheet" />

      <!-- Include jQuery.mmenu .css files -->
      <link href="path/to/css/jquery.mmenu.all.css" rel="stylesheet" />

      <!-- Include jQuery and the jQuery.mmenu .js files -->
      <script src="path/to/js/jquery.js"></script>
      <script src="path/to/js/jquery.mmenu.all.js"></script>

      <!-- Fire the plugin onDocumentReady -->
      <script>
         jQuery(document).ready(function( $ ) {

         });
      </script>

   </head>
   <body>

      <!-- The page -->
      <div class="page">
         <div class="header">
            <a href="#menu"></a>
            Demo
         </div>
         <div class="content">
            <p><strong>This is a demo.</strong><br />
               Click the menu icon to open the menu.</p>
         </div>
      </div>

      <!-- The menu -->
      <nav id="menu">
         <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/about">About us</a>
               <ul>
                  <li><a href="/about/history">History</a></li>
                  <li><a href="/about/team">The team</a></li>
                  <li><a href="/about/address">Our address</a></li>
               </ul>
            </li>
            <li><a href="/contact">Contact</a></li>
         </ul>
      </nav>

   </body>
</html>

Deprecated There is a new, improved version available. Check it out on mmenujs.com

Get the new version No thanks