@wealthsimple/hamburger

hamburger

Module for the Wealthsimple hamburger (side-nav) menu.

Installation

Dependencies:

• jQuery
• wealthsimple-fabric (soon to be open source)

Use bower to install it into your project:

bower install --save [e-mail]:wealthsimple/hamburger.git

Next, import the entry point hamburger SCSS into your main SCSS file:

@import "/path/to/bower_components/wealthsimple-hamburger/hamburger";

Then, include the hamburger.js file in your HTML:

<script src="/path/to/bower_components/wealthsimple-hamburger/hamburger.js"></script>

Finally, add the HTML for the hamburger menu:

<a class="hamburger-icon" data-hamburger-action="open">
  <div class="hamburger-icon-lines">
    <div class="hamburger-icon-line"></div>
    <div class="hamburger-icon-line"></div>
    <div class="hamburger-icon-line"></div>
  </div>
</a>

<div class="hamburger-menu">
  <div class="hamburger-button-close" data-hamburger-action="close"></div>
  <div class="hamburger-menu-items">
    <a href="/">Home</a>
    <a href="/features">Features</a>
    <a href="/blog">Blog</a>
    <a href="/signup">Sign up</a>
  </div>
</div>

Configuration

There are several SCSS variables exposed for possible customization:

• $hamburger-menu-z-index: The z-index for the expanded menu. You'll want to set this higher than all other z-indexes.
• $hamburger-button-close: The path or absolute URL to hamburger-button-close.svg (included).
• $hamburger-menu-width-small: The width of the hamburger menu when expanded (small screens).
• $hamburger-menu-width-medium: The width of the hamburger menu when expanded (medium screens).
• $hamburger-menu-width-large: The width of the hamburger menu when expanded (large screens).

Note that widths can be in px, %, or other measures.