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

really useful to me and thank you

Posted by cambrian12345 on 04/26, 03:05 AM

I learn sth new. thx for tut

Posted by Mohammed Zatari on 04/27, 03:36 PM

Where should I place these code onto my website??

Thanks,
McP

Posted by McPrie on 04/28, 02:54 AM

nice effort.. wishes for ur future

Posted by Chetan on 05/03, 05:32 AM

I'm a f*cked up newbie, and I got stuck trying to modify this css code so I can set the position of the menus...
Can somebody get me out of here??

Posted by Gde Adrian on 05/06, 11:47 PM

Hi i use this menu in my site can anyone please tell me what i can do to make my site better??
thanks

Posted by Taylor on 05/11, 09:57 PM

Very nice work.

Posted by Asanka on 05/13, 10:32 PM

Thanks for taking the time to share your work.

Posted by daoke on 05/16, 03:13 AM

thanks for share. web tasarım

seo

Posted by web tasarım on 05/21, 11:48 AM

Your language is very easy for better thinking, thanks sir

Posted by tejaspatel on 05/22, 04:57 AM

Comment Pages 2 of 3 pages < 1 2 3 >

Commenting is not available in this weblog entry.