Lightweight Fullscreen Navigation with Hamburger Menu – Burger

Category: Javascript , Menu & Navigation , Recommended | April 6, 2015
Author: mblode
Views Total: 4,613
Official Page: Go to website
Last Update: April 6, 2015
License: MIT

Preview:

Lightweight Fullscreen Navigation with Hamburger Menu – Burger

Description:

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>

You Might Be Interested In:

Leave a Reply