Android Style Side Drawer Navigation Plugin with jQuery - Hamburger

File Size: 3.78 KB
Views Total: 8306
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Android Style Side Drawer Navigation Plugin with jQuery - Hamburger

Hamburger is a jQuery plugin for creating an Android App-style sliding menu that displays a fly-out navigation on the left edge of the screen. As the sliding menu expands, it overlays the main content but not the action bar. Also known as 'Hamburger Menu', 'Navigation Drawer' or 'Off-canvas Menu'.

How to use it:

1. Create an action bar with a toggle menu to open the sliding menu.

<header>
  <div id="hamburger">
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="title hamburger-action">Your App Name</div>
</header>

2. Create the Html for a navigation menu.

<nav class="clear">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Share</a></li>
    <li><a href="#">Settings</a></li>
  </ul>
</nav>

3. Wrap your main content in a container with an unique ID 'content'.

<div id="content">
  ...
</div>

4. The required CSS styles for the sliding menu.

.title {
  float: left;
  color: #fff;
  position: relative;
  top: 1px;
}

.clear { clear: 'both'; }

header {
  background-color: #5EA97F;
  padding: 10px 10px 10px 0px;
  text-decoration: none;
  position: fixed;
  width: 100%;
  z-index: 5;
}

#content {
  background-color: #eee;
  padding: 52px 10px 10px 10px;
  position: relative;
  width: auto;
  min-height: 1000px;
  -webkit-box-shadow: -10px 0px 9px 0px rgba(0, 0, 0, 0.4);
  box-shadow: -10px 0px 9px 0px rgba(0, 0, 0, 0.4);
}

nav {
  top: 40px;
  margin-left: -70%;
  position: fixed;
  z-index: 2;
  width: 70%;
  height: 100%;
  background: #FFF;
}

nav ul {
  list-style: none;
  margin: 0;
  width: 100%;
  padding: 0;
}

nav li {
  position: relative;
  padding: 25px;
}

nav li a {
  color: #222;
  text-decoration: none;
}

#hamburger {
  cursor: pointer;
  display: block;
  height: 20px;
  position: relative;
  width: 20px;
  float: left;
  padding-right: 10px;
}

#hamburger div {
  background-color: #fff;
  height: 3px;
  margin-top: 3px;
  width: 90%;
}

.hamburger-action { cursor: pointer; }

#hamburger-overlay {
  display: none;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 1;
  opacity: 0;
  background: #000;
}

5. Load the jQuery javascript library and the jQuery hamburger plugin at the end of the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>script>
<script src="jquery.hamburger.js"></script>

This awesome jQuery plugin is developed by jishnu7. For more Advanced Usages, please check the demo page or visit the official website.