Contact me See Resume

Simple Drop down Menu using jQuery - nareshonline.com

Simple Drop down Menu using jQuery

Catagory : jQuery Posted : July, 01, 2018

Hello friends, this tutorial will help you to make the simple drop down menu using jQuery very easily. So you do not need to more plugins for this simple task.

Step 1 :

Here is our HTML markup

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Simple Dropdown using jQuery</title>
</head>
<body>
<div class="container">
  <ul class="menu">
    <li><a href="#">Home</a>
      <ul>
        <li><a href="#">Link One</a></li>
        <li><a href="#">Link Two</a></li>
        <li><a href="#">Link Three</a></li>
        <li><a href="#">Link Four</a></li>
      </ul>
    </li>
    <li><a href="#">About us</a></li>
    <li><a href="#">Contact us</a>
      <ul>
        <li><a href="#">Link Another One</a></li>
        <li><a href="#">Link Another Two</a></li>
        <li><a href="#">Link Another Three</a></li>
        <li><a href="#">Link Another Four</a></li>
      </ul>
    </li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Our Clients</a></li>
  </ul>
</div>


<footer>
  &copy; NareshOnLine.com | Naresh Pal
</footer>
</div>

</body>
</html>

Step 2 :

Here is our css styling

<style type="text/css">
*{
  margin: 0;
  padding:0;
  font-family: arial;
}
.container{
  width:100%;
  height: 50px;

}
.container ul{
  list-style-type:none;
  text-transform: uppercase;
}
.container ul li{
  background: #236090;
  float: left;
  width: 20%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  position: relative;
}
.container ul li:hover{
  background: #023972;
}
.container ul li>a{
  display: block;
  text-decoration: none;
  color: #fff;
}
.container ul li ul{
  position: absolute;
  width: 100%;
}
.container ul li li{
  width: 100% !important;
  display: none;
}

footer{
  clear: both;
  margin-top:20px;
  padding: 20px;
  color: #888;
  border-top: 2px solid #ccc;
  text-align: center;
}
</style>

Step 3 :

Lets add some jQuery to make this task so easy.

First add jQeury liberary using CDN Link

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Now add your custom script

<script type="text/javascript">
$(function(){
  // function on hover on main li
  $('li').hover(function(){
    // enabaling function to find child li to show
    $(this).find('ul>li').stop().show(200);
  }, function(){
    //enabling call back function to hide the child li
    $(this).find('ul>li').hide();
  });
});
</script>

 

Leave a Reply

You have to agree to the comment policy.

  1. varun saini says:

    Thanks naresh bhaiya.. for dropdown. mare aane wali next site me apka hi dropdown lage ga..

    1. Naresh Pal says:

      Thanks a lot for appreciation