web design, web development, and web promotion services: Simple Drop down Menu using jQuery

Simple Drop down Menu using jQuery

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>

Author : Naresh Pal

Website : http://nareshonline.com/

web design, web development, and web promotion services

Sunday, 6 August 2017

Simple Drop down Menu using jQuery

Simple Drop down Menu using jQuery

Step 1 :

Step 2 :

Step 3 :

No comments:

Post a Comment

Upload file using PHP

Report Abuse