Posted By

settysantu on 12/10/08

Tagged

Versions (?)

Last Edited at 12/10/08 02:53am

Statistics

Viewed 847 times

Favorited by 1 user(s)

Related snippets

Glossy Slide Menu

/ Published in: CSS

Glossy slide door black menu with blue hover styled which can be used on white backgrounds

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

CSS Code 
 
#menu_007{width:100%;}
#menu_007 ul{list-style:none;}
#menu_007 li{list-style:none;display:block;float:left;}
#menu_007 li a{display:block;float:left;height:66px;color:#fff;text-transform:uppercase;font-size:11px;font-weight:bold;background:url(http://cssmenus.googlepages.com/menu_007_left.jpg) no-repeat left;line-height:43px;
padding:0 0 0 7px;text-decoration:none;}
#menu_007 li a span{display:block;float:left;background:url(http://cssmenus.googlepages.com/menu_007_right.jpg) no-repeat right;height:66px;color:#fff;line-height:43px;padding:0 14px 0 6px;}
#menu_007 li a:hover{display:block;float:left;background:url(http://cssmenus.googlepages.com/menu_007_left_h.jpg) no-repeat left;height:66px;}
#menu_007 li a:hover span{display:block;float:left;background:url(http://cssmenus.googlepages.com/menu_007_right_h.jpg) no-repeat right;color:#fff;height:66px;}
#menu_007 li a.current{display:block;float:left;height:66px;color:#fff;text-transform:uppercase;font-size:11px;font-weight:bold;background:url(http://cssmenus.googlepages.com/menu_007_left_h.jpg) no-repeat left;line-height:43px;padding:0 0 0 7px;text-decoration:none;}
#menu_007 li a.current span{display:block;float:left;background:url(http://cssmenus.googlepages.com/menu_007_right_h.jpg) no-repeat right;height:66px;color:#fff;line-height:43px;padding:0 14px 0 6px;}
 
 
HTML CODE
 
<div id="menu_007">
	<ul>
		<li><a href="#" class="current"><span>home</span></a></li>
		<li><a href="#"><span>about us</span></a></li>
 
		<li><a href="#"><span>services</span></a></li>
		<li><a href="#"><span>solutions</span></a></li>
		<li><a href="#"><span>contact us</span></a></li>								
	</ul>
</div>