Hamburger Dropdown Menu with Bootstrap and jQuery

Plugin Preview

Share this:

How to start using jQuery?
More jQuery Top, Best and New Plugins
Top 100 jQuery Plugins

Plugin Overview

Plugin:	hamburgur-drop-down-menu
Author:	Ivan Grozdic
Licence:	MIT Licence
Published:	January 11, 2024
Official Website:	Go to website
Dependencies:	jQuery 1.3.1 or Latest version and Bootstrap 4.1.3
File Type:	zip archive (HTML, CSS & JavaScript)
Package Size:	7 KB

Demo Download

How to Use it:

1. Load the Bootstrap CSS and jQuery into HTML document:

<!--Boootstrap 4 CSS-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>

2.Include the hamburgur-drop-down-menu CSS and JavaScript (jQuery) file.

<!--hamburgur-drop-down-menu CSS-->
<link rel="stylesheet" href="css/style.css">

<!--hamburgur-drop-down-menu JS-->
<script src="js/index.js"></script>

3. Create header element that contains hamburger icon and your website logo.

<header class="cd-header">
<div class="header-wrapper">
<div class="logo-wrap">
<a href="#" class="hover-target"><span>your</span>logo</a></div>
<div class="nav-but-wrap">
<div class="menu-icon hover-target">
<span class="menu-icon__line menu-icon__line-left"></span>
<span class="menu-icon__line"></span>
<span class="menu-icon__line menu-icon__line-right"></span></div>
</div>
</div>
</header>

4. And finally create a div element with the class nav that contains your site links.

<div class="nav">
<div class="nav__content">
<ul class="nav__list">
 	<li class="nav__list-item active-nav"><a href="#" class="hover-target">Home</a></li>
 	<li class="nav__list-item"><a href="#" class="hover-target">Portfolio</a></li>
 	<li class="nav__list-item"><a href="#" class="hover-target">Studio</a></li>
 	<li class="nav__list-item"><a href="#" class="hover-target">News</a></li>
 	<li class="nav__list-item"><a href="#" class="hover-target">Contact</a></li>
</ul>
</div>
</div>

Asif Mughal

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.