Creating a Click-action CSS3 Dropdown Menu with jQuery

Click-action CSS3 dropdown menu with jQuery

Nowadays, pure CSS3 menus still very popular. Mostly – this is UL-LI based menus. Today we will continue making nice menus for you. This will nice dropdown menu (looks like menu at http://www.microsoft.com/) with onclicking (instead onhover).

Here are final result (what we will creating):

Here are samples and 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 are full html code with our menu. As you can see – this is multilevel menu. I hope that you can easy to understand it. Whole menu built on UL-LI elements.

index.html

<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 (e) { // 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);
            }
        }
        e.stopPropagation();
    }); 

    $("body").click(function () { // binding onclick to body
        $("#nav .selected div div").slideUp(100); // hiding popups
        $("#nav .selected").removeClass("selected");
    }); 

});
</script>

In bottom – we can see extra jQuery code. Here are onclick events and a little of animation.

Step 2. CSS

Here are used CSS styles. First two selectors – layout of our demo page. All rest – belong to 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 with this tutorial, don’t forget to tell thanks and leave a comment Good luck!