Dynamic Drive CSS Library- CSS Clay Bricks Menu

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

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

Your Comments (10)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 1 of 1 pages

Awesome, grabbed it and trying now to use it.

Posted by blinds on 11/04, 10:29 AM

Working well with Chrome but not in IE.

please help...

Posted by Viren on 11/07, 09:37 PM

many thanks for this time saving css code, i love you for this piece of code and funny quotes

Posted by funny statuses on 11/18, 02:46 AM

Thank you so much, I've been looking for a good tutorial on this for days. http://www.bullion-investor.com

Posted by Marshall on 11/20, 06:58 AM

Sweet article. It was easy to attach it to the website I'm working on. IT-Consulting

Posted by Sarah on 11/20, 07:18 AM

very nice post. I hope I can see more interesting post from you in future.
iPhone App Creator

Posted by Sam Stephan on 11/21, 03:47 AM

George your website is awesome!

We added it as CSS resource in our coder resources webdirectory! Developer Tools Webdirectory

Posted by CoderSlum on 11/22, 11:42 AM

After reading this tutorial I consider to update the menu of our coin links webdirectory to apply this style

Posted by Andrew on 11/23, 11:23 AM

this tutorial along with codes was very helpful to me many many thanks for this excellent post and funny jokes

Posted by jenny tay on 11/24, 07:41 AM

Thanks for sharing your post. All good luck for future.
Indian Wedding Videographer

Posted by BECKA on 11/25, 10:53 AM

Comment Pages 1 of 1 pages

Commenting is not available in this weblog entry.