Menú con imagen para cada estado con CSS.

  • Hola a todos mis fieles lectores, que en este momento solo cuento con uno osease yo jajaja, voy comenzando con este blog y poco a poco irá levantando vuelo.

    Ahora pasemos a lo interesante, muchas veces al estar haciendo un menú para nuestras páginas con botones que cambian de imagen cuando esta el puntero encima (hover), nos topamos con la gran sorpresa de que al subirlo al servidor en el momento que debería hacer el cambio de imagen, pues pusimos nuestro puntero sobre el botón, no se muestra o se tarda un momento en aparecer la imagen secundaria (tiempo de descarga de la imagen secundaria), entonces optaríamos por hacer un precargador de imágenes, aquí les tengo otra opción.

    Lo que vamos a hacer es meter nuestras dos imágenes en una sola de esta forma:

    En nuestro codigo solo haremos un <div> para colocar el menú y dentro de este una lista, que cada punto de la misma <li>,  será cada uno de nuestros botones que el link lo haremos con el texto solo pondremos la imagen del botón como fondo del <div>, de esta manera:

    <html >
<head>
   <link href="styles.css" rel="stylesheet" type="text/css" />
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>..::Poderoso Saber::..</title>
</head>
<body>
   <div>
      <ul>
         <li>
            <a href="#">  HOME  </a>
         </li>
      </ul>
   </div>
</body>
</html>

    Solo nos resta agregar el efecto con la hoja de estilo, esto nos evitara el error ya que cuando cargue la imagen para el link inactivo estará cargando al mismo tiempo la que es para el estado hover, esto lo haremos personalizando el estado de nuestros botones, a y a:hover, y simplemente cambiaremos la posición en y de la imagen de fondo para cada uno de los estados y listo. En la hoja de estilo quedaría de esta forma:

    .botonera ul
{
   list-style:none;
   float:left;
}
.botonera li
{
   float:left;
   padding-left:5px;
   width:80px;
   height:30px;
}
.botonera a
{
   width:80px;
   height:22px;
   text-align:center;
   display:block;
   padding-top:8px;
   outline:none;
   font-size:10px;
   text-transform:uppercase;
   color:#999;
   background:url(img/bgboton.png) no-repeat 0 0;
}
.botonera a:hover
{
   color:#CCC;
   background:url(img/bgboton.png) no-repeat 0 -30px;
   text-decoration:none;
}

    Les  dejo un archivo de ejemplo muévanle a la hoja de estilo para que comprendan exactamente como funciona. Por favor cualquier duda o comentario no duden en dejarlos vale y espero que les sea muy util.

    Menu con CSS




    febrero 4th, 2010 | Roy | Sin comentarios | Etiquetas: , ,

Acerca del autor

Roy Rules

Geek soñador con aires de grandeza, además de la tecnología me apasiona el diseño web. Páginas Web | Celulares Telcel