PDA

View Full Version : Corp Blue CSS Menu



hax0r
03-30-2009, 10:45 PM
1) CODE TITLE: Corp Blue CSS Menu

2) AUTHOR NAME/NOTES: Swakconcepts.com

3) DESCRIPTION:

Images:
Left: http://www.swakconcepts.com/css1/left.png
Right: http://www.swakconcepts.com/css1/right.png

Demo: http://www.swakconcepts.com/css1/index.html

http://swakconcepts.com/css1/1.jpg
http://swakconcepts.com/css1/2.jpg

CSS Code:


@charset "utf-8";
/* CSS Document */
body {
background-color: #ffffff;
}

#tabs {
float:left;
width:100%;
background:#ffffff;
font-size:93%;
line-height:normal;
border-bottom:1px solid #666;

}

#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("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("right.png") no-repeat right top;
padding:5px 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;
}

HTML Code:

<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>

ddadmin
03-31-2009, 04:39 AM
Not bad! A typical but classic look. I've only tested it in a few browsers so far- are you aware of any browser centric issues users should be aware of?

hax0r
03-31-2009, 05:36 PM
No I am not, it seems to work good in all I have tested.

ddadmin
04-07-2009, 01:10 AM
I've gone ahead and added your menu to DD's CSSL section: http://www.dynamicdrive.com/style/csslibrary/item/corp_blue_css_menu/ Thanks!