HTML 5 TutorialsHow to implement drop down menu using jQuery

How to implement drop down menu using jQuery

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 :

  1. 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.
  2. Thus in your jQuery folder you will have following content :
  3. drop down using jQuery

  4. Open the index.html file in the Notepad++ or any other text editor and write the given code :
  5. <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>
    

  6. Here are the screenshots for the code :
  7. implement drop down in jQuery
    drop down menu in jquery
    how to implement drop down
    drop down in jQuery

  8. The explanation of the code is as follows :
  9. 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 .
  10. Or simply you can use a hosted library such as Google and simply include the link .
  11. The slideToggle(400); is an jQuery effect .This will work like a slide when the mouseover i.e hover() event will occur.
  12. 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.
  13. Then we have added css in our page .
  14. Now save the file.
  15. Now run your index.html file and you will have the following output consisting the drop down menus .
  16. drop down menu
    jQuery drop down menu
    how to implement drop down menu
    implementing drop down menu in jQuery

  17. Thus we have learnt how to implement drop down menu using jQuery.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Exclusive content

- Advertisement -

Latest article

21,501FansLike
4,106FollowersFollow
106,000SubscribersSubscribe

More article

- Advertisement -