Sandbox: JavaScript

Provides dropdown menu capability, like you'd see for mobile devices. Adds 'click outside to close' functionality.

Example

  • scroll
  • me
  • down,
  • blah
  • blah
  • blah
  • blah

click off of the menu and it will close

<div class="example-container">
  <div class="contains-fixed">
    <div class="mobile-header">
      <a class="nav-btn" data-behavior="MobileMenu">Click me</a>
    </div>
    <div class="mobile-nav">
      <ul class="grey-90-bkg full-width list-unstyled">
        <li class="white">scroll</li>
        <li class="white">me</li>
        <li class="white">down,</li>
        <li class="white">blah</li>
        <li class="white">blah</li>
        <li class="white">blah</li>
        <li class="white">blah</li>
      </ul>
    </div>
  </div>
</div>
<p>
  click off of the menu and it will close
</p>

Behavior Options

These options apply only to the data- tag invocation.

Name type default description
target string '.mobile-nav' The menu element to reveal.
zIndex number 500 This behavior sets target to this z-index, and the mask to this - 1.
revealClass string '.reveal' The class to add to target to reveal it.
navbar string Optional The selector to a navbar to add a class to.
navbarClass string Optional The class to add to the selected navbar.