Matte CSS Menu
Tweet
Matte CSS Menu
A flat menu with rounded corners and a slight shadow, available in several colours.
This CSS menu comes in five different colours, and also includes a CSS3 version to ensure you’re well future-proofed. It’s plain, simple, and very easy to integrate into your existing design. If you’d like to customize the colours further, consider purchasing the PSD pack.
FAQ
- Entire menu system is small and compact
- 1 image file, 1 css file, 1 html file
- Has been tested and works in over 150 broswer/operating system combos
- It’s FREE for you to use
Other Notes
As you can see in the source code, the “Home” tab has the ON state by adding the “active” class to the li tag. Very straight forward!
Demo
CSS MENU
<style type="text/css">
#menu {
font-family: Arial, sans-serif;
font-weight: bold;
text-transform: uppercase;
margin: 50px 0;
padding: 0;
list-style-type: none;
background-color: #eee;
font-size: 13px;
height: 40px;
border-top: 2px solid #eee;
border-bottom: 2px solid #ccc;
}
#menu li {
float: left;
margin: 0;
}
#menu li a {
text-decoration: none;
display: block;
padding: 0 20px;
line-height: 40px;
color: #666;
}
#menu li a:hover, #menu li.active a {
background-color: #f5f5f5;
border-bottom: 2px solid #DDD;
color: #999;
}
#menu_wrapper ul {margin-left: 12px;}
#menu_wrapper {padding: 0 16px 0 0; background: url(grey.png) no-repeat right;}
#menu_wrapper div {float: left; height: 44px; width: 12px; background: url(grey.png) no-repeat left;}
/* Black Menu */
#menu_wrapper.black ul {
border-top: 2px solid #333;
border-bottom: 2px solid #000;
background: #333;}
#menu_wrapper.black a {color: #CCC;}
#menu_wrapper.black li a:hover, #menu_wrapper.black li.active a {color: #999; background: #555; border-bottom: 2px solid #444;}
#menu_wrapper.black {background: url(black.png) no-repeat right;}
#menu_wrapper.black div {background: url(black.png) no-repeat left;}
/* Blue Menu */
#menu_wrapper.blue ul {
border-top: 2px solid #356AA0;
border-bottom: 2px solid #204061;
background: #356AA0;}
#menu_wrapper.blue a {color: #fff;}
#menu_wrapper.blue li a:hover, #menu_wrapper.blue li.active a {color: #90CDFF; background: #3D7BBB; border-bottom: 2px solid #356AA0;}
#menu_wrapper.blue {background: url(blue.png) no-repeat right;}
#menu_wrapper.blue div {background: url(blue.png) no-repeat left;}
/* Red Menu */
#menu_wrapper.red ul {
border-top: 2px solid #660000;
border-bottom: 2px solid #450000;
background: #660000;}
#menu_wrapper.red a {color: #fff;}
#menu_wrapper.red li a:hover, #menu_wrapper.red li.active a {color: #F27F84; background: #990000; border-bottom: 2px solid #660000;}
#menu_wrapper.red {background: url(red.png) no-repeat right;}
#menu_wrapper.red div {background: url(red.png) no-repeat left;}
/* Orange Menu */
#menu_wrapper.orange ul {
border-top: 2px solid #d15600;
border-bottom: 2px solid #B44500;
background: #d15600;}
#menu_wrapper.orange a {color: #fff;}
#menu_wrapper.orange li a:hover, #menu_wrapper.orange li.active a {color: #FA9B5B; background: #B44500; border-bottom: 2px solid #d15600;}
#menu_wrapper.orange {background: url(orange.png) no-repeat right;}
#menu_wrapper.orange div {background: url(orange.png) no-repeat left;}
</style>
HTML MENU
<!-- Grey Menu -->
<div id="menu_wrapper">
<div></div>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!-- Black Menu -->
<div id="menu_wrapper">
<div></div>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!-- Blue Menu -->
<div id="menu_wrapper">
<div></div>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!-- Red Menu -->
<div id="menu_wrapper">
<div></div>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!-- Orange Menu -->
<div id="menu_wrapper">
<div></div>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
No comments yet.