• Extras

• Mobile Menu

The Mobile Menu is a navigation menu that slides over the content of the page when toggled on. It's API is very simple and doesn't actually require the site be in any specific mobile state.

Usage

1. Add localmed-mobile-menu.css and localmed-mobile-menu.js to get started.
2. Next create the Mobile Menu by adding .mobile-menu class to an element that wraps an <ul> of links.
3. Then create a toggle using the Bootstrap-style data attribute of data-toggle="mobile-menu".
4. The toggle will need to point to a particular Mobile Menu by using either data-target or a standard href attribute as seen below:

<p>
  <a href="#standard-mobile-menu" data-toggle="mobile-menu">Toggle Mobile Menu</a>
</p>
<nav id="standard-mobile-menu" class="mobile-menu">
  <ul>
    <li><a href="#"><i class="icon-house"></i> Dashboard</a></li>
    <li><a href="#"><i class="icon-stethescope"></i> Favorite Doctors</a></li>
    <li><a href="#"><i class="icon-people"></i> Dependents</a></li>
    <li><a href="#"><i class="icon-history"></i> History</a></li>
    <li><a href="#"><i class="icon-gear"></i> Settings</a></li>
  </ul>
</nav>

<p>
  <a href="#standard-mobile-menu" data-toggle="mobile-menu">Toggle Mobile Menu</a>
</p>
<nav id="standard-mobile-menu" class="mobile-menu">
  <ul>
    <li>
      <a href="javascript:void(0)" data-toggle="dropdown" class="mobile-menu-submenu-toggle">
        <i class="icon-angle-down"></i>
      </a>
      <a href="#">Link 1</a>
      <ul>
        <li><a href="#">Link A</a></li>
      </ul>
    </li>
  </ul>
</nav>