Simple jQuery Drop Down Menu Tutorial
Navigation menu is the crucial role playing item in any web design. Never mistake by ignoring your website navigations because none of design can attract that smartly but a stylish looking navigation menu can do the smart work.
Are you one who looking for some simplest solution of how to make a jQuery drop down menu? If yes! Luckily you’re at the right place. Our this tutorial will help newbies to learn how drop down menus work actually. For the ease of readers we’ll explain the code in parts so let understand the code more conveniently.
This tutorial will be more useful for those with knowledge of the basics of jQuery and CSS. The tutorial doesn’t require that much expertise in coding but at least should have basics know-how so that you don’t comment calling it an alien coding lol. Here’s a quick screenshot of our final menu. Sorry @aliqayyum I’m cloning your website navigation design (smashinghub.com), but you’re so popular that people want things like you have…
Demo and download zip link
For knowing quickly, what we are learning today click on the demo button below to see the result/output of our tutorial. If you’re interested in getting just a copy, click on the download button below to get the copy of jQuery drop down menu.
1- The HTML Markup
While creating menus, the most preferred method is to use some sort of lists which will ease in standardization of the thing. This way styling with CSS become more easier and powerful. For a complete reference of how lists work check this link for reference.
Below is how our HTML markup will look like using the lists.
[code type=html]
<ul class=”navigation”>
<li><a href=”#”>Main Cat 1</a></li>
<li><a href=”#”>Main Cat 2 </a>
<ul>
<li><a href=”#”>Sub Cat 2-1</a></li>
<li><a href=”#”>Sub Cat 2-2</a></li>
<li><a href=”#”>Sub Cat 2-3</a></li>
<li><a href=”#”>Sub Cat 2-4</a></li>
<li><a href=”#”>Sub Cat 2-5</a></li>
</ul>
<div class=”clear”></div>
</li>
<li><a href=”#”>Main Cat 3 </a>
<ul>
<li><a href=”#”>Sub Cat 3-1</a></li>
<li><a href=”#”>Sub Cat 3-2</a></li>
<li><a href=”#”>Sub Cat 3-3</a></li>
<li><a href=”#”>Sub Cat 3-4</a></li>
<li><a href=”#”>Sub Cat 3-5</a></li>
<li><a href=”#”>Sub Cat 3-6</a></li>
<li><a href=”#”>Sub Cat 3-7</a></li>
</ul>
<div class=”clear”></div>
</li>
<li><a href=”#”>Main Cat </a></li>
</ul>
[/code]
2- CSS
Cascade Style Sheets are an important part in creating navigation menus. Without styling it may be near to impossible creating a good looking and stylish menu navigation. We’ll use CSS to show the menus in the horizontal form and to hide the sub menu navigation by default. In this part you can style your menu according to your design.
Lets start with setting the main font-family and the default font size of whole page for better look. This will go like below
[code type=css]
body{
font-family: Arial, Helvetica,sans-serif;
font-size:15px;
}
[/code]
After done with font-family setting, let’s adjust the margins, paddings and no list styles to main .navigation class to eliminate the extra spaces and a bullets styling.
[code type=css]
.navigation {
margin:0;
padding:0;
list-style:none;
}
[/code]
After basic CSS, now let’s trick with positions and code for showing items in-line and we’ll use float:left for the purpose.
[code type=css]
.navigation li {
float:left;
width:150px;
position:relative;
}
[/code]
The CSS for main category is almost done, now we’ll work on link elements to style them according to our design. We see a lot of people got confuse about why to use display:block. We set display:block to make sure it covers the whole area available in LI element.
[code type=css]
.navigation li a {
background:#262626;
color:#fff;
display:block;
padding:8px 7px 8px 7px;
text-decoration:none;
border-top:1px solid #F2861D;
text-align:center;
text-transform:uppercase;
}
[/code]
and of course on mouse over styling as below
[code type=css]
.navigation li a:hover {
color:#F2861D;
}
[/code]
So now we’re done with the styling of main category menu. Is it really giving nice look? OK fine! We know you’re worried about sub menu styling? Catch them too below.
We’ll put display:none because we don’t want sub menus visible by default So it will be hidden by default. This works like magic, it will hide the sub menu items and jQuery will do the rest of magic. Remaining properties are similar to the main category menu.
[code type=css]
.navigation ul {
position:absolute;
left:0;
display:none;
margin:0 0 0 -1px;
padding:0;
list-style:none;
border-bottom:3px solid #F2861D;
}
.navigation ul li {
width:150px;
float:left;
border-top:none;
}
.navigation ul a {
display:block;
height:15px;
padding:8px 7px 13px 7px;
color:#fff;
text-decoration:none;
border-top:none;
border-bottom:1px dashed #6B6B6B;
}
.navigation ul a:hover {
color:#F2861D;
}
[/code]
Great, CSS thing is done. You’re going to be a menu pro. The styling thing is over, hopefully you did understood it well and are waiting for the rest jQuery part but before that look at the below combined CSS we’ve done above.
[code type=css]
/* Giving a font-family and Size to give good look */
body{
font-family: Arial, Helvetica,sans-serif;
font-size:15px;
}
/* Adjusting the margins, paddings and no list styles */
.navigation {
margin:0;
padding:0;
list-style:none;
}
/* Little tricking with positions */
.navigation li {
float:left; /* Show list items inline */
width:150px;
position:relative;
}
/* Playing with Main Categories */
.navigation li a {
background:#262626;
color:#fff;
display:block; /* Making sure a element covers whole li area */
padding:8px 7px 8px 7px;
text-decoration:none; /* No underline */
border-top:1px solid #F2861D;
text-align:center;
text-transform:uppercase;
}
.navigation li a:hover {
color:#F2861D;
}
/* Sub Cat Menu stuff*/
.navigation ul {
position:absolute;
left:0;
display:none; /* Hide it by default */
margin:0 0 0 -1px;
padding:0;
list-style:none;
border-bottom:3px solid #F2861D;
}
.navigation ul li {
width:150px;
float:left;
border-top:none;
}
/* Sub Cat menu link properties */
.navigation ul a {
display:block; /* Making sure a element covers whole li area */
height:15px;
padding:8px 7px 13px 7px;
color:#fff;
text-decoration:none;
border-top:none;
border-bottom:1px dashed #6B6B6B;
}
.navigation ul a:hover {
color:#F2861D;
}
[/code]
3- The jQuery
After getting done with HTML markup and Styling, now is the most amazing jQuery part. JQuery did the magic ease in developments, previously achieving JavaScript menu was like climbing a K-2 mountain, a lot of code. We know many people are shaky in jQuery part, so we’ll explain every part written.
We’re going to use .hover() mouse event to trick with mouse enter and mouse leave function and a little animation using fadeIn() and fadeOut() functions. It’s simpler and easier to understand.
Before coding any jQuery, we’ll have to add a jQuery library which is jquery.js in the code to make it work. This can be downloaded at here. Download it and place it in your desired folder, src will be exact location of that file. We’re placing the jquery.js in the same directory.
[code type=javascript]
<script type=”text/javascript” src=”jquery.js”></script>
[/code]
Let’s begin writing the jQuery now. We’ll first explain the commands separately and then will combine them all at the end.
[code type=javascript]
$(document).ready(function () {
[/code]
The above code makes sure that all the DOM elements are completely loaded on the page. So it only will execute the function once all DOM is fully loaded. See .ready() event reference here.
[code type=javascript]
$(‘.navigation li’).hover(
[/code]
.hover() property will help us set the events for mouse enter and mouse leave for .navigation li. For complete reference of .hover() event, See this link.
[code type=javascript]
function () {
//Fade in the navigation submenu
$(‘ul’, this).fadeIn(); // fadeIn will show the sub cat menu
},
// When mouse leaves the .navigation element
function () {
//Fade out the navigation submenu
$(‘ul’, this).fadeOut(); // fadeOut will hide the sub cat menu
}
[/code]
Above commenting will be clear and helping. Don’t forget to put <script> tags before writing the jQuery. Combining the whole code will look like below.
[code type=javascript]
<script type=”text/javascript”>
// Executes the function when DOM will be loaded fully
$(document).ready(function () {
// hover property will help us set the events for mouse enter and mouse leave
$(‘.navigation li’).hover(
// When mouse enters the .navigation element
function () {
//Fade in the navigation submenu
$(‘ul’, this).fadeIn(); // fadeIn will show the sub cat menu
},
// When mouse leaves the .navigation element
function () {
//Fade out the navigation submenu
$(‘ul’, this).fadeOut(); // fadeOut will hide the sub cat menu
}
);
});
</script>
[/code]
The Final Code
Let’s have last look on the final code of HTML, CSS and jQuery combine.
[code type=html]
<html>
<head>
<title>jQuery Drop Down Menu</title>
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”>
// Executes the function when DOM will be loaded fully
$(document).ready(function () {
// hover property will help us set the events for mouse enter and mouse leave
$(‘.navigation li’).hover(
// When mouse enters the .navigation element
function () {
//Fade in the navigation submenu
$(‘ul’, this).fadeIn(); // fadeIn will show the sub cat menu
},
// When mouse leaves the .navigation element
function () {
//Fade out the navigation submenu
$(‘ul’, this).fadeOut(); // fadeOut will hide the sub cat menu
}
);
});
</script>
<style type=”text/css”>
/* Giving a font-family and Size to give good look */
body{
font-family: Arial, Helvetica,sans-serif;
font-size:15px;
}
/* Adjusting the margins, paddings and no list styles */
.navigation {
margin:0;
padding:0;
list-style:none;
}
/* Little tricking with positions */
.navigation li {
float:left; /* Show list items inline */
width:150px;
position:relative;
}
/* Playing with Main Categories */
.navigation li a {
background:#262626;
color:#fff;
display:block; /* Making sure a element covers whole li area */
padding:8px 7px 8px 7px;
text-decoration:none; /* No underline */
border-top:1px solid #F2861D;
text-align:center;
text-transform:uppercase;
}
.navigation li a:hover {
color:#F2861D;
}
/* Sub Cat Menu stuff*/
.navigation ul {
position:absolute;
left:0;
display:none; /* Hide it by default */
margin:0 0 0 -1px;
padding:0;
list-style:none;
border-bottom:3px solid #F2861D;
}
.navigation ul li {
width:150px;
float:left;
border-top:none;
}
/* Sub Cat menu link properties */
.navigation ul a {
display:block; /* Making sure a element covers whole li area */
height:15px;
padding:8px 7px 13px 7px;
color:#fff;
text-decoration:none;
border-top:none;
border-bottom:1px dashed #6B6B6B;
}
.navigation ul a:hover {
color:#F2861D;
}
</style>
</head>
<body>
<ul class=”navigation”>
<li><a href=”#”>Main Cat 1</a></li>
<li><a href=”#”>Main Cat 2 </a>
<ul>
<li><a href=”#”>Sub Cat 2-1</a></li>
<li><a href=”#”>Sub Cat 2-2</a></li>
<li><a href=”#”>Sub Cat 2-3</a></li>
<li><a href=”#”>Sub Cat 2-4</a></li>
<li><a href=”#”>Sub Cat 2-5</a></li>
</ul>
<div class=”clear”></div>
</li>
<li><a href=”#”>Main Cat 3 </a>
<ul>
<li><a href=”#”>Sub Cat 3-1</a></li>
<li><a href=”#”>Sub Cat 3-2</a></li>
<li><a href=”#”>Sub Cat 3-3</a></li>
<li><a href=”#”>Sub Cat 3-4</a></li>
<li><a href=”#”>Sub Cat 3-5</a></li>
<li><a href=”#”>Sub Cat 3-6</a></li>
<li><a href=”#”>Sub Cat 3-7</a></li>
</ul>
<div class=”clear”></div>
</li>
<li><a href=”#”>Main Cat </a></li>
</ul>
<div class=”clear”></div>
</body>
</html>
[/code]
Hopefully you’ve enjoyed this simple jQuery drop down menu. We’ll be waiting for your feedback and comments. Soon we’ll be writing more related code for multi-level drop down menu and some other stuff of jQuery.
Loved the tutorial? Help us spread the word. You can join us @facebook and @twitter.
Is there anyway to replace the hoverOn part of hover with a click? So when you click the main menu the subMenu appears and when you hoverOff the main menu the subMenu disappears?
gr8 article ….bst one for fresher in jquery
Wow really great share, i learned some thing from this article.Thanks much.
thank you….
WoW Awesome Work thanks sharing this 🙂
I suggest adding the stop(false,true) function to the jQuery hover state, in order to avoid the bug when a user hovers quickly over various main nav items.
Awesome beginners’ tutorial, by the way.
Regards,
Slavisa