Dynamic Drive CSS Library- Corp Blue CSS Menu

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

CSS Library: Horizontal CSS Menus: Here

Corp Blue CSS Menu

Author: Swakconcepts.com

This corporate blue themed menu uses the sliding door technique to create 2 states. While it works perfectly fine against a white background, for black background pages, the tabs reveal a thick white outline around its edges.

Demo:

Screenshot when used against black background:

Two images used (resized for easier download):

The CSS:

<style type="text/css">

#tabs {
	float:left;
	width:100%;
	font-size:93%;
	line-height:normal;
	border-bottom:1px solid #666;
	margin-bottom:1em; /*margin between menu and rest of page*/
	overflow:hidden;
	}

#tabs ul {
	margin:0;
	padding:10px 10px 0 0px;
	list-style:none;
	
	}

#tabs li {
	display:inline;
	margin:0;
	padding:0;
	}

#tabs a {
	float:left;
	background:url("media/left.png") no-repeat left top;
	margin:0;
	padding:0 0 0 6px;
	text-decoration:none;
	}

#tabs a span {
	float:left;
	display:block;
	background:url("media/right.png") no-repeat right top;
	padding:6px 15px 4px 6px;
	margin-right:2px;
	color:#FFF;
	}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}

/* End IE5-Mac hack */
#tabs a:hover span {
	}

#tabs a:hover {
	background-position:0% -42px;
	}

#tabs a:hover span {
	background-position:100% -42px;
	}

</style>

The HTML:

<div id="tabs">
  <ul>
    <li></li>
    <li><a href="#"><span>Menu 1</span></a></li>
    <li><a href="#"><span>Menu 2</span></a></li>
    <li><a href="#"><span>Menu 3</span></a></li>
    <li><a href="#"><span>Menu 4</span></a></li>
    <li><a href="#"><span>Menu 5</span></a></li>
    <li><a href="#"><span>Menu 6</span></a></li>
  </ul>
</div>

Code Info

Rate this code:

Date Posted: 04/06/2009

Revision History: None

Usage Terms: Click here

Your Comments (22)

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 < 1 2 3

this is very useful content to learn for a fresher like me

Posted by ayyappa on 05/24, 11:23 PM

I don't get it.
why use 4 images,could it be 2 images?

Posted by Rubs on 05/28, 11:25 AM

Comment Pages 3 of 3 pages < 1 2 3

Commenting is not available in this weblog entry.