Dynamic Drive CSS Library- Matt Black Tabs

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

CSS Library: Horizontal CSS Menus: Here

Matt Black Tabs

Author: Dynamic Drive

There's often beauty in simplicity. Matt Black Tabs is a clean CSS list menu that uses no images, and very small in footprint. Each tab is floated left to achieve its look and all contained in a wrapper that negate the need to manually clear "float" for the contents that immediately follow.

Note: Make sure your page contains a valid doctype for this menu to render properly.

Demo:

The CSS:

<style type="text/css">

.mattblacktabs{
width: 100%;
overflow: hidden;
border-bottom: 1px solid black; /*bottom horizontal line that runs beneath tabs*/
}

.mattblacktabs ul{
margin: 0;
padding: 0;
padding-left: 10px; /*offset of tabs relative to browser left edge*/
font: bold 12px Verdana;
list-style-type: none;
}

.mattblacktabs li{
display: inline;
margin: 0;
}

.mattblacktabs li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 7px 8px; /*padding inside each tab*/
border-right: 1px solid white; /*right divider between tabs*/
color: white;
background: #414141; /*background of tabs (default state)*/
}

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

.mattblacktabs li a:hover, .mattblacktabs li.selected a{
background: black; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */
}

</style>

The HTML:

<div class="mattblacktabs">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm">DHTML</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Gif Optimizer</a></li>
</ul>
</div>

Code Info

Rate this code:

Date Posted: 06/28/2008

Revision History: 07/01/2008: Fixed IE6 bug.

Usage Terms: Click here

Your Comments (38)

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 4 pages 1 2 3 > Last »

very nice menu thx, but how can i make it to fit my webpage??

Posted by Mario on 06/29, 02:24 PM

what mean is that I have 6 links and i whana to make them fit to 668 px that my haves

Posted by Mario on 06/29, 02:47 PM

Is this layout liquid to whatever div it's contained in?

Posted by Chosen Creative on 06/30, 06:25 PM

THANK YOU VERY MUCH...

This was such a genius(cant spell) idea.... and no pics required... THE BEST SO FAR!!!

Posted by Comrade|Games on 07/03, 12:20 AM

I would like to replace my horizontal navigation with css menu like this, but need drop down becauce of the high number of links I need to fit in. Is there a drop-down modification?

Posted by Arizona DUI Lawyer on 07/03, 05:31 AM

Arizona, actually, a multi level menu based on this tab is coming very soon.

Posted by ddadmin on 07/03, 03:48 PM

I'm viewing this page in Firefox and it works great...yet I place Matt Black Tabs code on a web site I'm working on and doesn't show, not sure what is missed in setting up the page. It works well on Safari, Explorer but not on Firefox...Any ideas.
www.traveltoart.com

Thanks. Great Stuff. I'm learning alot.

peace

Posted by DMoschetti on 07/09, 04:12 PM

I got it...I missed a # on my color sytle #78CDD3

It works great...I love this site.

Posted by DMoschetti on 07/09, 04:21 PM

Great work...I added this css menu however I want to incorporate it into my logo, is there a way I can put it under my logo? there seems to be a small gap which is in between my logo at the top of the page and the css menu

thanks

Posted by Michael on 07/20, 04:42 AM

thxs for the codes but, sorry, I'm not familiar with web page encoding, where to insert these css codes and html codes into a google blogspot web page code layout.
cheers

Posted by mek on 07/25, 08:06 PM

Comment Pages 1 of 4 pages 1 2 3 > Last »

Commenting is not available in this weblog entry.