CSS3 onclick vertical metal menu. In our new tutorial we will create a cool CSS3 vertical menu with icons in metal style. The submenu will be opened by pressing the main menu items.
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 – menu contain only 1 sub level. Hope this is will enough for you. 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 Onclick Vertical Metal 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 | <ul id="nav"> |
12 | <li><a href="#"><img src="images/t1.png" /> Home</a></li> |
13 | <li><a href="#" class="sub" tabindex="1"><img src="images/t2.png" />HTML/CSS</a><img src="images/up.gif" alt="" /> |
14 | <ul> |
15 | <li><a href="#"><img src="images/empty.gif" />Link 1</a></li> |
16 | <li><a href="#"><img src="images/empty.gif" />Link 2</a></li> |
17 | <li><a href="#"><img src="images/empty.gif" />Link 3</a></li> |
18 | <li><a href="#"><img src="images/empty.gif" />Link 4</a></li> |
19 | <li><a href="#"><img src="images/empty.gif" />Link 5</a></li> |
20 | </ul> |
21 | </li> |
22 | <li><a href="#" class="sub" tabindex="1"><img src="images/t3.png" />jQuery/JS</a><img src="images/up.gif" alt="" /> |
23 | <ul> |
24 | <li><a href="#"><img src="images/empty.gif" />Link 6</a></li> |
25 | <li><a href="#"><img src="images/empty.gif" />Link 7</a></li> |
26 | <li><a href="#"><img src="images/empty.gif" />Link 8</a></li> |
27 | <li><a href="#"><img src="images/empty.gif" />Link 9</a></li> |
28 | <li><a href="#"><img src="images/empty.gif" />Link 10</a></li> |
29 | </ul> |
30 | </li> |
31 | <li><a href="#"><img src="images/t2.png" />PHP</a></li> |
32 | <li><a href="#"><img src="images/t2.png" />MySQL</a></li> |
33 | <li><a href="#"><img src="images/t2.png" />XSLT</a></li> |
34 | </ul> |
35 | </div> |
36 | <footer> |
37 | <h2>CSS3 Onclick Vertical Metal menu</h2> |
38 | <a href="https://www.script-tutorials.com/css3-onclick-vertical-metal-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 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 | #nav { |
002 | border:3px solid #3e4547; |
003 | box-shadow:2px 2px 8px #000000; |
004 | border-radius:3px; |
005 | -moz-border-radius:3px; |
006 | -webkit-border-radius:3px; |
007 | } |
008 | #nav, #nav ul { |
009 | list-style:none; |
010 | padding:0; |
011 | width:200px; |
012 | } |
013 | #nav ul { |
014 | position:relative; |
015 | z-index:-1; |
016 | } |
017 | #nav li { |
018 | position:relative; |
019 | z-index:100; |
020 | } |
021 | #nav ul li { |
022 | margin-top:-23px; |
023 | -moz-transition: 0.4s linear 0.4s; |
024 | -ms-transition: 0.4s linear 0.4s; |
025 | -o-transition: 0.4s linear 0.4s; |
026 | -webkit-transition: 0.4s linear 0.4s; |
027 | transition: 0.4s linear 0.4s; |
028 | } |
029 | #nav li a { |
030 | background-color:#d4d5d8; |
031 | color:#000; |
032 | display:block; |
033 | font-size:12px; |
034 | font-weight:bold; |
035 | line-height:28px; |
036 | outline:0; |
037 | padding-left:15px; |
038 | text-decoration:none; |
039 | } |
040 | #nav li a.sub { |
041 | background:#d4d5d8 url("../images/down.gif") no-repeat; |
042 | } |
043 | #nav li a + img { |
044 | cursor:pointer; |
045 | display:none; |
046 | height:28px; |
047 | left:0; |
048 | position:absolute; |
049 | top:0; |
050 | width:200px; |
051 | } |
052 | #nav li a img { |
053 | border-width:0px; |
054 | height:24px; |
055 | line-height:28px; |
056 | margin-right:8px; |
057 | vertical-align:middle; |
058 | width:24px; |
059 | } |
060 | #nav li a:hover { |
061 | background-color:#bcbdc1; |
062 | } |
063 | #nav ul li a { |
064 | background-color:#eee; |
065 | border-bottom:1px solid #ccc; |
066 | color:#000; |
067 | font-size:11px; |
068 | line-height:22px; |
069 | } |
070 | #nav ul li a:hover { |
071 | background-color:#ddd; |
072 | color:#444; |
073 | } |
074 | #nav ul li a img { |
075 | background: url("../images/bulb.png") no-repeat; |
076 | border-width:0px; |
077 | height:16px; |
078 | line-height:22px; |
079 | margin-right:5px; |
080 | vertical-align:middle; |
081 | width:16px; |
082 | } |
083 | #nav ul li:nth-child(odd) a img { |
084 | background:url("../images/bulb2.png") no-repeat; |
085 | } |
086 | #nav a.sub:focus { |
087 | background:#bcbdc1; |
088 | outline:0; |
089 | } |
090 | #nav a:focus ~ ul li { |
091 | margin-top:0; |
092 | -moz-transition: 0.4s linear; |
093 | -ms-transition: 0.4s linear; |
094 | -o-transition: 0.4s linears; |
095 | -webkit-transition: 0.4s linears; |
096 | transition: 0.4s linear; |
097 | } |
098 | #nav a:focus + img, #nav a:active + img { |
099 | display:block; |
100 | } |
101 | #nav a.sub:active { |
102 | background:#bcbdc1; |
103 | outline:0; |
104 | } |
105 | #nav a:active ~ ul li { |
106 | margin-top:0; |
107 | } |
108 | #nav ul:hover li { |
109 | margin-top:0; |
110 | } |
Live Demo
Conclusion
Hope you enjoyed with our new vertical menu, don’t forget to tell thanks and leave a comment 🙂 Good luck!
Initial idea has been taken from here.
