Click action Multi-level CSS3 Dropdown Menu

Date: 02nd Sep 2011 Author: admin 10 Comments
Posted in: HTML/CSS |Tags: , , , , ,

click action multilevel css3 dropdown menu

Click action Multi-level CSS3 Dropdown Menu

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 multilevel dropdown menu, but today submenus will appear not onhover, but onclick action.


Here are final result (what we will creating):

css3 menu9

Here are samples and downloadable package:

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 are full html code with our menu. As you can see – this is multi-level 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">

<div class="example">
    <ul id="nav">
        <li><a href="http://script-tutorials.com/">Home</a></li>
        <li><a class="fly" href="#" tabindex="1">Tutorials</a>
            <ul class="dd">
                <li><a href="http://script-tutorials.com/category/html-css/">HTML / CSS</a></li>
                <li><a class="fly" href="#" tabindex="1">JS / jQuery</a>
                    <ul>
                        <li><a href="http://script-tutorials.com/category/jquery/">jQuery</a></li>
                        <li><a href="http://script-tutorials.com/category/javascript/">JS</a></li>
                    </ul>
                </li>
                <li><a href="http://script-tutorials.com/category/php/">PHP</a></li>
                <li><a href="http://script-tutorials.com/category/mysql/">MySQL</a></li>
                <li><a href="http://script-tutorials.com/category/xslt/">XSLT</a></li>
                <li><a href="http://script-tutorials.com/category/ajax/">Ajax</a></li>
            </ul>
        </li>
        <li><a class="fly" href="#" tabindex="1">Resources</a>
            <ul class="dd">
                <li><a class="fly" href="#" tabindex="1">By category</a>
                    <ul>
                        <li><a href="http://script-tutorials.com/category/php/">PHP</a></li>
                        <li><a href="http://script-tutorials.com/category/mysql/">MySQL</a></li>
                        <li><a class="fly" href="#" tabindex="1">Menu1</a>
                            <ul>
                                <li><a href="#">Menu1</a></li>
                                <li><a href="#">Menu2</a></li>
                                <li><a class="fly" href="#" tabindex="1">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="http://script-tutorials.com/category/ajax/">Ajax</a></li>
                    </ul>
                </li>
                <li><a class="fly" href="#" tabindex="1">By tag name</a>
                    <ul>
                        <li><a href="http://script-tutorials.com/tag/captcha/">captcha</a></li>
                        <li><a href="http://script-tutorials.com/tag/gallery/">gallery</a></li>
                        <li><a href="http://script-tutorials.com/tag/animation/">animation</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="http://script-tutorials.com/about/">About</a></li>
        <li><a href="http://script-tutorials.com/click-action-multilevel-css3-dropdown-menu/">Go Back To The Tutorial</a></li>
    </ul>
</div>

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;
}
.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 using only three images: arrow.gif, tech.jpg and tr75.png. I don`t included them into tutorial, just because two of them very small (will difficult to locate it) and last one – just background image. All images will in package.


Live Demo
download in package

Conclusion

Hope you enjoyed with this tutorial, don’t forget to tell thanks and leave a comment :) Good luck!

Initial design idea has been taken from here. Thank Stu Nicholls for his good website.

Enjoyed this Post?

    Tweet
   
   

Stay connected with us:

If you enjoyed this article, feel free to share our tutorial with your friends.

10 Comments

    • Julien's Gravatar
    • Hi,

      Thanks for this great tutorial, but on my computer, it only works on firefox and opera.

      It doesn’t work on chrome (v.14.0.835.187 m for windows) / IE 8 / safari 4.0.5 but :(

      So that’s damage for these reason.

      Many Thanks

    • Ralph's Gravatar
    • This menu does indeed not work in Safari, Chrome and IE8. I’m not sure which IE8 you test, but IE9 in IE8 mode is not reliable for testing. I’m not sure why Microsoft even put that function in IE9, because IE8 mode and IE8 alone is not the same. I happen to see more differences in rendering between them. The best way to test pages in different IE’s is a Virtual Machine. IE-tester is also not accurate.

      And why not install Safari and Chrome on your PC to test? The menu looks and behave nice, but if it doesn’t work in all the major browsers and IE8/IE7, then it’s quite useless.

    • piotr's Gravatar
    • Carla's Gravatar
    • What happens when you have multiple submenus which come up against the right side of the browser window? I didn’t notice anything which detects that so the submenus would automatically fly to the left. That would take jQuery or JS, correct?

    • Beben Koben's Gravatar
    • Aswath's Gravatar
    • The menu does not work on the android phones. Any click dropdown/fly menus for android phones/tabs

Leave a Reply

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

*

CAPTCHA Image
Refresh Image

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>