HTML5 Zone is brought to you in partnership with:

I was born in 1981 in one little city. Since I was 10y/o I programmed in different languages. My first languages were basic, then C++/MFC, after .Net (C#, VB.Net, J#, ASP.Net), XSL+XML processing). In the last 5 years I worked with web languages (HTML, CSS, PHP, SQL, XML, XSL, JavaScript). After university I worked in several different companies, eventually becoming a blogger. This is my hobby too. Andrey is a DZone MVB and is not an employee of DZone and has posted 109 posts at DZone. You can read more from them at their website. View Full User Profile

Creating a Click-action CSS3 Dropdown Menu with jQuery

09.19.2011
| 4561 views |
  • submit to reddit

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):

css3 menu10

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!

References
Published at DZone with permission of Andrey Prikaznov, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Nabeel Manara replied on Fri, 2012/01/27 - 11:25am

Hi.
Thanks for the tip. It is very nice.
But I would like to know how to make the tabs menu automatically hide when you lose focus on them.

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.