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>
Similar Code Snippets:
Mobile-Friendly Sliding Mega Menu with CSS and jQuery - MA5 Menu
CSS 3D Folding Dropdown Animation
HTML Multilevel Accordion Navigation Menu
Lightweight Hamburger Menu with CSS and jQuery
Tab Menu With SVG Animated Icon
Show Hide Navbar on Scroll JavaScript
Bootstrap 4 Dynamic Table of Contents with jQuery
CSS Tree View with Lines Using ul li
Off Canvas Menu with Submenu - jQuery Pushy
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.