Creating CSS3 Dropdown Menu #3

This is our third CSS3 menu. This will colored tabs with slideout submenus. I don`t used any defined palette – tabs in different colors. Can warn, that all sliding effects will work only in FF, Chrome, Safary browsers, possible in Opera too. But not in IE (transitions still not available here). Anyway – welcome to test new menu.

 


Here are final result (what we will creating):

css3 menu3

Here are samples and downloadable package:

Live Demo

[sociallocker]

download in package

[/sociallocker]


Ok, download our example files (package) and lets start making this menu!


Step 1. HTML

As usual, we start with the HTML. Here are html with our menu.

index.html

01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
02 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
03 <head>
04     <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
05     <title>CSS3 drop down menu #3</title>
06 </head>
07 <body>
08 <div class="example">
09     <div class="menuholder">
10         <ul class="menu slide">
11             <li><a href="https://www.script-tutorials.com/" class="red">Home</a></li>
12             <li><a href="https://www.script-tutorials.com/" class="orange">Tutorials</a>
13                 <div class="subs">
14                     <dl>
15                         <dt>Links #1</dt>
16                         <dd><a href="https://www.script-tutorials.com/category/html-css/">HTML / CSS</a></dd>
17                         <dd><a href="https://www.script-tutorials.com/category/jquery/">JS / jQuery</a></dd>
18                         <dd><a href="https://www.script-tutorials.com/category/php/">PHP</a></dd>
19                     </dl>
20                     <dl>
21                         <dt>Links #2</dt>
22                         <dd><a href="https://www.script-tutorials.com/category/mysql/">MySQL</a></dd>
23                         <dd><a href="https://www.script-tutorials.com/category/xslt/">XSLT</a></dd>
24                         <dd><a href="https://www.script-tutorials.com/category/ajax/">Ajax</a></dd>
25                     </dl>
26                     <dl>
27                         <dt>Links #3</dt>
28                         <dd><a href="https://www.script-tutorials.com/category/html-css/">HTML / CSS</a></dd>
29                         <dd><a href="https://www.script-tutorials.com/category/jquery/">JS / jQuery</a></dd>
30                         <dd><a href="https://www.script-tutorials.com/category/php/">PHP</a></dd>
31                     </dl>
32                     <dl>
33                         <dt>Links #4</dt>
34                         <dd><a href="https://www.script-tutorials.com/category/mysql/">MySQL</a></dd>
35                         <dd><a href="https://www.script-tutorials.com/category/xslt/">XSLT</a></dd>
36                         <dd><a href="https://www.script-tutorials.com/category/ajax/">Ajax</a></dd>
37                     </dl>
38                 </div>
39             </li>
40             <li><a href="https://www.script-tutorials.com/category/resources/" class="yellow">Resources</a>
41                 <div class="subs">
42                     <dl>
43                         <dt>Links #5</dt>
44                         <dd><a href="https://www.script-tutorials.com/category/php/">PHP</a></dd>
45                         <dd><a href="https://www.script-tutorials.com/category/mysql/">MySQL</a></dd>
46                     </dl>
47                     <dl>
48                         <dt>Links #6</dt>
49                         <dd><a href="https://www.script-tutorials.com/category/xslt/">XSLT</a></dd>
50                         <dd><a href="https://www.script-tutorials.com/category/ajax/">Ajax</a></dd>
51                     </dl>
52                     <dl>
53                         <dt>Links #7</dt>
54                         <dd><a href="https://www.script-tutorials.com/category/html-css/">HTML / CSS</a></dd>
55                         <dd><a href="https://www.script-tutorials.com/category/jquery/">JS / jQuery</a></dd>
56                     </dl>
57                     <dl>
58                         <dt>Links #8</dt>
59                         <dd><a href="https://www.script-tutorials.com/category/mysql/">MySQL</a></dd>
60                         <dd><a href="https://www.script-tutorials.com/category/ajax/">Ajax</a></dd>
61                     </dl>
62                 </div>
63             </li>
64             <li><a href="https://www.script-tutorials.com/category/resources/" class="green">Other</a></li>
65             <li><a href="https://www.script-tutorials.com/about/" class="blue">About</a></li>
66             <li><a href="https://www.script-tutorials.com/creating-css3-dropdown-menu-3/" class="violet">Back</a></li>
67         </ul>
68         <div class="back"></div>
69         <div class="shadow"></div>
70     </div>
71     <div style="clear:both"></div>
72 </div>
73 </body>
74 </html>

Step 2. CSS

Here are used CSS styles. First two selectors (you can skip it) belong to our demo page. All rest – menu styles.

css/style.css

001 /* demo page styles */
002 body {
003     background:#eee;
004     margin:0;
005     padding:0;
006 }
007 .example {
008     position:relative;
009     background:#fff url(../images/background.jpg);
010     width:670px;
011     height:470px;
012     border:1px #000 solid;
013     margin:20px auto;
014     padding:15px;
015     border-radius:3px;
016     -moz-border-radius:3px;
017     -webkit-border-radius:3px;
018 }
019 /* main menu styles */
020 .menuholder {
021     float:left;
022     font:normal bold 11px/35px verdanasans-serif;
023     overflow:hidden;
024     position:relative;
025 }
026 .menuholder .shadow {
027     -moz-box-shadow:0 0 20px rgba(0001);
028     -o-box-shadow:0 0 20px rgba(0001);
029     -webkit-box-shadow:0 0 20px rgba(0001);
030     background:#888;
031     box-shadow:0 0 20px rgba(0001);
032     height:10px;
033     left:5%;
034     position:absolute;
035     top:-9px;
036     width:90%;
037     z-index:100;
038 }
039 .menuholder .back {
040     -moz-transition-duration:.4s;
041     -o-transition-duration:.4s;
042     -webkit-transition-duration:.4s;
043     background-color:rgba(0000.5);
044     height:0;
045     width:100%;
046 }
047 .menuholder:hover div.back {
048     height:250px;
049 }
050 ul.menu {
051     display:block;
052     float:left;
053     list-style:none;
054     margin:0;
055     padding:0 125px;
056     position:relative;
057 }
058 ul.menu li {
059     float:left;
060     margin:0 5px 0 0;
061 }
062 ul.menu li > a {
063     -moz-border-radius:0 0 10px 10px;
064     -moz-box-shadow:2px 2px 4px rgba(0000.9);
065     -moz-transition:all 0.2s ease-in-out;
066     -o-border-radius:0 0 10px 10px;
067     -o-box-shadow:2px 2px 4px rgba(0000.9);
068     -o-transition:all 0.2s ease-in-out;
069     -webkit-border-bottom-left-radius:10px;
070     -webkit-border-bottom-right-radius:10px;
071     -webkit-box-shadow:2px 2px 4px rgba(0000.9);
072     -webkit-transition:all 0.2s ease-in-out;
073     border-radius:0 0 10px 10px;
074     box-shadow:2px 2px 4px rgba(0000.9);
075     color:#eee;
076     display:block;
077     padding:0 10px;
078     text-decoration:none;
079     transition:all 0.2s ease-in-out;
080 }
081 ul.menu li a.red {
082     background:#a00;
083 }
084 ul.menu li a.orange {
085     background:#da0;
086 }
087 ul.menu li a.yellow {
088     background:#aa0;
089 }
090 ul.menu li a.green {
091     background:#060;
092 }
093 ul.menu li a.blue {
094     background:#00a;
095 }
096 ul.menu li a.violet {
097     background:#682bc2;
098 }
099 .menu li div.subs {
100     left:0;
101     overflow:hidden;
102     position:absolute;
103     top:35px;
104     width:0;
105 }
106 .menu li div.subs dl {
107     -moz-transition-duration:.2s;
108     -o-transition-duration:.2s;
109     -webkit-transition-duration:.2s;
110     float:left;
111     margin:0 130px 0 0;
112     overflow:hidden;
113     padding:40px 0 5% 2%;
114     width:0;
115 }
116 .menu dt {
117     color:#fc0;
118     font-family:arialsans-serif;
119     font-size:12px;
120     font-weight:700;
121     height:20px;
122     line-height:20px;
123     margin:0;
124     padding:0 0 0 10px;
125     white-space:nowrap;
126 }
127 .menu dd {
128     margin:0;
129     padding:0;
130     text-align:left;
131 }
132 .menu dd a {
133     background:transparent;
134     color:#fff;
135     font-size:12px;
136     height:20px;
137     line-height:20px;
138     padding:0 0 0 10px;
139     text-align:left;
140     white-space:nowrap;
141     width:80px;
142 }
143 .menu dd a:hover {
144     color:#fc0;
145 }
146 .menu li:hover div.subs dl {
147     -moz-transition-delay:0.2s;
148     -o-transition-delay:0.2s;
149     -webkit-transition-delay:0.2s;
150     margin-right:2%;
151     width:21%;
152 }
153 ul.menu li:hover > a,ul.menu li > a:hover {
154     background:#aaa;
155     color:#fff;
156     padding:10px 10px 0;
157 }
158 ul.menu li a.red:hover,ul.menu li:hover a.red {
159     background:#c00;
160 }
161 ul.menu li a.orange:hover,ul.menu li:hover a.orange {
162     background:#fc0;
163 }
164 ul.menu li a.yellow:hover,ul.menu li:hover a.yellow {
165     background:#cc0;
166 }
167 ul.menu li a.green:hover,ul.menu li:hover a.green {
168     background:#080;
169 }
170 ul.menu li a.blue:hover,ul.menu li:hover a.blue {
171     background:#00c;
172 }
173 ul.menu li a.violet:hover,ul.menu li:hover a.violet {
174 background:#8a2be2;
175 }
176 .menu li:hover div.subs,.menu li a:hover div.subs {
177     width:100%;
178 }

Step 3. Images

Here are just background for page:

    page background

Live Demo

Conclusion

Hope you enjoyed with new menu tutorial, don’t forget to tell thanks and leave a comment 🙂 Good luck!