A tutorial for service.rmlmenu.jquery - Responsive Multi-Level Menu

<link rel="stylesheet" type="text/css" href="[your-path]/service.rmlmenu.jquery.css" />
<script src="[your-path]/service.rmlmenu.jquery.min.js"></script>
<script src="~/Content/Libs/service.ontouchclick.jquery-1.0.0/service.ontouchclick.jquery.min.js"></script>

<!-- The 1st div is the container for the top Menu button that must be shown
when the horizontal navigation menu is hidden on small devices -->

<div id="popupMenuBttn" class="rmlpopupmenuButtonText">Menu</div>

<!-- The 2nd div holds all the menu items by putting them in a multi-level
unordered list -->

<div id="navMenu" class="navMenu">
  <ul>
    <!-- First menuitem with children -->
    <li><a href="#" title="Information menu">Info</a>
      <ul>
        <li><a href="/info/item1.aspx">Info item 1</a></li> 
        <li><a href="#">Info item 2</a>
          <ul>
            <li><a href="/info/item2_1.aspx">Info item 2.1</a></li>  
            <li><a href="/info/item2_2.aspx">Info item 2.2</a></li> 
          </ul>
        </li> 
      </ul>
    </li>
    <!-- Second menuitem without children -->
    <li><a href="/Sponsors.aspx" title="Sponsors menu">Sponsors</a>
    </li>
    <!-- Etc.. -->
  </ul>
</div>

element that holds the navigation menuitems to the plugin component. With the assignment you also have to tell the component which element defines the popup menu button that has to appear when the horizontal menu must dissappear.

<script type="text/javascript">

  // Execute on page load
  $(function () {

    // Initialize navigation menu
    $('#navMenu').rmlmenu({
      // Menu options here:
      pMenuBttn: '#popupMenuBttn',
      pMenuBackText: 'Back',
      onPopupMenuOpen: function () {
        // You can do something here when the popup menu is opened
        $('#miniNav').addClass('showIcons');
      },
      onPopupMenuClose: function () {
        // You can do something here when the popup menu is closed
        $('#miniNav').removeClass('showIcons');
      }
    });

  });

</script>

That is all you need to have a multi-level menu that scales from a horizontal menu on wide screens to a popup menu on small screens. The breakpoint to go from horizontal to popup and vice versa is configured in the CSS file that comes with the plugin. You will find there device queries to show/hide the popup menu button (using class rmlpopupmenuButton and rmlpopupmenuButtonText). The plugin monitors the visibility state of the button to enable one of the 2 menu layouts.

Important

Be sure to specify href="#" in the anchor tag of each li that has a submenu, i.e. has a ul element. If you don't do that the horizontal menu will not be reliable on touch devices. In particular: when you tap on a 'menugroup' on touch devices the submenu will not pop up but instead the link will be invoked. The href="#" solution is chosen (instead of an approach using event.preventDefault) because it works reliable irrespective how many levels deep the menu goes.

Styling

The plugin comes with a CSS file that contains some basic styles for both the horizontal layout of the menu and the popup version of the menu.

• In case you want to style the horizontal menu different from how it is done in the plugin's CSS file, then you should have a look at the CSS file and in particul to the styles that have rmlmenu as parent class.
• To style the popup menu have a look at the styles with rmlPopupPanel and rmlpopupmenu as parent class.
  The first one is for the menu background panel that goes from the top of the screen to the bottom.
  The second is for styling the menuitems inside the popup.
• For styling the popup menu button the CSS offers 2 possibilities:
  • The 1st one is when you assign class rmlpopupmenuButton to the popupMenuBttn div. In that case you must add 3 empty spans to the div. The button presents itself in 'hamburger' style without any text.
  • The 2nd one is when you use class rmlpopupmenuButtonText. This shows like a real button with text inside. You must provide the text with the div.

API

Initialization method

[jqObject(s)].flatcheckbox(options)

The options argument is a javascript associative array (an object with key/value pairs) that allows you to initialize the plugin with some properties.

Properties

pMenuBttn

Type: String
Default: "popupMenuBttn"
This property defines the jquery selector string to control the popup menu button.

---

pMenuBackText

Type: String
Default: "Back"
This property specifies the text that has to be shown in the top 'Back' menu item when a submenu is active. It only applies to situations where the poup menu is shown.

---

pMenuTitle

Type: String
Default: "Menu"
When the navigation menu is shown in the form of a popup menu a title is shown at the top of the panel. This property allows you to specify this title.

---

onLevelClick

Type: callback function
Signature: onLevelClick: function (el, name) { }
el: The <li> DOM element that was clicked/touched.
name: The text of the first anchor child elemen of the above list element.
This callback is only occurring in situations where the popup menu is active. It is then called when the user clicks on a menu item which has a submenu.

---

onLinkClick

Type: callback function
Signature: onLinkClick: function (el, event) { }
el: The <li> DOM element that was clicked/touched.
event: The browser event that has been raised as a result of click/touch.
This callback is only occurring in situations where the popup menu is active. It is then called when the user clicks on a menu item that has a real anchor action attached.
When you provide this callback you must return either true or false: when you return false then the component will, as expected, trigger the URL that is defined for the menu item; when you return true then the component assumes that you took care of the action and so the URL is not invoked.

---

onPopupMenuOpen

Type: callback function
Signature: onPopupMenuOpen: function () { }
This callback is called when the poupmenu is opened.

---

onPopupMenuClose

Type: callback function
Signature: onPopupMenuClose: function () { }
This callback is called when the poupmenu is closed.

Other methods

None.