Responsive Hamburger Menu With jQuery And TailwindCSS
| File Size: | 9.5 KB |
|---|---|
| Views Total: | 1306 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
A jQuery-powered responsive menu that transforms a standard navbar into a fullscreen hamburger toggle menu on small screens.
It is built with jQuery, Tailwind.css, and Font Awesome. Easy to integrate it into your existing project in just a minute.
How to use it:
1. Load the necessary jQuery, Tailwind.css, and Font Awesome in the document.
<link rel="stylesheet" href="/path/to/font-awesome/all.min.css" /> <script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="https://cdn.tailwindcss.com"></script>
2. Create the HTML for the responsive menu.
<header class="shadow-sm">
<div class="container mx-auto p-6">
<div class="flex justify-between items-center">
<a
href=""
class="text-gray-800 text-xl hover:text-indigo-500 font-medium inline-flex space-x-3 items-center"
>
<span><img src="./assets/Logo.svg" alt="" /></span>
<span>jQueryScript</span>
</a>
<!-- Navbar -->
<div
id="nav"
class="hidden md:inline-flex space-x-8 items-center text-gray-800"
>
<a href="#"><p class="hover:text-indigo-600">Overview</p></a>
<a href="#"><p class="hover:text-indigo-600">Project</p></a>
<a href="#"><p class="hover:text-indigo-600">Data</p></a>
<a href="#"><p class="hover:text-indigo-600">Analytics</p></a>
<a href="#"><p class="hover:text-indigo-600">Team</p></a>
</div>
<!-- Hamburger Button -->
<div id="menu" class="block md:hidden">
<button class="focus:outline-none focus:outline-none" id="open">
<i class="fas fa-bars text-gray-800 text-xl items-center"></i>
</button>
</div>
</div>
<!-- Mobile Version -->
<div id="mobile" class="hidden">
<div
class="bg-gray-900 absolute top-0 right-0 w-full h-screen overflow-scroll p-6"
>
<div class="flex w-full justify-between items-center">
<a
href=""
class="text-gray-100 text-xl hover:text-indigo-500 font-medium space-x-3 inline-flex items-center"
>
<span><img src="./assets/Logo.svg" alt="" /></span>
<span>Vencortex</span>
</a>
<div>
<button
class="float-right focus:outline-none focus:outline-none"
id="close"
>
<i
class="fas fa-times text-gray-500 text-2xl items-center"
></i>
</button>
</div>
</div>
<div id="mobileNav" class="pt-6 pb-6">
<div>
<a
href=""
class="text-gray-300 text-lg py-3 hover:text-indigo-500 inline-flex items-center"
>
<span class="pr-4"
><img src="./assets/Overview.svg" alt=""
/></span>
<span>Overview</span>
</a>
</div>
<div>
<a
href=""
class="text-gray-300 text-lg py-3 hover:text-indigo-500 flex justify-between items-center"
>
<div class="inline-flex space-x-4 items-center">
<span
><img src="./assets/Project.svg" alt=""
/></span>
<span class="float-left">Projects</p>
</div>
<div>
<p class="float-right text-right bg-red-500 text-gray-100 px-4 py-1 rounded-full text-sm">
2
</p>
</div>
</a>
</div>
<div>
<a
href=""
class="text-gray-300 text-lg py-3 hover:text-indigo-500 inline-flex items-center"
>
<span class="pr-4"
><img src="./assets/Data.svg" alt=""
/></span>
<span>Data</span>
</a>
</div>
<div>
<a
href=""
class="text-gray-300 text-lg py-3 hover:text-indigo-500 inline-flex items-center"
>
<span class="pr-4"
><img src="./assets/Analytics.svg" alt=""
/></span>
<span>Analytics</span>
</a>
</div>
<div>
<a
href=""
class="text-gray-300 text-lg py-3 hover:text-indigo-500 inline-flex items-center"
>
<span class="pr-4"
><img src="./assets/Team.svg" alt=""
/></span>
<span>Team</span>
</a>
</div>
<div class="border-2 border-gray-600 mt-4"></div>
</div>
<div>
<div>
<div
class="text-gray-300 text-lg pb-4 hover:text-indigo-500 inline-flex items-center"
>
<span class="pr-4"
><img src="./assets/Starred.svg" alt=""
/></span>
<span>Starred</span>
</div>
</div>
<div class="text-gray-500">
<div>
<a
href=""
class="text-gray-400 text-base py-2 hover:text-indigo-500 inline-flex items-center"
>
<span class="pr-4"
><img src="./assets/Doc.svg" alt=""
/></span>
<span>Offer online courses</span>
</a>
</div>
<div>
<a
href=""
class="text-gray-400 text-base py-2 hover:text-indigo-500 inline-flex items-center"
>
<span class="pr-4"
><img src="./assets/Doc.svg" alt=""
/></span>
<span>Create a popular social media channel</span>
</a>
</div>
<div>
<a
href=""
class="text-gray-400 text-base py-2 hover:text-indigo-500 inline-flex items-center"
>
<span class="pr-4"
><img src="./assets/Doc.svg" alt=""
/></span>
<span>Flagship course for freelancer</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
3. Enable the hamburger button to toggle the mobile menu.
$(document).ready(function () {
$('#close').click(function () {
$('#mobile').fadeOut('fast', function () {});
});
$('#open').click(function () {
$('#mobile').fadeIn('fast', function () {});
});
});
This awesome jQuery plugin is developed by abhisek47. For more Advanced Usages, please check the demo page or visit the official website.
