Hamburger Dropdown Menu with Bootstrap and jQuery

An Awesome hamburger drop down menu created with bootstrap 4 CSS and jQuery. There are two built in (dark & light) themes for this hamburger menu.

Plugin Preview


How to start using jQuery?

More jQuery Top, Best and New Plugins

Plugin Overview

Plugin: hamburgur-drop-down-menu
Author: Ivan Grozdic
Licence: MIT Licence
Published: 2019-02-15 05:28:16
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

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://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.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>

Be the first to comment

Leave a Reply

Your email address will not be published.


*