Easy Mobile-first Side Naviation – Menu Hamburger

Preview:

Description:

Menu Hamburger is a JavaScript library used to create a mobile-first off-canvas side navigation (also called off-canvas menu) on your modern responsive web applications.

How to use it:

1. Add your menu contents to the side navigation.

<aside class="sidebar sidebar-closed">
  <h1>Any Content Here</h1>
</aside>

2. Create a hamburger menu toggler in your site header.

<header class="main-header">
  <h1>Your Logo</h1>
  <div id="menu-wrapper"></div>
</header>

3. The necessary CSS styles for the side nav.

.sidebar{
  -webkit-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 350px;
  background: #fff;
  -webkit-box-shadow: 0 2px 20px lightgrey;
          box-shadow: 0 2px 20px lightgrey;
  z-index: 5;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1rem;
  color: #e9e9e9;
  text-align: center;
  line-height: 2;
}
.sidebar-closed{
  -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
          transform: translateX(-100%);
}
.sidebar-opened{
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
}
.main-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  -webkit-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  padding: 1rem 2rem;
  background: #fff;
  -webkit-box-shadow: 0 2px 20px lightgrey;
          box-shadow: 0 2px 20px lightgrey;
  z-index: 3;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
    color: #c4c4c4;
    font-size: 0.9em;
    font-weight: 200;
}
@media screen and (max-width: 500px){
  .main-header{
    padding: 0.85rem;
  }
  .sidebar{
    width: 250px;
  }
  .main-header-opened{
    -webkit-transform: translateX(250px);
        -ms-transform: translateX(250px);
            transform: translateX(250px);
  }
  .main-header h1{
    display: none;
  }
}

4. Load the menu-hamburger’s JavaScript in the document.

<script src="https://unpkg.com/menu-hamburger@latest/lib/menu-hamburger.min.js"></script>

5. Initialize the side nav.

var menu = MenuHamburger.initialize({
    rootElement: document.getElementById("menu-wrapper");
});

6. Default configs to customize the side menu.

var menu = MenuHamburger.initialize({
    // root element
    rootElement: null,
    // menu size
    size: 30,
    // line width
    lineWidth: 3,
    // menu class
    menuClassName: null,
    // menu icon class
    menuIconClassName: null,
    // CSS transition
    transition: 'all .2s ease-in-out',
    // background color
    backgroundColor: 'white',
    // border radius
    borderRadius: '8px',
    // icon color
    iconColor: '#444',
    // open the side nav on init
    initOpened: false
    
});

7. API methods.

// toggle
menu.toggle();
// open
menu.open();
// close
menu.close();
// destroy
menu.destroy();

8. Event handlers.

menu.on("init", () => {
  // do something
});
menu.on("toggle", () => {
  // do something
});
menu.on("open", () => {
  // do something
});
menu.on("close", () => {
  // do something
});
menu.on("destroy", () => {
  // do something
});