Hamburger Dropdown Menu with Bootstrap and jQuery

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

Plugin Overview

Plugin: hamburgur-drop-down-menu
Author: Ivan Grozdic
Licence: MIT Licence
Published: February 15, 2019
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="">

<!-- jQuery -->
<script src=""></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>

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>

Be the first to comment

Leave a Reply

Your email address will not be published.


19 − 8 =

This site uses Akismet to reduce spam. Learn how your comment data is processed.