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.
Check out what you can do with some small javascript, CSS and a little bit of creativity.
With the offCanvas
option set to false
, you can easily create web applications that look and feel like native apps.
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".
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>