Dynamic content

Before proceeding, you should probably first read the basic 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. The API is stored in the mmenu data().

<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>
      <script src="path/to/jquery.js" type="text/javascript"></script>
      <script src="path/to/jquery.mmenu.min.js" type="text/javascript"></script>
      <link href="path/to/jquery.mmenu.css" type="text/css" rel="stylesheet" />

      <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>
      <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>
      <div>
         <div id="my-header">Demo</div>
         <div id="my-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>
   </body>
</html>