Lightweight Fullscreen Navigation with Hamburger Menu – Burger

Burger.js is a small JavaScript library that uses CSS3 animations to reveal a fullscreen navigation with an animated hamburger toggle menu.

How to use it:

Include the Burger’s JavaScript and stylesheet in your webpage.

<link rel="stylesheet" href="css/burger.min.css">
<script src="scripts/burger.min.js"></script>

Create the Html for the fullscreen navigation using Html unordered list.

<div class="burger-nav">
  <li><a class="burger-link active" href="#">Home</a></li>
  <li><a class="burger-link" href="#">Blog</a></li>
  <li><a class="burger-link" href="#">Portfolio</a></li>
  <li><a class="burger-link" href="#">About</a></li>
  <li><a class="burger-link" href="#">Contact</a></li>
</div>

Create a hamburger icon that acts as the toggle button for the fullscreen navigation.

<div class="burger-contain">
  <div class="burger">
    <div class="bun bun-top"></div>
    <div class="bun bun-mid"></div>
    <div class="bun bun-bottom"></div>
  </div>
  <a href="#" class="burger-brand">Burger</a> 
</div>