Glossy Slide Menu


/ Published in: CSS
Save to your folder(s)

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


Copy this code and paste it in your HTML
  1. CSS Code
  2.  
  3. #menu_007{width:100%;}
  4. #menu_007 ul{list-style:none;}
  5. #menu_007 li{list-style:none;display:block;float:left;}
  6. #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;
  7. padding:0 0 0 7px;text-decoration:none;}
  8. #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;}
  9. #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;}
  10. #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;}
  11. #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;}
  12. #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;}
  13.  
  14.  
  15. HTML CODE
  16.  
  17. <div id="menu_007">
  18. <ul>
  19. <li><a href="#" class="current"><span>home</span></a></li>
  20. <li><a href="#"><span>about us</span></a></li>
  21.  
  22. <li><a href="#"><span>services</span></a></li>
  23. <li><a href="#"><span>solutions</span></a></li>
  24. <li><a href="#"><span>contact us</span></a></li>
  25. </ul>
  26. </div>

URL: http://www.styledmenus.com

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.