Creating a Multilevel CSS3 Metal Navigation with icons

Creating a Multilevel CSS3 Metal Navigation with icons

6 1920
CSS3 Metal menu with icons

CSS3 Metal menu with icons

In our new tutorial we’ll create a beautiful CSS3 menu with icons in metal style. This is will pretty standard UL-LI multilevel menu.


Here are final result (what we will creating):

css3 menu11

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. As you can see – this is multilevel menu. Whole menu built on UL-LI elements.

index.html

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>CSS3 Metal menu with icons | 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">

            <ul id="nav">
                <li><a href="#"><img src="images/home.png" /> Home</a></li>
                <li><a href="#"><span><img src="images/top1.png" /> HTML/CSS</span></a>
                    <div class="subs">
                        <div class="col">
                            <ul>
                                <li><a href="#"><img src="images/bub.png" /> Link 1</a></li>
                                <li><a href="#"><img src="images/bub.png" /> Link 2</a></li>
                                <li><a href="#"><img src="images/bub.png" /> Link 3</a></li>
                                <li><a href="#"><img src="images/bub.png" /> Link 4</a></li>
                                <li><a href="#"><span><img src="images/top3.png" /> Sublinks</span></a>
                                    <div class="subs">
                                        <div class="col">
                                            <ul>
                                                <li><a href="#"><img src="images/bub.png" /> Link 41</a></li>
                                                <li><a href="#"><img src="images/bub.png" /> Link 42</a></li>
                                                <li><a href="#"><img src="images/bub.png" /> Link 43</a></li>
                                                <li><a href="#"><img src="images/bub.png" /> Link 44</a></li>
                                                <li><a href="#"><img src="images/bub.png" /> Link 45</a></li>
                                            </ul>
                                        </div>
                                        <div class="col">
                                            <ul>
                                                <li><a href="#"><img src="images/bub.png" /> Link 46</a></li>
                                                <li><a href="#"><img src="images/bub.png" /> Link 47</a></li>
                                                <li><a href="#"><img src="images/bub.png" /> Link 48</a></li>
                                                <li><a href="#"><img src="images/bub.png" /> Link 49</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="col">
                            <ul>
                                <li><a href="#"><img src="images/bub.png" /> Link 6</a></li>
                                <li><a href="#"><img src="images/bub.png" /> Link 7</a></li>
                                <li><a href="#"><img src="images/bub.png" /> Link 8</a></li>
                                <li><a href="#"><img src="images/bub.png" /> Link 9</a></li>
                                <li><a href="#"><img src="images/bub.png" /> Link 10</a></li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li><a href="#"><span><img src="images/top2.png" /> jQuery/JS</span></a>
                    <div class="subs">
                        <div class="col">
                            <ul>
                                <li><a href="#"><img src="images/bub.png" /> Link 1</a></li>
                                <li><a href="#"><img src="images/bub.png" /> Link 2</a></li>
                                <li><a href="#"><img src="images/bub.png" /> Link 3</a></li>
                                <li><a href="#"><img src="images/bub.png" /> Link 4</a></li>
                                <li><a href="#"><img src="images/bub.png" /> Link 5</a></li>
                            </ul>
                        </div>
                        <div class="col">
                            <ul>
                                <li><a href="#"><img src="images/bub.png" /> Link 6</a></li>
                                <li><a href="#"><img src="images/bub.png" /> Link 7</a></li>
                                <li><a href="#"><img src="images/bub.png" /> Link 8</a></li>
                                <li><a href="#"><img src="images/bub.png" /> Link 9</a></li>
                                <li><a href="#"><img src="images/bub.png" /> Link 10</a></li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li><a href="#"><img src="images/top3.png" /> PHP</a></li>
                <li><a href="#"><img src="images/top4.png" /> MySQL</a></li>
                <li><a href="#"><img src="images/top5.png" /> XSLT</a></li>
            </ul>

        </div>

        <footer>
            <h2>CSS3 Metal menu with icons</h2>
            <a href="http://www.script-tutorials.com/css3-metal-menu-with-icons" 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 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 {
    display:block;
    float:left;
    font-family:Trebuchet MS,sans-serif;
    font-size:0;
    padding:5px 5px 5px 0;

    background: -moz-linear-gradient(#f5f5f5, #c4c4c4); /* FF 3.6+ */  
    background: -ms-linear-gradient(#f5f5f5, #c4c4c4); /* IE10 */  
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #c4c4c4)); /* Safari 4+, Chrome 2+ */  
    background: -webkit-linear-gradient(#f5f5f5, #c4c4c4); /* Safari 5.1+, Chrome 10+ */  
    background: -o-linear-gradient(#f5f5f5, #c4c4c4); /* Opera 11.10 */  
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#c4c4c4'); /* IE6 & IE7 */  
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#c4c4c4')"; /* IE8+ */  
    background: linear-gradient(#f5f5f5, #c4c4c4); /* the standard */ 
}
ul#nav,ul#nav ul {
    list-style:none;
    margin:0;
}
ul#nav,ul#nav .subs {
    background-color:#444;
    border:1px solid #454545;

    border-radius:9px;
    -moz-border-radius:9px;
    -webkit-border-radius:9px;
}
ul#nav .subs {
    background-color:#fff;
    border:2px solid #222;
    display:none;
    float:left;
    left:0;
    padding:0 6px 6px;
    position:absolute;
    top:100%;
    width:300px;

    border-radius:7px;
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
}
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 .col {
    float:left;
    width:50%;
}
ul#nav li {
    display:block;
    float:left;
    font-size:0;
    white-space:nowrap;
}
ul#nav>li,ul#nav li {
    margin:0 0 0 5px;
}
ul#nav ul>li {
    margin:5px 0 0;
}
ul#nav a:active,ul#nav a:focus {
    outline-style:none;
}
ul#nav a {
    border-style:none;
    border-width:0;
    color:#181818;
    cursor:pointer;
    display:block;
    font-size:13px;
    font-weight:bold;
    padding:8px 18px;
    text-align:left;
    text-decoration:none;
    text-shadow:#fff 0 1px 1px;
    vertical-align:middle;
}
ul#nav ul li {
    float:none;
    margin:6px 0 0;
}
ul#nav ul a {
    background-color:#fff;
    border-color:#efefef;
    border-style:solid;
    border-width:0 0 1px;
    color:#000;
    font-size:11px;
    padding:4px;
    text-align:left;
    text-decoration:none;
    text-shadow:#fff 0 0 0;

    border-radius:0;
    -moz-border-radius:0;
    -webkit-border-radius:0;
}
ul#nav li:hover>a {
    border-style:none;
    color:#fff;
    font-size:13px;
    font-weight:bold;
    text-decoration:none;
    text-shadow:#181818 0 1px 1px;
}
ul#nav img {
    border:none;
    margin-right:8px;
    vertical-align:middle;
}
ul#nav span {
    background-position:right center;
    background-repeat:no-repeat;
    display:block;
    overflow:visible;
    padding-right:0;
}
ul#nav ul span {
    background-image:url("../images/arrow.png");
    padding-right:20px;
}
ul#nav ul li:hover>a {
    border-color:#444;
    border-style:solid;
    color:#444;
    font-size:11px;
    text-decoration:none;
    text-shadow:#fff 0 0 0;
}
ul#nav > li >a {
    background-color:transpa;
    height:25px;
    line-height:25px;

    border-radius:11px;
    -moz-border-radius:11px;
    -webkit-border-radius:11px;
}
ul#nav > li:hover > a {
    background-color:#313638;
    line-height:25px;
}

Live Demo
download in package

Conclusion

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


6 COMMENTS

  1. I like this menu. What should a person pay attention to if they were to add this menu to an existing page? I suppose there are conflicts that will arise with the UL and LI and BODY elements?

    • Hello Richard,
      You don’t need to copy Whole this HTML code to your existing pages. You should only take NAV element for your website, you don’t need whole header with doctype.

Leave a Reply