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: June 2, 2019
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>