Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Click action Multi-level CSS3 Dropdown Menu

DZone's Guide to

Click action Multi-level CSS3 Dropdown Menu

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

Nowadays, pure CSS3 menus are still very popular. Usually these are UL-LI based menus. Today we will continue making nice menus for you. This tip will create a multi-level dropdown menu, but today submenus will appear not with the onhover action, but with the onclick action instead.

Here is what the final result will look like:

css3 menu9

Here are samples and downloadable packages:

Live Demo
download in package

Ok, download the example files and lets start coding !


Step 1. HTML

As usual, we start with the HTML.

Here is the full html code with our menu. As you can see - this is multi-level menu. I hope that you can easily understand it. The whole menu is built on UL-LI elements.

index.html

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">

<div class="example">
    <ul id="nav">
        <li><a href="#">Home</a></li>
        <li><a class="fly" href="#">Tutorials</a>
            <ul class="dd">
                <li><a href="#">HTML / CSS</a></li>
                <li><a class="fly" href="#">JS / jQuery</a>
                    <ul>
                        <li><a href="#">jQuery</a></li>
                        <li><a href="#">JS</a></li>
                    </ul>
                </li>
                <li><a href="#">PHP</a></li>
                <li><a href="#">MySQL</a></li>
                <li><a href="#">XSLT</a></li>
                <li><a href="#">Ajax</a></li>
            </ul>
        </li>
        <li><a class="fly" href="#">Resources</a>
            <ul class="dd">
                <li><a class="fly" href="#">By category</a>
                    <ul>
                        <li><a href="#">PHP</a></li>
                        <li><a href="#">MySQL</a></li>
                        <li><a class="fly" href="#">Menu1</a>
                            <ul>
                                <li><a href="#">Menu1</a></li>
                                <li><a href="#">Menu2</a></li>
                                <li><a class="fly" href="#">Menu3</a>
                                    <ul>
                                        <li><a href="#">Menu31</a></li>
                                        <li><a href="#">Menu32</a></li>
                                        <li><a href="#">Menu33</a></li>
                                        <li><a href="#">Menu34</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">Menu4</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Ajax</a></li>
                    </ul>
                </li>
                <li><a class="fly" href="#">By tag name</a>
                    <ul>
                        <li><a href="#">captcha</a></li>
                        <li><a href="#">gallery</a></li>
                        <li><a href="#">animation</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">About</a></li>
    </ul>
</div>

 

Step 2. CSS

Here are the CSS styles I used. First two selectors - a layout of our demo page. All rest belong to the menu.

css/style.css

/* demo page styles */
body {
    background:#eee;
    margin:0;
    padding:0;
}
.example {
    background:#fff url(../images/tech.jpg);
    width:770px;
    height:570px;
    border:1px #000 solid;
    margin:20px auto;
    padding:15px;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}


/* main menu styles */
#nav,#nav ul {
    background-image:url(../images/tr75.png);
    list-style:none;
    margin:0;
    padding:0;
}
#nav {
    height:41px;
    padding-left:5px;
    padding-top:5px;
    position:relative;
    z-index:2;
}
#nav ul {
    left:-9999px;
    position:absolute;
    top:37px;
    width:auto;
}
#nav ul ul {
    left:-9999px;
    position:absolute;
    top:0;
    width:auto;
}
#nav li {
    float:left;
    margin-right:5px;
    position:relative;
}
#nav li a {
    background:#c1c1bf;
    color:#000;
    display:block;
    float:left;
    font-size:16px;
    padding:8px 10px;
    text-decoration:none;
}
#nav > li > a {
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    -o-border-radius:6px;
    border-radius:6px;

    overflow:hidden;
}
#nav li a.fly {
    background:#c1c1bf url(../images/arrow.gif) no-repeat right center;
    padding-right:15px;
}
#nav ul li {
    margin:0;
}
#nav ul li a {
    width:120px;
}
#nav ul li a.fly {
    padding-right:10px;
}

/*hover styles*/
#nav li:hover > a {
    background-color:#858180;
    color:#fff;
}

/*focus styles*/
    #nav li a:focus {
    outline-width:0;
}

/*popups*/
#nav li a:active + ul.dd,#nav li a:focus + ul.dd,#nav li ul.dd:hover {
    left:0;
}
#nav ul.dd li a:active + ul,#nav ul.dd li a:focus + ul,#nav ul.dd li ul:hover {
    left:140px;
}

Step 3. Images

Our menu is using only three images: arrow.gif, tech.jpg and tr75.png. I didn't include them into tutorial because two of them are very small (will be difficult to locate) and the last one is just background image. All images will be in the package.


Conclusion

Hope you enjoyed this tutorial and learned something new.  Good luck!

From Script-tutorials

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}