February 1, 2024 5:02 am

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.

How to create DropDown Menu with jQuery and CSS

[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 &#9658;</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.

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.


Tutorial Categories:

Leave a Reply

Your email address will not be published. Required fields are marked *