Responsive Horizontal menu bar with html , css , jquery

Today I’m going to show you how to create a responsive menu with HTML, CSS and jQuery. I’m going to go over how to style the menu, using media queries and how to make the hamburger button toggle the menu.

HTML Section

<ul class=”active”>
<li class=”current-item”><a href=”#”>Home</a></li>
<li><a href=”#”>My Work</a></li>
<li><a href=”#”>About Me</a></li>
<li><a href=”#”>Get in Touch</a></li>
<li><a href=”#”>Blog</a></li>
</ul>

<a class=”toggle-nav” href=”#”>☰</a>

Search

css section

/*—– Toggle Button —–*/
.toggle-nav {
display:none;
}

/*—– Menu —–*/
@media screen and (min-width: 860px) {
.menu {
width:100%;
padding:10px 18px;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:3px;
background:#303030;
}
}

.menu ul {
display:inline-block;
}

.menu li {
margin:0px 50px 0px 0px;
float:left;
list-style:none;
font-size:17px;
}

.menu li:last-child {
margin-right:0px;
}

.menu a {
text-shadow:0px 1px 0px rgba(0,0,0,0.5);
color:#777;
transition:color linear 0.15s;
}

.menu a:hover, .menu .current-item a {
text-decoration:none;
color:#66a992;
}

/*—– Search —–*/
.search-form {
float:right;
display:inline-block;
}

.search-form input {
width:200px;
height:30px;
padding:0px 8px;
float:left;
border-radius:2px 0px 0px 2px;
font-size:13px;
}

.search-form button {
height:30px;
padding:0px 7px;
float:right;
border-radius:0px 2px 2px 0px;
background:#66a992;
font-size:13px;
font-weight:600;
text-shadow:0px 1px 0px rgba(0,0,0,0.3);
color:#fff;
}

/*—– Responsive —–*/
@media screen and (max-width: 1150px) {
.wrap {
width:90%;
}
}

@media screen and (max-width: 970px) {
.search-form input {
width:120px;
}
}

@media screen and (max-width: 860px) {
.menu {
position:relative;
display:inline-block;
}

.menu ul.active {
display:none;
}

.menu ul {
width:100%;
position:absolute;
top:120%;
left:0px;
padding:10px 18px;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:3px;
background:#303030;
}

.menu ul:after {
width:0px;
height:0px;
position:absolute;
top:0%;
left:22px;
content:”;
transform:translate(0%, -100%);
border-left:7px solid transparent;
border-right:7px solid transparent;
border-bottom:7px solid #303030;
}

.menu li {
margin:5px 0px 5px 0px;
float:none;
display:block;
}

.menu a {
display:block;
}

.toggle-nav {
padding:20px;
float:left;
display:inline-block;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:3px;
background:#303030;
text-shadow:0px 1px 0px rgba(0,0,0,0.5);
color:#777;
font-size:20px;
transition:color linear 0.15s;
}

.toggle-nav:hover, .toggle-nav.active {
text-decoration:none;
color:#66a992;
}

.search-form {
margin:12px 0px 0px 20px;
float:left;
}

.search-form input {
box-shadow:-1px 1px 2px rgba(0,0,0,0.1);
}
}

@media screen and (min-width: 860px) {
.menu {
width:100%;
padding:10px 18px;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:3px;
background:#303030;
}
}

jquery section

jQuery(document).ready(function() {
jQuery(‘.toggle-nav’).click(function(e) {
jQuery(this).toggleClass(‘active’);
jQuery(‘.menu ul’).toggleClass(‘active’);

e.preventDefault();
});
});

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

Up ↑

%d bloggers like this: