Este menú esta echo con un poco de css así que veamos un poco el código:
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" >
</head>
<body>
<ul class="menu">
<li ><a href="#">Servicios Profesionales</a></li>
<li ><a href="#">Repuestos para ATM</a></li>
<li ><a href="#">Hardware para ventanillas</a></li>
<li ><a href="#">Terminales PDS</a></li>
<li ><a href="#">Kioscos Electrónicos</a></li>
</ul>
</body>
</html>
Esto seria lo que pondriamos en el html como ejemplo creen un archivo index.html y copien.
.menu {
width:190px;
padding:0px;
margin:0px;
list-style:none;
}
.menu li a{
background: white url(img1.gif) repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
height:20px;display:block; background-position:0px 0px;
text-decoration:none;color:#000000;padding:4px 0 0 5px;
}
.menu li a:hover{
background-image: url(img2.gif);
color:#ffffff;
}
Veamos entonces lo que llevaría el .css para este ejemplo yo le e puesto style.css pueden cambiarle el nombre, pero recuerden ponerle el nombre correcto en la parte de la etiqueta link.
Muy bien ya casi tenemos todo listo solo necesitamos las dos imágenes variables que mandaremos a llamar en el evento de sobre de cada botón.
img1.gif
img2.gif
img1 seria la imagen cuando el botón este inactivo, img cuando el mouse este sobre claro pueden modificar esto como deseen.Bueno solo falta que prueben este útil menú recuerden cambiar el # del href para mandar a llamar los enlaces correctos si tienen duda so ne olviden de dejar su comentario.
No hay comentarios.:
Publicar un comentario