Creating a Marble Style CSS3 Navigation Menu

Creating a Marble Style CSS3 Navigation Menu

4 1420
CSS3 Green Marble Menu

CSS3 Green Marble Menu

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):

Green Marble Dropdown Menu

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 of our menu. Today – this is 2 levels menu. Whole menu built on UL-LI elements.

index.html

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>CSS3 Green Marble Menu | Script Tutorials</title>

        <link rel="stylesheet" href="css/layout.css" type="text/css" media="screen">
        <link rel="stylesheet" href="css/menu.css" type="text/css" media="screen">
    </head>
    <body>
        <div class="container">
            <div class="content">

                <ul id="nav">
                    <li><a href="#">Home</a></li>
                    <li><a href="#" class="current">HTML/CSS</a>
                        <ul class="subs">
                            <li><a href="#">Link 1</a></li>
                            <li><a href="#">Link 2</a></li>
                            <li><a href="#">Link 3</a></li>
                            <li><a href="#">Link 4</a></li>
                        </ul>
                    </li>
                    <li><a href="#">jQuery/JS</a>
                        <ul class="subs">
                            <li><a href="#">Link 1</a></li>
                            <li><a href="#">Link 2</a></li>
                            <li><a href="#">Link 3</a></li>
                            <li><a href="#">Link 4</a></li>
                        </ul>
                    </li>
                    <li><a href="#">PHP</a></li>
                    <li><a href="#">MySQL</a></li>
                    <li><a href="#">XSLT</a></li>
                </ul>

            </div>
        </div>

        <footer>
            <h2>CSS3 Green Marble Menu</h2>
            <a href="http://www.script-tutorials.com/css3-green-marble-menu/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </footer>
    </body>
</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

ul#nav {
    color: #232223;
    display:block;
    float:right;
    font: 16px/26px Georgia,"Times New Roman",Times,serif;
}
ul#nav,ul#nav ul {
    list-style:none;
}
ul#nav .subs {
    background-color: rgba(121,160,160,0.8);
    border:1px solid #887963;
    display:none;
    float:left;
    left:0;
    padding:10px;
    position:absolute;
    top:100%;
}
ul#nav li:hover>* {
    display:block;
}
ul#nav li:hover {
    position:relative;
}
ul#nav ul .subs {
    left:100%;
    position:absolute;
    top:0;
}
ul#nav ul {
    padding:0 5px 5px;
}
ul#nav li {
    display:inline;
    float:left;
}
ul#nav a {
    color: #353435;
    float: left;
    font-size: 15px;
    letter-spacing: 1px;
    line-height: 14px;
    min-width:60px;
    padding: 60px 20px;
    text-align: center;
    text-decoration: none;
    text-shadow: 1px 1px 0 #B4C6C6;
    text-transform: uppercase;
}
ul#nav > li:hover > a {
    border-top: 5px solid #887963;
    color: #1e1e1e;
    padding-top: 55px;
}
ul#nav li a.current, ul#nav li a.current:hover {
    background: url("../images/nav_current.png") no-repeat scroll center top transparent;
    border: medium none;
    color: #fff;
    padding-top: 60px;
    text-shadow: none;
}
ul#nav ul a {
    color:#000;
    font-size:12px;
    font-weight:bold;
    padding:5px;
    text-shadow:#fff 0 0 0;

    border-radius:0;
    -moz-border-radius:0;
    -webkit-border-radius:0;
}
ul#nav ul li:hover>a {
    letter-spacing:2px;
}

Live Demo
download in package

Conclusion

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

SIMILAR ARTICLES

Practice with Text Shadows

0 376
Responsive HTML Email Template

0 590

4 COMMENTS

  1. Whenever I try using this nice script, the menu is vertical not horizontal… Not sure why :S Any ideas why I cannot get it horizontal and just vertical?

Leave a Reply