Como Crear un Menu CSS con Efecto OnMouseOver

Menu Css

En esta ocasión les traigo un pequeño codigo hecho en CSS con el cual podremos crear un menu con efecto OnMouseOver, el cual es muy similar a muchos scripts escritos en javascript, que nos brindan el mismo efecto.

Este efecto basicamente es el siguiente, cuando esta en reposo la seccion del menú tiene un color y cuando esta activo tiene uno diferente, al igual que cuando damos click, toma un tercer color.

Bueno sin mas explicaciones les dejo el codigo.
CSS:

PLAIN TEXT
CSS:
  1. <style type="text/css">
  2. #menu div.barraMenu,
  3. #menu div.barraMenu a.botonMenu {
  4. font-family: sans-serif, Verdana, Arial;
  5. font-size: 8pt;
  6. color: white;
  7. }
  8.  
  9. #menu div.barraMenu {
  10. text-align: left;
  11. }
  12. #menu div.barraMenu a.botonMenu {
  13. background-color:#0099FF;
  14. color: white;
  15. cursor: pointer;
  16. padding: 4px 6px 2px 5px;
  17. text-decoration: none;
  18. }
  19. #menu div.barraMenu a.botonMenu:hover {
  20. background-color:#0066FF;
  21. }
  22. #menu div.barraMenu a.botonMenu:active {
  23. background-color:#0000CC;
  24. color: white;
  25. }
  26. </style>

HTML:

PLAIN TEXT
HTML:
  1. <div id="menu">
  2.     <div class="barraMenu">
  3.       <div align="center">
  4.             <a class="botonMenu" href="">Inicio</a>
  5.             <a class="botonMenu" href="">Servicios</a>
  6.             <a class="botonMenu" href="">Portafolio</a>
  7.             <a class="botonMenu" href="">Contacto</a>
  8.       </div>
  9.     </div>
  10. </div>

Vota esta entrada: votar

Entradas Relacionadas

Únete a nuestro grupo de Facebook

Devblab en Facebook
Author: cuisi Comments: 2 comments Date: 18 Apr 2009
Categories: Css, Menus Tags: , , , ,

There are 2 comments. Leave a comment!

  • ¬ teknear.com
    #2284 June 23rd, 2009 at 2:00 pm

    15 Paquetes de Iconos sobre Redes Sociales...

    Vota este post en teknear.com...

  • ¬ Jhon Qwerty
    #2421 September 2nd, 2009 at 11:36 pm

    Excelente!!! Gracias, me ha sido de mucha ayuda para crear páginas sin utilizar JavaScript o flash...

Name (Req)

E-mail (Req)

URI

Message