Well, I went on a quest a few hours ago, and I was hoping to find the answer here to help me.
Now it works for me, and I'll tell you what I found out, although I'm new to bootstrap. Someone else is free to call if you see a rookie mistake. Guess the time to pay off the community, as many of my questions have been answered here.
Here:
Take a look at this jsFiddle to see my full code example and demo: http://jsfiddle.net/acterry/fMYpg/
You will have a game with a vertical divider to see a change in transition from one style to another.
I wanted to use the same nav ul to manage both menus. But, looking at the source of Jquery.mmenu, I saw the following things that I knew could cause problems:
- mmenu wraps new containers (default by default) around your HTML
- mmenu modifies the ul menu in ways that are likely to cause inconvenience when loading.
- mmenu had no function to destroy itself and discard the DOM changes that it caused.
As a proof of concept, I was fine using predefined bootstrap breakpoints to determine which navigation style was shown.
Here is the HTML for the menu part
<div class="navbar navbar-inverse navbar-fixed-top"> <div class="visible-desktop navbar-inner"> <div class="container"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="brand" href="/">My Site</a> <div class="nav-collapse collapse"> <ul class="nav" id="mainSiteMenu"> <li><a href="#">Home</a> </li> <li><a href="#">Link 1</a> </li> <li><a href="#">Link 2</a> </li> <li><a href="#">Link 3</a> </li> </ul> </div> </div> </div> <div class="hidden-desktop navbar-inner"> <div class="container"> <a class="btn btn-navbar" href="#mainSiteMenuMMenuNav"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="brand" href="/">My Site</a> </div> </div> </div> <nav id="mainSiteMenuMMenuNav"></nav>
The following is a brief description of the steps:
- (not shown above) Wrap all the HTML on your page in a div, if it is not already in the same container. If you are using something other than a div, then set the page type to Nodetype in the mmenu configuration accordingly
- Define your nav ul as shown on the bootstrap component page. But, give us the UL ID so we can reference it later.
- Duplicate the internal bar navigator
- In the first navigation panel, add the visible desktop to the div class parameter - this is the navigation panel that will be displayed to desktop users. Bootstrap will hide it below the breakpoint on the table / tablet.
- In the second navbar-inner add a hidden desktop to the div class parameter - this is the navigation bar that will be displayed on tablets / phones (or anything else with a browser width less than 940 pixels by default)
- Add an empty container container with identifier (I used mainSiteMenuNav) after closing the navigation bar div. Here is the UL for mmenu.
- In my code, pay attention to the btn-navbar link in the second navigation bar. This is the button that will open / close mmenu. The href anchor must match any identifier you gave, an empty container container
Since I could not use the same UL for both menus, I decided to use jQuery to programmatically duplicate the one used by the loading navigation bar when loading the page, and transfer it to an empty nav container to use mmenu.
Perhaps it would be easier to just create an empty navigation container programmatically. I will probably do it tomorrow.
This javascript copies UL, puts it in the nav container and starts mmenu with the UL copied:
$(function () { $("#mainSiteMenuMMenuNav").append($("#mainSiteMenu").clone().attr("id", "mainSiteMenuMMenu").attr("class", "")); $("#mainSiteMenuMMenuNav").mmenu({ configuration: { pageNodetype: "div" } }); });
That should do it. If you have any problems, check everything. And again, I just thought about it a couple of hours ago ... so this might not be stupid proof.
If anyone has a better way or problems, let me know.