Responsive Multi-Level Menu demo

Description

On top of this webpage you can find a navigation menu.

• On a wide screen the menu comes up as a traditional horizontal menu. A submenu is revealed when you hover over one of the first 3 primary menu items using a mouse or when you tap on the item. Hovering over (or tapping on) any submenu item that has a submenu, will again reveal its sub-submenu.
• On smaller screens the horizontal menu is made invisible and replaced by a single 'Menu' button (on the top right of the screen). When you click/tap the button a popup menu appears that shows the 4 primary menu items. When you click/tap on an item that contains a submenu then the primary menu items dissapear and are replaced by a 'Back' menu item and the submenu items.

On a PC you can try the different menu layouts by making your browser window smaller/bigger. The breakpoint to switch layouts is defined in the CSS file that comes with the plugin. It is set to 64em (1024px).

The code

The html markup and javascript code of this demo looks as follows:

<div id="popupMenuBttn" class="rmlpopupmenuButtonText">Menu</div>
<div id="navMenu">
    <ul>
      <li>
        <a href="#">Fashion</a>
        <ul>
          <li>
            <a href="#">Men</a>
            <ul>
              <li><a href="">Shirts</a></li>
              <li><a href="">Jackets</a></li>
              <li><a href="">Jeans</a></li>
              <li><a href="">T-Shirts</a></li>
            </ul>
          </li>
          <li>
            <a href="#">Women</a>
            <ul>
              <li><a href="">Jackets</a></li>
              <li><a href="">Jeans</a></li>
              <li><a href="">Dresses</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">Electronics</a>
        <ul>
          <li><a href="">Cameras</a></li>
          <li><a href="">TV</a></li>
          <li><a href="">Phones</a></li>
          <li><a href="">Computers</a></li>
        </ul>
      </li>
      <li>
        <a href="#">Furniture</a>
        <ul>
          <li><a href="">Living Room</a></li>
          <li>
            <a href="#">Bedroom</a>
            <ul>
              <li><a href="">Beds</a></li>
              <li><a href="">Bedroom Sets</a></li>
              <li><a href="">Chests and Dressers</a></li>
            </ul>
          <li><a href="">Home Office</a></li>
        </ul>
      </li>
      <li><a href="">Jewelry</a></li>
      <li>
        <a href="#">Links</a>
        <ul>
          <li>
            <a href="#">2nd level</a>
            <ul>
              <li><a href="http://code.cwwonline.be">Home</a></li>
              <li><a href="#" onclick="$('#traceData').toggle(); return false;">Toggle</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
</div>

<script>
  $(function () {
    $('#navMenu').rmlmenu({
      // Menu options here:
      pMenuBttn: '#popupMenuBttn',
      pMenuBackText: 'Back',
      onLinkClick: function (el, ev) {
        var anchor = $(el).find('a:first');
        $('#prompt').html("Clicked/touched: " + anchor.text());
        return (anchor.attr('href').length == 0) ? true : false;
      }
    });
  });
</script>

In the above code a callback method is provided for onLinkClick in order to show the text of the clicked/tapped menu item in the status div on the page when the popup menu is active.