aeotrin / branchee

Branchee is a lightweight mobile navigation plugin with built in transitions.

Branchee is a lightweight mobile navigation plugin with built in transitions. The menu is generated from a basic unordered list.

Menu

For the menu, wrap an unordered list with .branchee-menu and that with branchee-theme-XXX.

<div id="menu-1" class="branchee-theme-base">
  <div class="branchee-menu">
    <ul>
      <li><a class="branchee-menu-item-active" href="#">Item 1</a>
        <ul>
          <li><a href="#">Item 1.1</a>
            <ul>
              <li><a href="#">Item 1.1.1</a></li>
              <li><a href="#">Item 1.1.2</a></li>
              <li><a href="#">Item 1.1.3</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

Toggle

For the toggle, add a link to the page with .branchee-toggle-menu and whatever theme you are using.

<a class="branchee-toggle-menu branchee-theme-base" href="#menu-1">Toggle</a>

Plugin

Initialize the plugin by referencing the menu you created above

$('#menu-1').branchee({
  onAfterInit: function () {
    this.toggleOpen();
  }
});

Development

npm install
npm run watch-scss