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: 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

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

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...