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):
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 verdana , sans-serif ; |
023 |
overflow : hidden ; |
024 |
position : relative ; |
025 |
} |
026 |
.menuholder .shadow { |
027 |
-moz-box-shadow: 0 0 20px rgba( 0 , 0 , 0 , 1 ); |
028 |
-o-box-shadow: 0 0 20px rgba( 0 , 0 , 0 , 1 ); |
029 |
-webkit-box-shadow: 0 0 20px rgba( 0 , 0 , 0 , 1 ); |
030 |
background : #888 ; |
031 |
box-shadow: 0 0 20px rgba( 0 , 0 , 0 , 1 ); |
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:. 4 s; |
041 |
-o-transition-duration:. 4 s; |
042 |
-webkit-transition-duration:. 4 s; |
043 |
background-color :rgba( 0 , 0 , 0 , 0.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( 0 , 0 , 0 , 0.9 ); |
065 |
-moz-transition: all 0.2 s ease-in-out; |
066 |
-o-border-radius: 0 0 10px 10px ; |
067 |
-o-box-shadow: 2px 2px 4px rgba( 0 , 0 , 0 , 0.9 ); |
068 |
-o-transition: all 0.2 s 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( 0 , 0 , 0 , 0.9 ); |
072 |
-webkit-transition: all 0.2 s ease-in-out; |
073 |
border-radius: 0 0 10px 10px ; |
074 |
box-shadow: 2px 2px 4px rgba( 0 , 0 , 0 , 0.9 ); |
075 |
color : #eee ; |
076 |
display : block ; |
077 |
padding : 0 10px ; |
078 |
text-decoration : none ; |
079 |
transition: all 0.2 s 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:. 2 s; |
108 |
-o-transition-duration:. 2 s; |
109 |
-webkit-transition-duration:. 2 s; |
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 : arial , sans-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.2 s; |
148 |
-o-transition-delay: 0.2 s; |
149 |
-webkit-transition-delay: 0.2 s; |
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:
Live Demo
Conclusion
Hope you enjoyed with new menu tutorial, don’t forget to tell thanks and leave a comment 🙂 Good luck!