Dynamic Drive CSS Library- Solid Block Menu

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Web Templates

Website Hosting

HTML Editor

Advertise Here

CSS Library: Horizontal CSS Menus: Here

Solid Block Menu

Author: Dynamic Drive

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):

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(media/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(media/blockactive.gif) center center repeat-x;
}

</style>

The HTML:

<ul class="solidblockmenu">
<li><a href="http://www.dynamicdrive.com/">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/" class="current">CSS Examples</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>
<br style="clear: left" />

<p class="iepara">Paragraph that follows...</p>

Code Info

Rate this code:

Date Posted: 03/27/2007

Revision History: July 6th 08"- Updated CSS for improved clear float in IE.

Usage Terms: Click here

Your Comments (165)

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 7 of 17 pages « First < 5 6 7 8 9 > Last »

This is a very silly question really, but I only have experience with PHP, and abit of html. Where do I put the CSS?

Posted by Rolland on 06/21, 11:58 AM

Yeah a drop down version of this menu would be excelent!

Posted by Windows Hosting on 06/27, 04:21 AM

how can i highlight the menu i selected to the next page?
for example, if i selected "menu item 2", it will open "menu item 2" page, and i want this "menu item 2" to be highlighted in this page.

I understand the highlight css is "class=current"
, but how can i pass this "class=current" to be added to the next page?

Posted by jim on 07/04, 09:57 PM

Every piece of code people have given me in order to center the menu, but the menu wont center in firefox or safari. NOTE: the menu im using is stretched across the page, 100%.

Posted by Gladiator on 07/11, 03:49 PM

thanks very good ...i using this sites;

www.izmirsozluk.com
www.c6c.org
www.kisalink.info

Posted by mstgngr on 07/13, 10:55 PM

hi there can someone explain how do i can change white separators for gif pic??

Posted by dola on 07/16, 04:03 PM

Hi -- At the end of the last link, there it shows one more tab at the most right hand side which i m trying to get rid of it but i can not.

Please let me know how to scale or margin entire menu so that all tabs occur in that area.

Posted by Pallavi Parmar on 07/18, 07:08 AM

Hey, how do you get the buttons to change color like above? It doesn't do that on mine

Posted by Shawn on 07/25, 05:28 PM

I've had a go at creating this menu with rounded corners and a dropdown menu with a rounded base. If you want to take a look and download a zip containing the amended files with images, go here:

http://www.calmdesign.co.uk/test/blockmenu.html

Kujee

Posted by Kujee on 07/25, 08:29 PM

good menu thanks ;)

Posted by mst on 07/26, 01:06 PM

Comment Pages 7 of 17 pages « First < 5 6 7 8 9 > Last »

Commenting is not available in this weblog entry.