Lightweight Fullscreen Navigation with Hamburger Menu – Burger

Category: Javascript , Menu & Navigation , Recommended | April 6, 2015
Views Total:5,088 views
Official Page:Go to website
Last Update:April 6, 2015


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>

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>
  <a href="#" class="burger-brand">Burger</a> 

You Might Be Interested In:

Leave a Reply