CSS3 Green Marble Menu tutorial. In our new tutorial we’ll create a new horizontal dropdown CSS3 menu. This menu will be suitable for black and for white websites. It made of green marble colors.
Here are final result (what we will creating):
Here are samples and downloadable package:
Live Demo
[sociallocker]
download in package
[/sociallocker]
OK, download the example files and lets start coding !
Step 1. HTML
As usual, we start with the HTML. Here are full html code of our menu. Today – this is 2 levels menu. Whole menu built on UL-LI elements.
index.html
01 |
<!DOCTYPE html> |
02 |
< html lang = "en" > |
03 |
< head > |
04 |
< meta charset = "utf-8" /> |
05 |
< title >CSS3 Green Marble Menu | Script Tutorials</ title > |
06 |
< link rel = "stylesheet" href = "css/layout.css" type = "text/css" media = "screen" > |
07 |
< link rel = "stylesheet" href = "css/menu.css" type = "text/css" media = "screen" > |
08 |
</ head > |
09 |
< body > |
10 |
< div class = "container" > |
11 |
< div class = "content" > |
12 |
< ul id = "nav" > |
13 |
< li >< a href = "#" >Home</ a ></ li > |
14 |
< li >< a href = "#" class = "current" >HTML/CSS</ a > |
15 |
< ul class = "subs" > |
16 |
< li >< a href = "#" >Link 1</ a ></ li > |
17 |
< li >< a href = "#" >Link 2</ a ></ li > |
18 |
< li >< a href = "#" >Link 3</ a ></ li > |
19 |
< li >< a href = "#" >Link 4</ a ></ li > |
20 |
</ ul > |
21 |
</ li > |
22 |
< li >< a href = "#" >jQuery/JS</ a > |
23 |
< ul class = "subs" > |
24 |
< li >< a href = "#" >Link 1</ a ></ li > |
25 |
< li >< a href = "#" >Link 2</ a ></ li > |
26 |
< li >< a href = "#" >Link 3</ a ></ li > |
27 |
< li >< a href = "#" >Link 4</ a ></ li > |
28 |
</ ul > |
29 |
</ li > |
30 |
< li >< a href = "#" >PHP</ a ></ li > |
31 |
< li >< a href = "#" >MySQL</ a ></ li > |
32 |
< li >< a href = "#" >XSLT</ a ></ li > |
33 |
</ ul > |
34 |
</ div > |
35 |
</ div > |
36 |
< footer > |
37 |
< h2 >CSS3 Green Marble Menu</ h2 > |
38 |
< a href = "https://www.script-tutorials.com/css3-green-marble-menu/" class = "stuts" >Back to original tutorial on < span >Script Tutorials</ span ></ a > |
39 |
</ footer > |
40 |
</ body > |
41 |
</ html > |
Step 2. CSS
Here are the CSS styles of our dropdown menu. Maybe you’ve noticed – that in our html – I have two CSS files: layout.css and menu.css. The first file (layout.css) contain the styles of our test page. We will not publish these styles in this article, but if you wish – you can find these styles in the package.
css/menu.css
01 |
ul#nav { |
02 |
color : #232223 ; |
03 |
display : block ; |
04 |
float : right ; |
05 |
font : 16px / 26px Georgia, "Times New Roman" ,Times, serif ; |
06 |
} |
07 |
ul#nav,ul#nav ul { |
08 |
list-style : none ; |
09 |
} |
10 |
ul#nav .subs { |
11 |
background-color : rgba( 121 , 160 , 160 , 0.8 ); |
12 |
border : 1px solid #887963 ; |
13 |
display : none ; |
14 |
float : left ; |
15 |
left : 0 ; |
16 |
padding : 10px ; |
17 |
position : absolute ; |
18 |
top : 100% ; |
19 |
} |
20 |
ul#nav li:hover>* { |
21 |
display : block ; |
22 |
} |
23 |
ul#nav li:hover { |
24 |
position : relative ; |
25 |
} |
26 |
ul#nav ul .subs { |
27 |
left : 100% ; |
28 |
position : absolute ; |
29 |
top : 0 ; |
30 |
} |
31 |
ul#nav ul { |
32 |
padding : 0 5px 5px ; |
33 |
} |
34 |
ul#nav li { |
35 |
display : inline ; |
36 |
float : left ; |
37 |
} |
38 |
ul#nav a { |
39 |
color : #353435 ; |
40 |
float : left ; |
41 |
font-size : 15px ; |
42 |
letter-spacing : 1px ; |
43 |
line-height : 14px ; |
44 |
min-width : 60px ; |
45 |
padding : 60px 20px ; |
46 |
text-align : center ; |
47 |
text-decoration : none ; |
48 |
text-shadow : 1px 1px 0 #B4C6C6 ; |
49 |
text-transform : uppercase ; |
50 |
} |
51 |
ul#nav > li:hover > a { |
52 |
border-top : 5px solid #887963 ; |
53 |
color : #1e1e1e ; |
54 |
padding-top : 55px ; |
55 |
} |
56 |
ul#nav li a.current, ul#nav li a.current:hover { |
57 |
background : url ( "../images/nav_current.png" ) no-repeat scroll center top transparent ; |
58 |
border : medium none ; |
59 |
color : #fff ; |
60 |
padding-top : 60px ; |
61 |
text-shadow : none ; |
62 |
} |
63 |
ul#nav ul a { |
64 |
color : #000 ; |
65 |
font-size : 12px ; |
66 |
font-weight : bold ; |
67 |
padding : 5px ; |
68 |
text-shadow : #fff 0 0 0 ; |
69 |
border-radius: 0 ; |
70 |
-moz-border-radius: 0 ; |
71 |
-webkit-border-radius: 0 ; |
72 |
} |
73 |
ul#nav ul li:hover>a { |
74 |
letter-spacing : 2px ; |
75 |
} |
Live Demo
Conclusion
Hope you enjoyed with new menu, don’t forget to tell thanks and leave a comment 🙂 Good luck!