Dynamic Drive CSS Library- CSS Clay Bricks Menu

CSS Library

Hosting Discounts

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

CSS Library: Horizontal CSS Menus: Here

CSS Clay Bricks Menu

Author: Dynamic Drive

This rustic looking horizontal CSS menu utilizes CSS3 gradient backgrounds and box shadows to add progressive visual appeal while still maintaining its minimalist look. The menu uses no CSS floats and hence can be easily left, center, or right aligned.

The CSS:


<style type="text/css">

div.topbar{ /* bar that runs across the top of the menu */
height: 16px;
background: #e16031;
}

ul.claybricks{ /* main menu UL */
font-weight: bold;
width: 100%;
background: #e3e490;
padding: 6px 0 6px 0; /* padding of the 4 sides of the menu */
margin: 0;
text-align: left; /* set value to "left", "center", or "right" to align menu accordingly */
}

ul.claybricks li{
display: inline;
}

ul.claybricks li a{
color:black;
padding: 6px 8px 4px 8px; /* padding of the 4 sides of each menu link */
margin-right: 20px; /* spacing between each menu link */
text-decoration: none;
}

ul.claybricks li a:hover, ul.claybricks li a.selected{
color: white;
background: #5d4137;
background: -moz-linear-gradient(top, #5d4137 0%, #41251b 12%, #2c0f05 100%); /* moz syntax for CSS3 gradient */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5d4137), color-stop(12%,#41251b), color-stop(100%,#2c0f05));
background: -webkit-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%); /* webkit syntax for CSS3 gradient */
background: -o-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%); /* opera syntax for CSS3 gradient */
background: -ms-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
background: linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d4137', endColorstr='#2c0f05',GradientType=0 );
-moz-box-shadow: 0 0 5px #595959; /* moz syntax for CSS3 box shadows */
-webkit-box-shadow: 0 0 5px #595959;
box-shadow: 0 0 5px #595959;
padding-top: 17px; /* large padding to get menu item to protrude upwards */
padding-bottom: 6px;
}

</style>

The HTML:

<div class="topbar"></div>
<ul class="claybricks">
<li><a href="http://www.dynamicdrive.com/">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS Codes</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com">Webmaster Tools</a></li>
<li><a href="http://www.javascriptkit.com/">JavaScript</a></li>
<li><a href="http://www.cssdrive.com">Gallery</a></li>
</ul>

Code Info

Rate this code:

Date Posted: 10/26/2011

Revision History: None

Usage Terms: Click here