Click action Multi-level 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):
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
01 <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
02
03 <div class="example">
04 <ul id="nav">
05 <li><a href="http://www.script-tutorials.com/">Home</a></li>
06 <li><a class="fly" href="#" tabindex="1">Tutorials</a>
07 <ul class="dd">
08
<li><a href="http://www.script-tutorials.com/category/html-css/">HTML /
CSS</a></li>
09 <li><a class="fly" href="#" tabindex="1">JS / jQuery</a>
10 <ul>
11
<li><a href="http://www.script-
tutorials.com/category/jquery/">jQuery</a></li>
12
<li><a href="http://www.script-
tutorials.com/category/javascript/">JS</a></li>
13 </ul>
14 </li>
15 <li><a href="http://www.script-tutorials.com/category/php/">PHP</a></li>
16 <li><a href="http://www.script-tutorials.com/category/mysql/">MySQL</a></li>
17 <li><a href="http://www.script-tutorials.com/category/xslt/">XSLT</a></li>
18 <li><a href="http://www.script-tutorials.com/category/ajax/">Ajax</a></li>
19 </ul>
20 </li>
21 <li><a class="fly" href="#" tabindex="1">Resources</a>
22 <ul class="dd">
23 <li><a class="fly" href="#" tabindex="1">By category</a>
24 <ul>
25
<li><a href="http://www.script-
tutorials.com/category/php/">PHP</a></li>
26
<li><a href="http://www.script-
tutorials.com/category/mysql/">MySQL</a></li>
27 <li><a class="fly" href="#" tabindex="1">Menu1</a>
28 <ul>
29 <li><a href="#">Menu1</a></li>
30 <li><a href="#">Menu2</a></li>
31 <li><a class="fly" href="#" tabindex="1">Menu3</a>
32 <ul>
33 <li><a href="#">Menu31</a></li>
34 <li><a href="#">Menu32</a></li>
35 <li><a href="#">Menu33</a></li>
36 <li><a href="#">Menu34</a></li>
37 </ul>
38 </li>
39 <li><a href="#">Menu4</a></li>
40 </ul>
41 </li>
42
<li><a href="http://www.script-
tutorials.com/category/ajax/">Ajax</a></li>
43 </ul>
44 </li>
45 <li><a class="fly" href="#" tabindex="1">By tag name</a>
46 <ul>
47
<li><a href="http://www.script-
tutorials.com/tag/captcha/">captcha</a></li>
48
<li><a href="http://www.script-
tutorials.com/tag/gallery/">gallery</a></li>
49
<li><a href="http://www.script-
tutorials.com/tag/animation/">animation</a></li>
50 </ul>
51 </li>
52 </ul>
53 </li>
54 <li><a href="http://www.script-tutorials.com/about/">About</a></li>
55
<li><a href="http://www.script-tutorials.com/click-action-multilevel-css3-dropdown-
menu/">Go Back To The Tutorial</a></li>
56 </ul>
57 </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
01 /* demo page styles */
02 body {
03 background:#eee;
04 margin:0;
05 padding:0;
06 }
07 .example {
08 background:#fff url(../images/tech.jpg);
09 width:770px;
10 height:570px;
11 border:1px #000 solid;
12 margin:20px auto;
13 padding:15px;
14 border-radius:3px;
15 -moz-border-radius:3px;
16 -webkit-border-radius:3px;
17 }
18
19
20 /* main menu styles */
21 #nav,#nav ul {
22 background-image:url(../images/tr75.png);
23 list-style:none;
24 margin:0;
25 padding:0;
26 }
27 #nav {
28 height:41px;
29 padding-left:5px;
30 padding-top:5px;
31 position:relative;
32 z-index:2;
33 }
34 #nav ul {
35 left:-9999px;
36 position:absolute;
37 top:37px;
38 width:auto;
39 }
40 #nav ul ul {
41 left:-9999px;
42 position:absolute;
43 top:0;
44 width:auto;
45 }
46 #nav li {
47 float:left;
48 margin-right:5px;
49 position:relative;
50 }
51 #nav li a {
52 background:#c1c1bf;
53 color:#000;
54 display:block;
55 float:left;
56 font-size:16px;
57 padding:8px 10px;
58 text-decoration:none;
59 }
60 #nav > li > a {
61 -moz-border-radius:6px;
62 -webkit-border-radius:6px;
63 -o-border-radius:6px;
64 border-radius:6px;
65
66 overflow:hidden;
67 }
68 #nav li a.fly {
69 background:#c1c1bf url(../images/arrow.gif) no-repeat right center;
70 padding-right:15px;
71 }
72 #nav ul li {
73 margin:0;
74 }
75 #nav ul li a {
76 width:120px;
77 }
78 #nav ul li a.fly {
79 padding-right:10px;
80 }
81
82 /*hover styles*/
83 #nav li:hover > a {
84 background-color:#858180;
85 color:#fff;
86 }
87
88 /*focus styles*/
89 #nav li a:focus {
90 outline-width:0;
91 }
92
93 /*popups*/
94 #nav li a:active + ul.dd,#nav li a:focus + ul.dd,#nav li ul.dd:hover {
95 left:0;
96 }
97 #nav ul.dd li a:active + ul,#nav ul.dd li a:focus + ul,#nav ul.dd li ul:hover {
98 left:140px;
99 }
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, dont 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.
- See more at: http://www.script-tutorials.com/click-action-multilevel-css3-dropdown-
menu/#sthash.BtigLA8s.dpuf
