How to create Drop Down Menu with jQuery and CSS
In this simple tutorial I will show you how to create a drop down menu with jQuery and CSS and its a very easy to configure you must try this on your web sites. This menu show items onClick event with jQuery and CSS its a very basic jQuery and CSS hope you like it. This article is very helpful for web designers to create nice website designs.
[wpdm_file id=42]DEMO
I have used dropit jQuery plugin to perform this task.
Usage
Javascript libraries
<script type="text/javascript" src="jquery-1.8.0.min.js"></script> <script type="text/javascript" src="dropit.js"></script> <script> $(document).ready(function() { $(\'.menu\').dropit(); }); </script>
Html list which shows on click event
<ul class="menu"> <li> <a href="#" class="btn">Class ►</a> <ul> <li><a href="#">Class 1</a></li> <li><a href="#">Class 2</a></li> <li><a href="#">Class 3</a></li> <li><a href="#">Class 4</a></li> </ul> </li> </ul>
CSS required to manage its layout and hide list on document ready.
<style> .menu ul { display: none; } /* Hide before plugin loads */ li { list-style: none; } a { text-decoration: none; } .menu ul.dropit-submenu { background-color: #fff; border: 1px solid #b2b2b2; padding: 6px 0; margin: 3px 0 0 1px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.15); -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.15); box-shadow: 0px 1px 3px rgba(0,0,0,0.15); } .menu ul.dropit-submenu a { display: block; font-size: 14px; line-height: 25px; color: #7a868e; padding: 0 18px; } .menu ul.dropit-submenu a:hover { background: #248fc1; color: #fff; text-decoration: none; } </style>
Download source code and use it in your websites and feel free to comment it if you have any question.
Tutorial Categories: