Lightweight Hamburger Menu with CSS and jQuery

A lightweight hamburger menu created with CSS and jQuery to show list of navigation links horizontally. This simple yet flexible menu plugin helps you to create expandable horizontal menubar.

It uses CSS animations to convert burger icon to cross when user click to open menu. This simple menu can be fully customize with CSS according to your needs.

Plugin Overview

Plugin: Burger-menu-button
Author: LesiukO
Licence: MIT Licence
Published: June 13, 2019
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

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');
})