jquery simple dropdown
In this tutorial let us see, how to create very simple Jquery drop down menu.
Before Jquery in the web, to make a small dropdown for a website, i had very long time and no. of exercise. Because CSS is not such popular like now, as well we had the responsibility to Internet explorer 6.0 to work properly.
That’s a time. Now CSS3 has come, and all Modern Browsers are starting to support. (Other than ie8!). We believe once the ie9 launched we have CSS3 support for all browsers.
Even though, we can always use the Jquery drop downs. It is all browsers supported, as well we no need to worry about the workaround to fix the issue for each and every browsers. So this is fine.
Even you can use HTML5, doctype, but you need to add the htm5 support javascript for ie to suppor tags like “section”, “nav” ect. Don’t worry it works all better. But presently I use the xhtml.
I assume that, you have the Jquery latest version with you.
Let us make the HTML first:
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Jquery dropdown menu</title> <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script> </head> <body> <div id="container"> <div id="header"> <div id="nav"> <ul id="navigation"> <li> <a href="#">Link-1</a> <ul> <li><a href="#">SubLink-1</a></li> <li><a href="#">SubLink-2</a></li> <li><a href="#">SubLink-3</a></li> <li><a href="#">SubLink-4</a></li> <li><a href="#">SubLink-5</a></li> </ul> </li> <li><a href="#">Link-2</a></li> <li><a href="#">Link-3</a></li> <li><a href="#">Link-4</a></li> <li><a href="#">Link-5</a> <ul> <li><a href="#">SubLink-1</a></li> <li><a href="#">SubLink-2</a></li> <li><a href="#">SubLink-3</a></li> <li><a href="#">SubLink-4</a></li> <li> <a href="#">SubLink-5</a> <ul> <li><a href="#">subSubLink-1</a></li> <li><a href="#">subSubLink-2</a></li> <li><a href="#">subSubLink-3</a></li> <li><a href="#">subSubLink-4</a></li> <li><a href="#">sunSubLink-5</a></li> </ul> </li> </ul> </li> </ul> </div> </div> <div id="main-content"> <!-- main contents goes here --> </div> </div> </body> </html>
Now the html is ready. I made only 2step of the dropdowns, you can make as much as you like. No problem.
Now we can go for some css work to style the drop down. I am not going to decorate the dropdown; you can make the decorations as like you want. I make the css just to display the links properly and some basic display property to view the menu.
Let’s make some basic CSS:
<style rel="stylesheet"> *{ list-style:none; padding:0; margin:0; } nav{ border: 1px solid gray; display:block; font: 12px/1 arial; margin:50px; padding-left:25px; } nav:after{ content:""; display:block; clear:both; height:0; } nav ul > li{ float: left; margin-right: 25px; padding: 10px 0; position:relative; } nav ul > li > ul { position: absolute; background:#DFDFDF; left:0; top:32px; width:70px; } nav ul > li> li{ padding:5px 0; width:100px; } nav ul > li > ul > li > ul { position: absolute; background:#DFDFDF; left:70px; top:0; width: 75px; } nav ul > li > ul > li { width: 75px; } </style>
Now the styles are sets. the last step is coding the Jquery to work this drop down. let me start to make the jquery:
<script type="text/html"> $(function(){ $('nav li ul').hide(); // initiate to hide all the ul inside the li $('nav ul>li').hover(function(){ $('ul:first',this).show(); // shows when mouse over },function(){ $('ul:first',this).hide(); // hides when mouse out! }) $("nav ul > li ul li:has(ul)").find("a:first").append(" » "); // adding the arrow }) </script>
That’s it. Our work is finished. This is very simple and easy to make and implement.
In the final output will be like this:
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Jquery dropdown menu</title> <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script> <script type="text/javascript"> $(function(){ /*hiding by dynamically, if there is no javascript till accessible*/ $('#nav li ul').hide(); $('#nav li').hover(function(){ $('ul:first',this).show(); },function(){ $('ul:first',this).hide(); }) $('#nav li ul li:has(ul)').find('a:first').append(" »"); }) </script> <style type="text/css"> *{ list-style:none; padding:0; margin:0; } #nav{ border: 1px solid gray; display:block; font: 12px/1 arial; margin:50px; padding-left:25px; } /*to make #nav div with border*/ #nav:after{ display:block; content:''; clear:both; } /*ie6 or ie7 wehave to write to 'haslayout', remove if you don't want to think about ie7 or lesser*/ #nav{ zoom:1; } #navigation li{ float:left; position:relative; padding:10px; margin:0; } #navigation li ul li{ display:block; float:none; width:100px; border-bottom:1px solid gray; background:#ddd; } #navigation li ul li:last-child{ border:0; /*not work ie upto 8, add class if you need for*/ } #navigation li ul{ position:absolute; left:0; top:25px; } #navigation li ul ul{ left:100px; top:0px; } #nav li li a{ line-height:1.5; display:block; zoom:1; /*ie6 or ie7 wehave to write to 'haslayout, else you have space bettwen',*/ } </style> </head> <body> <div id="container"> <div id="header"> <div id="nav"> <ul id="navigation"> <li> <a href="#">Link-1</a> <ul> <li><a href="#">SubLink-1</a></li> <li><a href="#">SubLink-2</a></li> <li><a href="#">SubLink-3</a></li> <li><a href="#">SubLink-4</a></li> <li><a href="#">SubLink-5</a></li> </ul> </li> <li><a href="#">Link-2</a></li> <li><a href="#">Link-3</a></li> <li><a href="#">Link-4</a></li> <li><a href="#">Link-5</a> <ul> <li><a href="#">SubLink-1</a></li> <li><a href="#">SubLink-2</a></li> <li><a href="#">SubLink-3</a></li> <li><a href="#">SubLink-4</a></li> <li> <a href="#">SubLink-5</a> <ul> <li><a href="#">subSubLink-1</a></li> <li><a href="#">subSubLink-2</a></li> <li><a href="#">subSubLink-3</a></li> <li><a href="#">subSubLink-4</a></li> <li><a href="#">sunSubLink-5</a></li> </ul> </li> </ul> </li> </ul> </div> </div> <div id="main-content"> <!-- main contents goes here --> </div> </div> </body> </html>