Cacher is the code snippet organizer for pro developers

MMENU

• Used to create side navigation menu for responsive sites

Getting Started

• Require the following files
  • jquery.mmenu.all.js
  • jquery.mmenu.all.css
• In your html file, wrap all code one main <div>
• Create a separate <ol> menu within the code that contains <li>
• Wrap the <ol> in a <nav> element and attach an ID to it to be used in the jquery code
• This <nav> element will be positioned outside of the containing <div>

<nav id="my-menu">
   <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about/">About us</a></li>
      <li><a href="/contact/">Contact</a></li>
   </ul>
</nav>

• Sublists are created by utilizing an additional <ul> element within your <li> element:

<nav id="my-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>

• In script tags, write the following code:

<script>
 $(document).ready(function() {
    $("#id_of_nav").mmenu();
 });
</script>

• This will be enough to get the menu started!
• If you require a button to show the menu, add a <a> element with an href=#id_of_nav, give the <a> an id to be referenced!
• Then, in your js code (above), adjust it as follows:

<script>
 $(document).ready(function() {
    $("#id_of_nav").mmenu();
 });
 
 var API = $("#id_of_anchor_link").data("mmenu");
 
 $("#id_of_button").click(function() {
    API.open();
 });

</script>

• The menu can now be opened by using the <a>!