Lightweight Hamburger Menu with CSS and jQuery

Plugin Preview

Share this:

How to start using jQuery?

More jQuery Top, Best and New Plugins

Top 100 jQuery Plugins

Plugin Overview

Plugin:	Burger-menu-button
Author:	LesiukO
Licence:	MIT Licence
Published:	January 20, 2024
Repository:	Fork on GitHub
Dependencies:	jQuery 1.3.1 or Latest version, Font Awesome 5 and Normalize CSS
File Type:	zip archive (HTML, CSS & JavaScript )
Package Size:	5.31 KB

Demo Download

How to Create Lightweight Hamburger Menu

1. First of all load jQuery, Normalize and Font Awesome CSS into your HTML page.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- Normalize CSS -->	
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css" />

<!-- Fontawesome 5-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">

2. After that, create a basic markup for hamburger menu and add your navigation links in it.

<div class="menu-block">
   <nav class="menu-nav">
      <a class="menu-nav__link" href="#">Home</a>
      <a class="menu-nav__link" href="#">Portfolio</a>
      <a class="menu-nav__link" href="#">About</a>
      <a class="menu-nav__link" href="#">Contacts</a>
   </nav>
   <a href="#" class="menu-btn">
   <span></span>
   </a>
</div>

3. Now, style it using CSS.

/*-------- menu block -----------*/
.menu-block {
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	border-top-right-radius: 50px;
	border-bottom-right-radius: 50px;
}

.menu-nav {
	background-color: #fff;
	height: 50px;
	line-height: 50px;
	padding-left: 20px;
	padding-right: 40px;
	margin-right: -25px;
	border-top-left-radius: 50px;
	border-bottom-left-radius: 50px;
	/*--| animation |--*/
	transition: 0.5s;
	transform-origin: right center;
	transform: translateX(100%);
	opacity: 0;
}

.menu-nav_active {
	transform: translateX(0);
	opacity: 1;
}

.menu-nav__link {
	display: inline-block;
	color: #222;
	margin-right: 20px;
}

/*-------- button -----------*/
.section {
	height: 100vh;
	background-color: #7b1fa2;
	display: flex;
	justify-content: center;
	align-items: center;
}

.menu-btn {
	display: block;
	width: 50px;
	height: 50px;
	background-color: #fff;
	border-radius: 50%;
	position: relative;
}

.menu-btn span, 
.menu-btn span:before,
.menu-btn span:after { 
	position: absolute;
	top: 50%; margin-top: -1px;
	left: 50%; margin-left: -10px;
	width: 20px;
	height: 2px;
	background-color: #222;
}

.menu-btn span:before,
.menu-btn span:after {
	content: '';
	display: block;
	transition: 0.2s;
}

.menu-btn span:before {
	transform: translateY(-5px);
}

.menu-btn span:after {
	transform: translateY(5px);
}

.menu-btn_active span {
	height: 0;
}

.menu-btn_active span:before {
	transform: rotate(45deg);
}

.menu-btn_active span:after {
	transform: rotate(-45deg);
}

4. Finally, add the following jQuery code to active the hamburger menu functionality.

$('.menu-btn').on('click', function(e) {
	e.preventDefault;
	$(this).toggleClass('menu-btn_active');
	$('.menu-nav').toggleClass('menu-nav_active');
})

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.