jQuery Plugin To Create Hamburger Nav Icons using CSS3 - Hmbrgr

Hmbrgr is a lite jQuery plugin used to create animated hamburger navigation icons/buttons using CSS3 transitions and transforms.

See also:

• Hamburger Button Transition Effect with jQuery and CSS3

How to use it:

1. Load the latest version of jQuery library from Google CDN.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

2. Load the jQuery hmbrgr plugin's JavaScript and CSS in the web page.

<link href="hmbrgr.css" rel="stylesheet">
<script src="jquery.hmbrgr.min.js"></script>

3. Create a link for the hamburger navigation icon/button.

<a href="#" class="hmbrgr demo"></a>

4. Call the plugin to create a basic transition effect when the visitor click on the hamburger icon/button.

$('.hmbrgr.demo').hmbrgr();

4. Customize the hamburger navigation icon/button.

$('.hmbrgr.demo').hmbrgr({

// width/height of hamburger icon
width     : 60,
height    : 50,

// animation speed
speed     : 200,

// height
barHeight : 8,

// radius
barRadius : 0,

// color
barColor  : '#ffffff',

// animation type
animation : 'expand'

});

Change log:

2015-02-06

• prevent doubleclick

---

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