Creating a Click-action CSS3 Dropdown Menu with jQuery

nowadays, pure css3 menus are still very popular. mostly – these are ul-li based menus. today we will continue making nice menus for you. this will be a nice dropdown menu (looks like menu at http://www.microsoft.com/) with onclicking (instead onhover).

here are the final results (what we will creating):

here are the samples and a downloadable package:

live demo

download in package

ok, download the example files and lets start coding!

step 1. html + js

as usual, we start with the html.

here is the full html code for our menu. as you can see – this is a multi level menu. i hope that you can easily understand it. the whole menu built on ul-li elements.

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<div class="example">
    <div class="menu">
        <span>
            <ul id="nav">
                <li><a href="#">home</a></li>
                <li><a href="#">tutorials</a>
                    <div class="subs">
                        <div>
                            <ul>
                                <li><h3>submenu #1</h3>
                                    <ul>
                                        <li><a href="#">link 1</a></li>
                                        <li><a href="#">link 2</a></li>
                                        <li><a href="#">link 3</a></li>
                                        <li><a href="#">link 4</a></li>
                                        <li><a href="#">link 5</a></li>
                                    </ul>
                                </li>
                                <li><h3>submenu #2</h3>
                                    <ul>
                                        <li><a href="#">link 6</a></li>
                                        <li><a href="#">link 7</a></li>
                                        <li><a href="#">link 8</a></li>
                                    </ul>
                                </li>
                                <li><h3>submenu #3</h3>
                                    <ul>
                                        <li><a href="#">link 9</a></li>
                                        <li><a href="#">link 10</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li><a href="#">resources</a>
                    <div class="subs">
                        <div class="wrp2">
                            <ul>
                                <li><h3>submenu #4</h3>
                                    <ul>
                                        <li><a href="#">link 1</a></li>
                                        <li><a href="#">link 2</a></li>
                                        <li><a href="#">link 3</a></li>
                                        <li><a href="#">link 4</a></li>
                                        <li><a href="#">link 5</a></li>
                                    </ul>
                                </li>
                                <li><h3>submenu #5</h3>
                                    <ul>
                                        <li><a href="#">link 6</a></li>
                                        <li><a href="#">link 7</a></li>
                                        <li><a href="#">link 8</a></li>
                                        <li><a href="#">link 9</a></li>
                                        <li><a href="#">link 10</a></li>
                                    </ul>
                                </li>
                            </ul>
                            <p class="sep"></p>
                            <ul>
                                <li><h3>submenu #6</h3>
                                    <ul>
                                        <li><a href="#">link 11</a></li>
                                        <li><a href="#">link 12</a></li>
                                        <li><a href="#">link 13</a></li>
                                    </ul>
                                </li>
                                <li><h3>submenu #7</h3>
                                    <ul>
                                        <li><a href="#">link 14</a></li>
                                        <li><a href="#">link 15</a></li>
                                        <li><a href="#">link 16</a></li>

                                    </ul>
                                </li>
                                <li><h3>submenu #8</h3>
                                    <ul>
                                        <li><a href="#">link 17</a></li>
                                        <li><a href="#">link 18</a></li>
                                        <li><a href="#">link 19</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li><a href="http://www.script-tutorials.com/about/">about</a></li>
                <li><a href="http://www.script-tutorials.com/click-action-css3-dropdown-menu-with-jquery/">go back to the tutorial</a></li>
            </ul>
        </span>
    </div>
</div>

<script type="text/javascript">
jquery(window).load(function() {

    $("#nav > li > a").click(function () { // binding onclick
        if ($(this).parent().hasclass('selected')) {
            $("#nav .selected div div").slideup(100); // hiding popups
            $("#nav .selected").removeclass("selected");
        } else {
            $("#nav .selected div div").slideup(100); // hiding popups
            $("#nav .selected").removeclass("selected");

            if ($(this).next(".subs").length) {
                $(this).parent().addclass("selected"); // display popup
                $(this).next(".subs").children().slidedown(200);
            }
        }
    }); 

});
</script>

in the bottom – we can see the extra jquery code. here are the onclick events and a little bit of animation.

step 2. css

here are the css styles. the first two selectors make the layout of our demo page. all the rest belong to the menu.

css/style.css

/* demo page styles */
body {
    background:#eee;
    margin:0;
    padding:0;
    font-family:segoe ui,tahoma,arial,verdana,sans-serif;
}
.example {
    background:#fff url(../images/blue.jpg);
    width:700px;
    height:500px;
    border:1px #000 solid;
    margin:20px auto;
    padding:15px;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}

/* main menu styles */
.menu {
    background-color:#d0e6f5;
    text-align:center;
    width:100%;
}
.menu > span {
    display:inline-block;
    margin:0 auto;
}
#nav {
    display:inline;
    text-align:left;
    position:relative;
    list-style-type:none;
}
#nav > li {
    float:left;
    padding:0;
    position:relative;
}
#nav > li > a {
    border:1px solid transparent;
    color:#4f4f4f;
    display:block;
    font-size:90%;
    padding:3px 10px;
    position:relative;
    text-decoration:none;
}
#nav > li > a:hover {
    background-color:#e4ecf4;
    border-color:#999
}
#nav > li.selected  > a {
    background-color:#ffffff;
    border-color:#999999 #999999 #ffffff;
    z-index:2;
}
#nav li div {
    position:relative;
}
#nav li div div {
    background-color:#ffffff;
    border:1px solid #999999;
    padding:12px 0;
    display:none;
    font-size:0.75em;
    margin:0;
    position:absolute;
    top:-1px;
    z-index:1;
    width:190px;
}
#nav li div div.wrp2 {
    width:380px;
}
#nav .sep {
    left:190px;
    border-left:1px solid #e3e3e3;
    bottom:0;
    height:auto;
    margin:15px 0;
    position:absolute;
    top:0;
    width:1px;
}
#nav li div ul {
    padding-left:10px;
    padding-right:10px;
    position:relative;
    width:170px;
    float:left;
    list-style-type:none;
}
#nav li div ul li {
    margin:0;
    padding:0;
}
#nav li div ul li h3 {
    border-bottom:1px solid #e3e3e3;
    color:#4f4f4f;
    font-weight:bold;
    margin:0 5px 4px;
    font-size:0.95em;
    padding-bottom:3px;
    padding-top:3px;
}
#nav li ul ul {
    padding:0 0 8px;
}
#nav li ul ul li {
    margin:0;
    padding:0;
}
#nav li ul ul li a {
    color:#0060a6;
    display:block;
    margin-bottom:1px;
    padding:3px 5px;
    text-decoration:none;
    font-size:0.9em;
}
#nav li ul ul li a:hover{
    background-color:#0060a6;
    color:#fff;
}

live demo

download in package

conclusion

hope you enjoyed this tutorial, don’t forget to leave a comment good luck!