Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Responsive Dropdown Navigation Bar
<section class="navigation">
<div class="nav-container">
<div class="brand">
<a href="#!">Logo</a>
</div>
<nav>
<div class="nav-mobile">
<a id="nav-toggle" href="#!"><span></span></a>
</div>
<ul class="nav-list">
<li>
<a href="#!">Home</a>
</li>
<li>
<a href="#!">About</a>
</li>
<li>
<a href="#!">Services</a>
<ul class="nav-dropdown">
<li>
<a href="#!">Web Design</a>
</li>
<li>
<a href="#!">Web Development</a>
</li>
<li>
<a href="#!">Graphic Design</a>
</li>
</ul>
</li>
<li>
<a href="#!">Pricing</a>
</li>
<li>
<a href="#!">Contact</a>
</li>
</ul>
</nav>
</div>
</section>
(function($) {
$(function() {
$('nav ul li > a:not(:only-child)').click(function(e) {
$(this).siblings('.nav-dropdown').toggle();
$('.nav-dropdown').not($(this).siblings()).hide();
e.stopPropagation();
});
$('html').click(function() {
$('.nav-dropdown').hide();
});
});
document.querySelector('#nav-toggle').addEventListener('click', function() {
this.classList.toggle('active');
});
$('#nav-toggle').click(function() {
$('nav ul').toggle();
});
})(jQuery);
$content-width: 1000px;
$breakpoint: 800px;
$nav-height: 70px;
$nav-background: #262626;
$nav-font-color: #ffffff;
$link-hover-color: #2581DC;
nav {
float: right;
ul {
list-style: none;
margin: 0;
padding: 0;
li {
float: left;
position: relative;
a {
display: block;
padding: 0 20px;
line-height: $nav-height;
background: $nav-background;
color: $nav-font-color;
text-decoration: none;
&:hover {
background: $link-hover-color;
color: $nav-font-color;
}
&:not(:only-child):after {
padding-left: 4px;
content: '';
}
}
ul li {
min-width: 190px;
& a {
padding: 15px;
line-height: 20px;
z-index: 1;
}
}
}
}
}
.nav-dropdown {
position: absolute;
display: none;
z-index: 1;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
.nav-mobile {
display: none;
position: absolute;
top: 0;
right: 0;
background: $nav-background;
height: $nav-height;
width: $nav-height;
}
#nav-toggle {
position: absolute;
left: 18px;
top: 22px;
cursor: pointer;
padding: 10px 35px 16px 0px;
span,
span:before,
span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: $nav-font-color;
position: absolute;
display: block;
content: '';
transition: all 300ms ease-in-out;
}
span:before {
top: -10px;
}
span:after {
bottom: -10px;
}
&.active span {
background-color: transparent;
&:before,
&:after {
top: 0;
}
&:before {
transform: rotate(45deg);
}
&:after {
transform: rotate(-45deg);
}
}
}
@media only screen and (max-width: $breakpoint) {
.nav-mobile {
display: block;
}
nav {
width: 100%;
padding: $nav-height 0 15px;
ul {
display: none;
li {
float: none;
a {
padding: 15px;
line-height: 20px;
}
ul li a {
padding-left: 30px;
}
}
}
}
.nav-dropdown {
position: static;
}
}
@media screen and (min-width: $breakpoint) {
.nav-list {
display: block !important;
}
}
.navigation {
height: $nav-height;
background: $nav-background;
}
.nav-container {
max-width: $content-width;
margin: 0 auto;
}
.brand {
position: absolute;
padding-left: 20px;
float: left;
line-height: $nav-height;
text-transform: uppercase;
font-size: 1.4em;
a,
a:visited {
color: $nav-font-color;
text-decoration: none;
}
}
@faresdja

This comment has been minimized.

Copy link

faresdja commented Mar 6, 2018

thank you

@Swdevlo

This comment has been minimized.

Copy link

Swdevlo commented Jun 12, 2018

ty very much

@xsaidz

This comment has been minimized.

Copy link

xsaidz commented Jun 19, 2018

thanks man

@webninjastar

This comment has been minimized.

Copy link

webninjastar commented Jun 28, 2018

thank you very much

@TheMonDon

This comment has been minimized.

Copy link

TheMonDon commented Mar 23, 2019

Thank you, this is wonderful.

@Cornel070

This comment has been minimized.

Copy link

Cornel070 commented May 9, 2019

cool

@siddiquiehtesham

This comment has been minimized.

Copy link

siddiquiehtesham commented Jul 11, 2019

Hey I am trying to use the code, the dropdown in the menus work but I cannot toggle the hamburger menu.
I am using the jquery cdn and the same above code.

@makanpours

This comment has been minimized.

Copy link

makanpours commented Jul 22, 2019

thanks very nice dropdown menu

@schleigh99

This comment has been minimized.

Copy link

schleigh99 commented Aug 16, 2019

This is great, thank you! Is there a license attached to this code?

@eddymagnate

This comment has been minimized.

Copy link

eddymagnate commented Sep 17, 2019

its awesome

@MoatazAbdAlmageed

This comment has been minimized.

Copy link

MoatazAbdAlmageed commented Nov 6, 2019

Thanks @taniarascia

@xsaidz: Tania is a girl :)

@adwebsite

This comment has been minimized.

Copy link

adwebsite commented Mar 28, 2020

شكرا جزيلا لك

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.