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

The edges are a little rough, its ok.

Posted by Nile on 04/06, 06:23 PM

I, is possible to have for this menu the dropline ???
thank's for your work

Posted by Consigliamoci on 04/07, 01:30 AM

you forgot to write a:hover's parts

Posted by sofban on 04/08, 02:20 AM

My site is build with web.com - how can i use this css code on my site???

Thanks

Posted by McP on 04/16, 11:09 PM

Hey
Thanks for your article. i am going to use this in my blog for employees news

Posted by Techii on 04/18, 10:19 AM

EXCELLENT DESING

Posted by intel_cracker on 04/20, 08:21 AM

Hey,

I have learnt so much from you guys, keep up the good work and thank you !!

Posted by Shane on 04/21, 10:36 AM

Nice easy menu.

Thanks for taking the time to share your work.

Keith D

Posted by Keith D on 04/21, 12:49 PM

I have learnt so much from you guys, keep up the good work and thank you

Posted by youtube on 04/22, 10:51 AM

Thanks for your article. i am going t

Posted by youtubeline on 04/22, 10:52 AM

Comment Pages 1 of 3 pages 1 2 3 >

Commenting is not available in this weblog entry.