Narrating Prophetic Monks

    This package has been deprecated

    Author message:

    Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

    @wealthsimple/hamburger

    1.0.2 • Public • Published

    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 git@github.com: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.

    Keywords

    none

    Install

    npm i @wealthsimple/hamburger

    DownloadsWeekly Downloads

    3

    Version

    1.0.2

    License

    MIT

    Last publish

    Collaborators

    • 6
    • abejfehr
    • alexturpin
    • cchawn
    • f3ndot
    • jsuter
    • sdavenportws
    • spollock-ws
    • sterlingwes
    • wealthsimple-ci
    • ws-sumeet