Saturday, March 10, 2018

Simple Drop Down Menu with Jquery and CSS

Today, we are going to discuss how to create jQuery dropdown menu design. Here we have designed simple drop down menu with CSS, HTML and jQuery. We have tried our best to make this example as simple as possible.
So, when user perform click event on "My Setting" div box, Then it will list out the drop down menu just below it. we are handling on click event with the help of jquery.

drop down menu jquery,drop down navigation menu html,jquery dropdown menu onclick,drop down menu html,jquery drop down menu,drop down menu in html on mouseover,jquery responsive multi level dropdown menu


Simple jquery dropdown menu:

Lets see the below example, which would help you to build more understanding on it.

dropdown-menu.html
HTML layout design for the drop menu and also consists of jquery and css file.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src="script.js"></script> 
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body> 
      <div  class="dropdown" style="background:red;margin-left:400px;"> 
   <div class="button"> My Setting </div>            
      <ul>
     <li><a class="active" href="#Create Page">Create Page</a></li>
     <li><a href="#Manage Pages">Manage Pages</a></li>
     <li><a href="#Create Ads">Create Ads</a></li>
     <li><a href="#Manage Ads">Manage Ads</a></li>
     <li><a href="#Activity Logs">Activity Logs</a></li>
     <li><a href="#Setting">Setting</a></li>
     <li><a href="#Log Out">Log Out</a></li>
      </ul> 
   </div> 
 
</body> 
</html> 

style.css
Style-sheet design for drop down menu
.dropdown {
     position: relative;
     display: inline-block;
}
 ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
     top:45px;
     right:0px;
     width: 200px;
     background-color: white;
     font-weight:bold;
     position: absolute;
     display: none;
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
     z-index: 1;
}
 li a {
     color: #000;
     text-decoration: none;
}
 li {
     padding: 8px 16px;
     border-bottom: 1px solid #e5e5e5;
}
 li:last-child {
     border-bottom: none;
}
 li:hover {
     background-color: #e5e5e5;
     color: white;
}
 .button{
     width:178px;
     height:20px;
     background-color:#ff3232 ;
     padding:12px;
     border-radius:5px;
     font-weight:bold;
     color:white;
}
 .button:before{
     content:"";
     position:absolute;
     width:0px;
     height:0px;
     border: 10px solid;
     border-color: white transparent transparent transparent;
     right:6px;
     top:18px;
}

script.js
This consists of jquery script, which helps to show or hide drop down menu layout design on click event.
$(document).ready(function() {
    // on click on  setting button
    $(".button").click(function() {
        var val = $(this).attr('id');
        if (val == 1) {
            $("ul").hide();
            $(this).attr('id', '0');
        } else {
            $("ul").show();
            $(this).attr('id', '1');
        }

    });

    //Mouse click on setting button and ul list
    $("ul, .button").mouseup(function() {
        return false;
    });

    //Document Click
    $(document).mouseup(function() {
        $("ul").hide();
        $(".button").attr('id', '0');
    });
});

Download Link : 
https://github.com/skptricks/php-Tutorials/tree/master/Simple%20Drop%20Down%20Menu%20with%20Jquery%20and%20CSS

Demo Link :
https://skptricks.github.io/learncoding/Simple%20jquery%20drop%20down%20menu%20design/dropdown-menu.html



This is all about simple jquery drop down menu design. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.


No comments:

Post a Comment