In this session we will study how to implement drop down menu with the help of jQuery.Here we will create some tabs where each tab will have an drop down list of items .
- To learn how to implement drop down menu using jQuery follow the steps given below :
- First create a new folder say jQuery1 in this folder create an new html file say index.html and also create an image folder that will contain your images that you will use to design the web page.
- Thus in your jQuery folder you will have following content :
- Open the index.html file in the Notepad++ or any other text editor and write the given code :
- Here are the screenshots for the code :
- The explanation of the code is as follows :
- In the head section we have added an hosted jQuery library , you can also download the jQuery from the jQuery.com and create an folder say js and inside that create an file called jquery.js and paste the downloaded code in that file and specify its path .
- Or simply you can use a hosted library such as Google and simply include the link .
- The slideToggle(400); is an jQuery effect .This will work like a slide when the mouseover i.e hover() event will occur.
- You can also use the fadeToggle(300);.In the parenthesis you can pass the millisecond for the event to execute , this will work like a fade effect.
- Then we have added css in our page .
- Now save the file.
- Now run your index.html file and you will have the following output consisting the drop down menus .
- Thus we have learnt how to implement drop down menu using jQuery.
<html> <head> <title> Welcome</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> $(document).ready(function(){ $('li').hover(function(){ $(this).find('ul > li').stop().slideToggle(400); //This is the slide//You can also use the fadeToggle propertites }); }); </script> <style type="text/css"> ul{ margin:0; padding:0; list-style: none; } ul li{ float: left; width: 220px; height: 30px; line-height: 30px; text-align: center; background: lightblue; //red } ul li a{ text-decoration: none; color:#fff; //white } ul li li{ display:none; background: black; color: #fff; } ul li li a{ text-decoration: none; color:#fff; } ul li li:hover{ background: lightpink; } </style> </head> <body background="v1.jpg"> <div> <ul id="sortable"> <li><a href="#">Home</a> <ul> <li><a href="#">Our Courses</a></li> <li><a href="#">Team</a></li> </ul> </li> <li><a href="#">About Us</a></li> <li><a href="#">Services</a> <ul> <li><a href="#">Workshop</a></li> <li><a href="#">Support</a></li> <li><a href="#">Techical Review</a></li> <li><a href="#">Research Team</a></li> </ul> </li> <li><a href="#">Quiz</a> <ul> <li><a href="#">Anroid</a></li> <li><a href="#">Java</a></li> <li><a href="#">iPhone</a></li> <li><a href="#">SAP</a></li> </ul> </li> </ul> </div> <br > <br /> </body> </html>