This is a modern looking, image less horizontal menu. The selected menu item merges with the band below it to help it stand out even more. As mentioned, the menu uses no images, making customization a breeze.
Demo:
The CSS:
<style type="text/css">
#modernbricksmenu {
padding: 0;
width: 100%;
background: transparent;
}
#modernbricksmenu ul {
font: bold 11px Arial;
margin:0;
margin-left: 40px; /*margin between first menu item and left browser edge*/
padding: 0;
list-style: none;
}
#modernbricksmenu li {
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}
#modernbricksmenu a {
float: left;
display: block;
color: white;
margin: 0 1px 0 0; /*Margin between each menu item*/
padding: 5px 10px;
text-decoration: none;
letter-spacing: 1px;
background-color: black; /*Default menu color*/
border-bottom: 1px solid white;
}
#modernbricksmenu a:hover {
background-color: gray; /*Menu hover bgcolor*/
}
#modernbricksmenu #current a { /*currently selected tab*/
background-color: #D25A0B; /*Brown color theme*/
border-color: #D25A0B; /*Brown color theme*/
}
#modernbricksmenuline {
clear: both;
padding: 0;
width: 100%;
height: 5px;
line-height: 5px;
background: #D25A0B; /*Brown color theme*/
}
</style>The HTML:
<div id="modernbricksmenu"> <ul> <li style="margin-left: 1px" id="current"><a href="http://webhq.blogspot.com/" title="The Head Quarter Of Web">Home</a></li> <li><a href="http://webhq.blogspot.com/p/windows-hq.html" title="Windows Downloads">Windows</a></li> <li><a href="http://webhq.blogspot.com/p/mobile-hq.html" title="Mobile Contents">Mobile</a></li> <li><a href="http://peacehq.blogspot.com/" title="Easiest way to live in peace">PeaceHQ</a></li> <li><a href="http://webhq.blogspot.com/p/about.html" title="About the Designer">Services</a></li> </ul> </div> <div id="modernbricksmenuline"> </div>
No comments On "Modern Bricks Menu - Horizontal CSS Menus"
Post a Comment