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!
