Animated Hamburger Menu with JavaScript / jQuery

An ultra lightweight jQuery plugin to create animated hamburger navigation menu. The plugin creates horizontal menubar on the top of the page that converts into hamburger menu on small screen / mobile devices.

The core part of the menu is styled with CSS and Font Awesome CSS used for menu icons. The menu is fully responsive and can be fully customize.

Plugin Overview

Plugin: hamburger-navigation-menu
Author: Stanislav Andreev
Licence: MIT Licence
Published: January 19, 2024
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version and Font Awesome 4
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 1.38 MB

How to Make jQuery Animated Hamburger Menu

1. Load the jQuery JavaScript library, Normalize CSS, Google Font and Font Awesome (for icons) CSS into your website.

<!-- 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" />

<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=ZCOOL+QingKe+HuangYou" rel="stylesheet"> 

<!-- Font Awesome 5-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

2. Also, include hamburger menu‘s CSS and JavaScript file.

<!-- Menu CSS -->
<link  href="css/navigation-menu.css" rel="stylesheet">

<!-- Menu Js -->
<script src="js/hamburger-menu.js"></script>

3. Finally, create HTML structure for navigation menu and add your links & icons in it.

<header>
   <section id="nav">
		
     <div class="wrapper">
         <nav class="site-nav">
	   <h1 class="logo">Sten Home <span>Repairs</span></h1>
             <div class="menu-toggle">
             <div class="hamburger"></div>
             </div>
					
           <ul class="open desktop">
             <li><a href="#!" id="one"><i class="fas fa-home site-nav--icon"></i>Home</a></li>
             <li><a href="#!"><i class="fas fa-globe site-nav--icon"></i>Latest News</a></li>
             <li><a href="#!"><i class="fas fa-users site-nav--icon"></i>About us</a></li>
             <li><a href="#!"><i class="fas fa-download site-nav--icon"></i>Download</a></li>
             <li><a href="#!"><i class="fas fa-phone site-nav--icon"></i>Contact us</a></li>
           </ul>
        </nav>
     </div>
			
   </section>
</header>

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