Hi friends lets build a new and stylish Drop Menu using Jquery. You just need some html code and few lines of your Jquery. Its very simple and easy to build. We are performing Show function and hide function in jquery and some other functions to enhance the quality of our button like using mouseup and mouseover functions.
Most important code line of the whole script is : $(".account").click(function()
You can Download the whole code.
Hope you'll like this post. Thanks for visiting.
Most important code line of the whole script is : $(".account").click(function()
You can Download the whole code.
Scripting Code :
<script type="text/javascript"> $(document).ready(function() { $(".account").click(function() { var X=$(this).attr('id'); if(X==1) { $(".submenu").hide(); $(this).attr('id', '0'); } else { $(".submenu").show(); $(this).attr('id', '1'); } }); //Mouseup textarea false $(".submenu").mouseup(function() { return false }); $(".account").mouseup(function() { return false }); //Textarea without editing. $(document).mouseup(function() { $(".submenu").hide(); $(".account").attr('id', ''); }); }); </script>
Menu Image :
HTML Code :
<body> <div style='margin:50px'> <div class="dropdown"> <a class="account" > <span>My Account</span> </a> <div class="submenu" style="display: none; "> <ul class="root"> <li > <a href="#Dashboard" >Dashboard</a> </li> <li > <a href="#Profile" >Profile</a> </li> <li > <a href="#settings">Settings</a> </li> <li> <a href="#feedback">Send Feedback</a> </li> <li> <a href="#signout">Sign Out</a> </li> </ul> </div> </div> </div> </body>
Hope you'll like this post. Thanks for visiting.
Comments
Post a Comment
your Comment is sent for moderation, Thankyou