The jQuery hamburger menu component is usually used as a trigger for navigation menu, mainly on mobile versions of websites. Burger menu can be made without image, however in this example it requires jQuery library to run, but this can be done also in vanilla JavaScript.
watch live demo | see on GitHub.
Table of Contents
jQuery Hamburger menu example
To use this component on your website, you should define:
- additional CSS properties for “.burger-menu” to set sizes, colors and position of the component to fit it to your project,
- JavaScript/jQuery actions to open and close your menu, basing on your HTML markup.
HTML of jQuery hamburger menu:
<a href="#" class="burger-menu" title="menu-mobile"> <div class="lines"> <span></span> <span></span> <span></span> </div> <div class="crossed"> <span></span> <span></span> </div> </a>
CSS of jQuery hamburger menu:
.burger-menu {
display: inline-block;
width: 50px;
height: 50px;
position: relative;
}
.burger-menu span {
display: block;
width: 100%;
height: 3px;
border-radius: 2px;
margin-top: 8px;
background: #000;
}
.burger-menu span:first-child {
margin-top: 0;
}
.burger-menu .lines,
.burger-menu .crossed {
width: 100%;
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.burger-menu .crossed {
display: none;
}
.burger-menu .lines {
display: block;
}
.burger-menu.active .crossed {
display: block;
}
.burger-menu.active .lines {
display: none;
}
.burger-menu.active .crossed span {
position:absolute;
margin: 0;
width: 100%;
}
.burger-menu.active .crossed span:first-child {
-moz-transform: rotateZ(45deg);
-webkit-transform: rotateZ(45deg);
-ms-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.burger-menu.active .crossed span:last-child {
-moz-transform: rotateZ(-45deg);
-ms-transform: rotateZ(-45deg);
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
}The final example of jQuery Burger menu:
JavaScript of jQuery hamburger menu:
$(function() {
$(".burger-menu").click(function(e) {
e.preventDefault();
$(this).toggleClass("active");
/* Here you can toggle your menu basing on your html markkup */
});
});
