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 4 of 4 pages « First < 2 3 4

Very nice menu. Can be implemented in any design you have.
Thanks

Posted by Emiliano on 03/17, 09:54 AM

thx for buttoms but i need some help.. when i put them on my site it makes an area around the buttoms that i cant put anything in :( i want to write something under the bar but everything is moving down as fast as I open it in explorer.. DO anyone know how do resize our just remove the area around ? ty for help!

Posted by Sebbe on 03/25, 02:39 AM

cheers mate ill put u in my thanks section when i publish my site many thanks

Posted by simon on 03/31, 12:11 PM

wow...this was so easy to do. it's awesome. thanks so much!Volkswagen vans parks

Posted by Volkswagen vans on 04/08, 03:18 AM

nice menu clear color

Posted by hUzE on 04/10, 10:51 AM

CSS code goes in between your <head> </head> code in your doc, then the html code goes where you want the menu to be

Posted by n1ck4nd0 on 04/23, 01:00 PM

It works great...I love this site.

http://www.thinkflick.com/freebies/apple-mac-style-image-gallery/

Posted by Think Flick on 06/02, 09:43 PM

I am a self taught webmaster and am just learnign I have 3 simple web sites. This code is brilliant it worked first time !

I will have to join your forum to learn how to build on it.

Thanks very much

Posted by Digby Green on 06/11, 11:58 PM

Comment Pages 4 of 4 pages « First < 2 3 4

Commenting is not available in this weblog entry.