Today we will show you how to make a professional responsive drop down navigation menu with a jQuery. We used this menu on our latest HTML5 template (Fondamental). I did a search on the web and the search engines like this article but i could not find any tutorial like this. In this tutorial, you will learn how to make responsive drop down menu in a few steps. Please visit demo page for more information and menu action or you can download this menu to your computers. You can make an amazing responsive websites or blogs with our free responsive drop down menu! We recommend that you read the article.
Please don’t forget to bookmark this page and also share this article on your social media profiles for support us. Share at your comments if there responsive menus you have, so we can also share them with the rest of our friends and followers. Now let’s take a look what to do with this plugins.
The first step you need to do is to create one html menu. To do this, simply take advantage of HTML5 codes. Where is the menu you want to show your design, add the following codes to get there. We have made classic menu are below for you. Let’s take a look on how to we make it.
Step #1 – Make HTML Menu
Step #2 – Add CSS Codes
So, a drop down menu created in the first step. Now, you can add CSS codes in this menu and make beautiful like our demo. Please add following codes to the your style.css file. If you are added CSS codes in your style.css, your menu will looks my demo.
.tinynav {
display:none;
}
nav {
width:auto;
position:relative;
z-index:9999;
}
#nav {
padding:0px;
font-weight:normal;
list-style-type:none;
position:relative;
display:block;
height:80px;
width: 940px;
margin: 0 auto;
z-index:9999;
float:left;
background-color:#fff;
}
#nav li {
float:left;
display:block;
width:auto;
position:relative;
z-index:500;
}
#nav li a {
display:block;
line-height:80px;
padding:0px 20px;
height:80px;
text-decoration:none;
color:#000;
font-weight:300;
font-size:16px;
-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
-ms-transition:all 0.2s ease-in-out;
transition:all 0.2s ease-in-out;
}
#nav li a:hover {
color:#fff;
background-color: #0088b2;
background-image: linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.08) 0%);
background-image: -o-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.08) 0%);
background-image: -moz-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.08) 0%);
background-image: -webkit-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.08) 0%);
background-image: -ms-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.08) 0%);
}
#nav li a.active
{
color: #fff;
background-color: #0088b2;
background-image: linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.08) 0%);
background-image: -o-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.08) 0%);
background-image: -moz-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.08) 0%);
background-image: -webkit-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.08) 0%);
background-image: -ms-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.08) 0%);
}
#nav ul {
position:absolute;
left:0;
display:none;
margin:0;
padding:0;
list-style:none;
}
#nav ul li {
min-width:180px;
float:left;
height:50px;
border-bottom-style:solid;
border-bottom-width:1px;
border-bottom-color:#000;
}
#nav ul li a,#nav ul li ul a {
font-size:14px;
padding-left:20px;
line-height:50px;
color:#000;
}
#nav ul a.active:after,#nav ul a.active:before {
border:none !important;
}
#nav ul a {
display:block;
height:50px;
padding:0px 5px 0px 5px;
color:#000;
background-color:#fff;
background-color:rgba(255,255,255,0.8);
font-weight:normal;
-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
-ms-transition:all 0.2s ease-in-out;
transition:all 0.2s ease-in-out;
border:none !important;
}
#nav ul a:active, #nav ul a:hover
{
border:none !important;
}
#nav ul li a.active {
color:#fff;
background:#0088b2;
}
#nav ul a:active,#nav ul a:hover {
border:none !important;
}
#nav ul a:hover {
text-decoration:none;
color:#fff;
background:#0088b2;
}
#nav ul li ul {
margin-left:180px;
position:absolute;
display:none;
padding:0px;
height:auto;
top:0px;
}
#nav ul li ul li {
width:180px;
float: left;
}
Step #3 – Add Responsive CSS Codes
The third step, you must add responsive style codes to the your menu. If you theme or template has been ready responsive, please do not use @media tags just use our responsive style codes. You can test this menu with any responsive design tools or resize your web browsers.
@media only screen and (min-width: 768px) and (max-width: 959px) {
#nav {width: 768px}
#nav { height:70px; }
#nav li a {
line-height:70px;
height:70px;
font-size:12px !important;
padding:0 10px !important;
}
#nav ul li {
height:40px;
}
#nav ul li a,#nav ul li ul a {
font-size:12px !important;
line-height:40px;
}
#nav ul a {
height:40px;
}
}
@media only screen and (max-width: 767px) {
#nav {
display:none;
}
.tinynav{
width: 300px !important;
display: table;
margin:0 auto;
font-size:16px;
border-radius: 0 !important;
background:#fff;
}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
#nav {
display:none;
}
.tinynav{
width: 420px !important;
display: table;
margin:0 auto;
font-size:16px;
border-radius: 0 !important;
background:#fff;
}
nav.primary li:after,
nav.primary a {
font-size: 12px;
padding: 0 3px;
}
nav.primary li {line-height:1}
}
Step #4 – Add jQuery Codes
If you are done correctly all steps, it’s time to work your menu drop down sections. In this step, you must add TinyNav jQuery plugin to the your theme or template file. If your design ready for standard Google API jQuery, please don’t add Google API 1.8.2 jQuery file.
Step #5 – Call jQuery Plugin
Please add jQuery plugin code to your footer are (above /body tag). If you have made, now your menu look’s my demo.
If you done steps properly, responsive drop down menu will appear same as demo page. All codes are available at download link. You can download and use free from there. We hope this educative article will be useful for you. Thanks a lot or spare time to read it. Please help us by sharing this article in your social media profiles and also bookmark us.
Our last tutorial was about How to Make jQuery Horizontal and Vertical Tabs. We recommend you to read it also and please share this article on your social media profiles and also bookmark us.