jQuery-Drop-Down-Menu

Simple JQuery Drop Down Menu

Drop Down menu is the crucial role playing item in any web design. Never mistake by ignoring your website drop downs because none of design can attract that smartly but a stylish looking drop down 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 drop down design (smashinghub.com), but you’re so popular that people want things like you have…

jQuery-Drop-Down-Menu

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.

demo-jquery-menu download-jquery-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.

<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>

2- CSS

Cascade Style Sheets are an important part in creating drop down menus. Without styling it may be near to impossible creating a good looking and stylish menu drop down. We’ll use CSS to show the menus in the horizontal form and to hide the sub menu drop down 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

body{
font-family: Arial, Helvetica,sans-serif;
font-size:15px;
}

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.

.navigation {
margin:0;
padding:0;
list-style:none;
}

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.

.navigation li {
float:left;
width:150px;
position:relative;
}

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.

.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;
}

and of course on mouse over styling as below

.navigation li a:hover {
color:#F2861D;
}

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.

.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;
}

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.

/* 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;
}

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.

<script type="text/javascript" src="jquery.js"></script>

Let’s begin writing the jQuery now. We’ll first explain the commands separately and then will combine them all at the end.

$(document).ready(function () {

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.

$('.navigation li').hover(

.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.

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
}

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.

<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>

The Final Code

Let’s have last look on the final code of HTML, CSS and jQuery combine.

jQuery Drop Down Menu
<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>



<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>

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

Related Posts


5 thoughts on “Simple JQuery Drop Down Menu

  1. maryland computer

    Simply wish to say your article is as amazing. The clearness to your put up is simply great and i can think you are knowledgeable on this subject. Fine along with your permission let me to grasp your RSS feed to stay up to date with drawing close post. Thanks a million and please carry on the gratifying work.

    Reply
  2. get jvzoo

    You actually make it seem really easy together with your presentation but I in finding this topic to be actually one thing that I feel I’d by no means understand. It kind of feels too complicated and extremely extensive for me. I am having a look ahead for your subsequent publish, I will try to get the hang of it!

    Reply
  3. South african Couples

    Hey, You will have completed an admirable job. I’ll undoubtedly yahoo this and my own view highly recommend to be able to my buddies. Now i’m self-assured they shall be benefited from this site.

    Reply
  4. Guild Web Hosting

    You actually make it seem really easy with your presentation however I in finding this matter to be actually something which I feel I’d by no means understand. It kind of feels too complicated and very huge for me. I am looking ahead for your subsequent put up, I’ll try to get the dangle of it!

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *


*