Sunday, August 2, 2015

Solid Block Menu - Horizontal CSS Menus

This is a lean, professional looking CSS menu that's draped in a solid two color background image. The divider between the menu items is simply a white CSS border. The style is extremely easy to customize thanks to the simple background image used.

Demo:


The two images used (resized horizontally):

Block DefaultBlock Active

The CSS:

<style type="text/css">

.solidblockmenu{
 margin: 0;
 padding: 0;
 float: left;
 font: bold 13px Arial;
 width: 100%;
 overflow: hidden;
 margin-bottom: 1em;
 border: 1px solid #625e00;
 border-width: 1px 0;
 background: black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQb3Pz8u-1spt5CoaoEiTllo7v5prcVzIksLZaI5jhEMhPoIspXe6CnUxDn0IkPv8wkaT6L6lZgpHERuyGFTqgfA18RGbFJ0N9-4BXPQPVl1ro_JKeffaUZFdIql-d-hIR5rtNdRi_xPj4/s1600/blockdefault.gif) center center repeat-x;
}

.solidblockmenu li{
 display: inline;
}

.solidblockmenu li a{
 float: left;
 color: white;
 padding: 9px 11px;
 text-decoration: none;
 border-right: 1px solid white;
}

.solidblockmenu li a:visited{
 color: white;
}

.solidblockmenu li a:hover, .solidblockmenu li .current{
 color: white;
 background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs085p60BArDYdbvo6fhle9dUruOzOBWOr5mOMqOCc0nqAxVJ8zkt6AcezU0XdyRyil9AAUdYqNHuJUf_Z1CjkGTzkELDAm568oeqL_m2Jm_82LfyWiziPbZDcnlbKInR7nnJj_dLYMlta/s1600/blockactive.gif) center center repeat-x;
}

</style>

The HTML:

<ul class="solidblockmenu">
<li><a href="http://mobiletipsflash.blogspot.com/" class="current">Home</a></li>
<li><a href="http://mobiletipsflash.blogspot.com/p/windows-hq.html">Windows</a></li>
<li><a href="http://mobiletipsflash.blogspot.com/p/mobile-hq.html">Mobile</a></li>
<li><a href="http://peacehq.blogspot.com/">PeaceHQ</a></li>
<li><a href="http://mobiletipsflash.blogspot.com/p/about.html">About</a></li>
</ul>
<br style="clear: left">

Posted by at
Labels: , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)