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):
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. As you can see – this is multilevel 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 Metal menu with icons | 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 | <ul id="nav"> |
12 | <li><a href="#"><img src="images/home.png" /> Home</a></li> |
13 | <li><a href="#"><span><img src="images/top1.png" /> HTML/CSS</span></a> |
14 | <div class="subs"> |
15 | <div class="col"> |
16 | <ul> |
17 | <li><a href="#"><img src="images/bub.png" /> Link 1</a></li> |
18 | <li><a href="#"><img src="images/bub.png" /> Link 2</a></li> |
19 | <li><a href="#"><img src="images/bub.png" /> Link 3</a></li> |
20 | <li><a href="#"><img src="images/bub.png" /> Link 4</a></li> |
21 | <li><a href="#"><span><img src="images/top3.png" /> Sublinks</span></a> |
22 | <div class="subs"> |
23 | <div class="col"> |
24 | <ul> |
25 | <li><a href="#"><img src="images/bub.png" /> Link 41</a></li> |
26 | <li><a href="#"><img src="images/bub.png" /> Link 42</a></li> |
27 | <li><a href="#"><img src="images/bub.png" /> Link 43</a></li> |
28 | <li><a href="#"><img src="images/bub.png" /> Link 44</a></li> |
29 | <li><a href="#"><img src="images/bub.png" /> Link 45</a></li> |
30 | </ul> |
31 | </div> |
32 | <div class="col"> |
33 | <ul> |
34 | <li><a href="#"><img src="images/bub.png" /> Link 46</a></li> |
35 | <li><a href="#"><img src="images/bub.png" /> Link 47</a></li> |
36 | <li><a href="#"><img src="images/bub.png" /> Link 48</a></li> |
37 | <li><a href="#"><img src="images/bub.png" /> Link 49</a></li> |
38 | </ul> |
39 | </div> |
40 | </div> |
41 | </li> |
42 | </ul> |
43 | </div> |
44 | <div class="col"> |
45 | <ul> |
46 | <li><a href="#"><img src="images/bub.png" /> Link 6</a></li> |
47 | <li><a href="#"><img src="images/bub.png" /> Link 7</a></li> |
48 | <li><a href="#"><img src="images/bub.png" /> Link 8</a></li> |
49 | <li><a href="#"><img src="images/bub.png" /> Link 9</a></li> |
50 | <li><a href="#"><img src="images/bub.png" /> Link 10</a></li> |
51 | </ul> |
52 | </div> |
53 | </div> |
54 | </li> |
55 | <li><a href="#"><span><img src="images/top2.png" /> jQuery/JS</span></a> |
56 | <div class="subs"> |
57 | <div class="col"> |
58 | <ul> |
59 | <li><a href="#"><img src="images/bub.png" /> Link 1</a></li> |
60 | <li><a href="#"><img src="images/bub.png" /> Link 2</a></li> |
61 | <li><a href="#"><img src="images/bub.png" /> Link 3</a></li> |
62 | <li><a href="#"><img src="images/bub.png" /> Link 4</a></li> |
63 | <li><a href="#"><img src="images/bub.png" /> Link 5</a></li> |
64 | </ul> |
65 | </div> |
66 | <div class="col"> |
67 | <ul> |
68 | <li><a href="#"><img src="images/bub.png" /> Link 6</a></li> |
69 | <li><a href="#"><img src="images/bub.png" /> Link 7</a></li> |
70 | <li><a href="#"><img src="images/bub.png" /> Link 8</a></li> |
71 | <li><a href="#"><img src="images/bub.png" /> Link 9</a></li> |
72 | <li><a href="#"><img src="images/bub.png" /> Link 10</a></li> |
73 | </ul> |
74 | </div> |
75 | </div> |
76 | </li> |
77 | <li><a href="#"><img src="images/top3.png" /> PHP</a></li> |
78 | <li><a href="#"><img src="images/top4.png" /> MySQL</a></li> |
79 | <li><a href="#"><img src="images/top5.png" /> XSLT</a></li> |
80 | </ul> |
81 | </div> |
82 | <footer> |
83 | <h2>CSS3 Metal menu with icons</h2> |
84 | <a href="https://www.script-tutorials.com/css3-metal-menu-with-icons" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a> |
85 | </footer> |
86 | </body> |
87 | </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
001 | ul#nav { |
002 | display:block; |
003 | float:left; |
004 | font-family:Trebuchet MS,sans-serif; |
005 | font-size:0; |
006 | padding:5px 5px 5px 0; |
007 | background: -moz-linear-gradient(#f5f5f5, #c4c4c4); /* FF 3.6+ */ |
008 | background: -ms-linear-gradient(#f5f5f5, #c4c4c4); /* IE10 */ |
009 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #c4c4c4)); /* Safari 4+, Chrome 2+ */ |
010 | background: -webkit-linear-gradient(#f5f5f5, #c4c4c4); /* Safari 5.1+, Chrome 10+ */ |
011 | background: -o-linear-gradient(#f5f5f5, #c4c4c4); /* Opera 11.10 */ |
012 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#c4c4c4'); /* IE6 & IE7 */ |
013 | -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#c4c4c4')"; /* IE8+ */ |
014 | background: linear-gradient(#f5f5f5, #c4c4c4); /* the standard */ |
015 | } |
016 | ul#nav,ul#nav ul { |
017 | list-style:none; |
018 | margin:0; |
019 | } |
020 | ul#nav,ul#nav .subs { |
021 | background-color:#444; |
022 | border:1px solid #454545; |
023 | border-radius:9px; |
024 | -moz-border-radius:9px; |
025 | -webkit-border-radius:9px; |
026 | } |
027 | ul#nav .subs { |
028 | background-color:#fff; |
029 | border:2px solid #222; |
030 | display:none; |
031 | float:left; |
032 | left:0; |
033 | padding:0 6px 6px; |
034 | position:absolute; |
035 | top:100%; |
036 | width:300px; |
037 | border-radius:7px; |
038 | -moz-border-radius:7px; |
039 | -webkit-border-radius:7px; |
040 | } |
041 | ul#nav li:hover>* { |
042 | display:block; |
043 | } |
044 | ul#nav li:hover { |
045 | position:relative; |
046 | } |
047 | ul#nav ul .subs { |
048 | left:100%; |
049 | position:absolute; |
050 | top:0; |
051 | } |
052 | ul#nav ul { |
053 | padding:0 5px 5px; |
054 | } |
055 | ul#nav .col { |
056 | float:left; |
057 | width:50%; |
058 | } |
059 | ul#nav li { |
060 | display:block; |
061 | float:left; |
062 | font-size:0; |
063 | white-space:nowrap; |
064 | } |
065 | ul#nav>li,ul#nav li { |
066 | margin:0 0 0 5px; |
067 | } |
068 | ul#nav ul>li { |
069 | margin:5px 0 0; |
070 | } |
071 | ul#nav a:active,ul#nav a:focus { |
072 | outline-style:none; |
073 | } |
074 | ul#nav a { |
075 | border-style:none; |
076 | border-width:0; |
077 | color:#181818; |
078 | cursor:pointer; |
079 | display:block; |
080 | font-size:13px; |
081 | font-weight:bold; |
082 | padding:8px 18px; |
083 | text-align:left; |
084 | text-decoration:none; |
085 | text-shadow:#fff 0 1px 1px; |
086 | vertical-align:middle; |
087 | } |
088 | ul#nav ul li { |
089 | float:none; |
090 | margin:6px 0 0; |
091 | } |
092 | ul#nav ul a { |
093 | background-color:#fff; |
094 | border-color:#efefef; |
095 | border-style:solid; |
096 | border-width:0 0 1px; |
097 | color:#000; |
098 | font-size:11px; |
099 | padding:4px; |
100 | text-align:left; |
101 | text-decoration:none; |
102 | text-shadow:#fff 0 0 0; |
103 | border-radius:0; |
104 | -moz-border-radius:0; |
105 | -webkit-border-radius:0; |
106 | } |
107 | ul#nav li:hover>a { |
108 | border-style:none; |
109 | color:#fff; |
110 | font-size:13px; |
111 | font-weight:bold; |
112 | text-decoration:none; |
113 | text-shadow:#181818 0 1px 1px; |
114 | } |
115 | ul#nav img { |
116 | border:none; |
117 | margin-right:8px; |
118 | vertical-align:middle; |
119 | } |
120 | ul#nav span { |
121 | background-position:right center; |
122 | background-repeat:no-repeat; |
123 | display:block; |
124 | overflow:visible; |
125 | padding-right:0; |
126 | } |
127 | ul#nav ul span { |
128 | background-image:url("../images/arrow.png"); |
129 | padding-right:20px; |
130 | } |
131 | ul#nav ul li:hover>a { |
132 | border-color:#444; |
133 | border-style:solid; |
134 | color:#444; |
135 | font-size:11px; |
136 | text-decoration:none; |
137 | text-shadow:#fff 0 0 0; |
138 | } |
139 | ul#nav > li >a { |
140 | background-color:transpa; |
141 | height:25px; |
142 | line-height:25px; |
143 | border-radius:11px; |
144 | -moz-border-radius:11px; |
145 | -webkit-border-radius:11px; |
146 | } |
147 | ul#nav > li:hover > a { |
148 | background-color:#313638; |
149 | line-height:25px; |
150 | } |
Live Demo
Conclusion
Hope you enjoyed with new menu, don’t forget to tell thanks and leave a comment 🙂 Good luck!
