Dynamic content

Before proceeding, you should probably first read the off-canvas menu tutorial.

Adding new content to a menu created with the jQuery.mmenu plugin is really easy. All you need to do, is access the API and initiate the new content.

Create the menu

Lets start with setting up the HTML, fire the plugin and access the API.

<nav id="my-menu">
   <ul id="my-list">
      <li><a href="/">Home</a></li>
      <li id="my-item"><a href="/about/">About us</a></li>
      <li><a href="/contact/">Contact</a></li>
   </ul>
</nav>
<script type="text/javascript">
   $(document).ready(function() {
      $("#my-menu").mmenu();

      var API = $("#my-menu").data( "mmenu" );
   });
</script>

Note the ID on the UL and LI, we'll be using them later on.

Add new menu items

First, add a menu item (LI) to a listview (UL) with jQuery. Note that the plugin rearrages some of the HTML and the ID of an UL will be transfered to its parent panel (DIV).

Second, call the initPanels method from the API. The initPanels method expects one argument: the panel it needs to (re)initiate.

<script type="text/javascript">
   function add_new_li() {
      var li = '<li><a href="/work">Our work</a></li>';

      //   #my-list was an UL, now is a panel
      $("#my-list").find( ".mm-listview" ).append( li );

      API.initPanels( $("#my-list") );
   }
</script>

Add new submenus

Adding a submenu is no different from adding a menu item: Add the submenu (UL) to a menu item (LI) with jQuery and call the initPanels method.

Again, the initPanels method expects one argument: the panel it needs to (re)initiate.

<script type="text/javascript">
   function add_new_ul() {
      var ul = '<ul>';
      ul += '<li><a href="/about/history">History</a></li>';
      ul += '<li><a href="/about/team">The team</a></li>';
      ul += '<li><a href="/about/address">Our address</a></li>';
      ul += '</ul>';

      //   #my-item is a LI
      $("#my-item").append( ul );

      API.initPanels( $("#my-list") );
   }
</script>

Example

<!DOCTYPE html>
<html>
   <head>
      <title>Dynamic content demo</title>
      <meta charset="utf-8" />
      <link type="text/css" href="layout.css" rel="stylesheet" />

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

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

      <!-- Fire the plugin onDocumentReady -->
      <script type="text/javascript">
         $(document).ready(function() {
            $("#my-menu").mmenu();

            var API = $("#my-menu").data( "mmenu" );

            $("#add_li").click(function() {
               var li = '<li><a href="/work">Our work</a></li>';

               $("#my-list").find( ".mm-listview" ).append( li );
               API.initPanels( $("#my-list") );

               return false;
            });
            $("#add_ul").click(function() {
               var ul = '<ul>';
               ul += '<li><a href="/about/history">History</a></li>';
               ul += '<li><a href="/about/team">The team</a></li>';
               ul += '<li><a href="/about/address">Our address</a></li>';
               ul += '</ul>';

               $("#my-item").append( ul );
               API.initPanels( $("#my-list") );

               return false;
            });
         });
      </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 />
               <a id="add_li" href="#">Add a new menu item</a><br />
               <a id="add_ul" href="#">Add a new submenu</a></p>
         </div>
      </div>

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

   </body>
</html>