Dynamic Drive CSS Library- Matt Black Tabs

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

Website Templates

PSD to HTML

Web Templates

Website Hosting

HTML Editor

Social Media Applications

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 (23)

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

HELP....
Hey cool script.
But when i insert it into my page save and refresh i
get the bar message at top of screen saying....
"
to help protect your security, Internet Explorer has restricted this web page from running script and ActiveX controls that could access your computer. Click here for options
..."

this would be very annoying to people viewing my page. Is there any way to correct this please?

Paul

Posted by Paul on 10/23, 05:53 AM

Love it, no images ... just pure code...thanks.

Posted by Jetiro on 10/25, 12:50 PM

Thank you so much! This saved me a lot of headaches.

Posted by Mark on 11/24, 10:58 AM

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