JMiur [E]

Estos menús son una demostración práctica y muy original del uso de sprites para crear efectos.

Siempre se parte de lo mismo, el menú, es una lista:
<div class="navi1">
<ul>
<li class="sm1"><a href="URL_enlace1"></a></li>
<li class="sm2"><a href="URL_enlace2"></a></li>
<li class="sm3"><a href="URL_enlace3"></a></li>
<li class="sm4"><a href="URL_enlace4"></a></li>
<li class="sm5"><a href="URL_enlace5"></a></li>
</ul>
</div>


Pero, como se ve, no hay textos en los enlaces ya que todo el menú es una imagen transparente que tiene dos partes, la de arriba es la que vemos por defecto y la de abajo es la que vemos cuando el ratón se coloca encima

La clave es el CSS y usar la aritmética para calcular cada desplazamiento. No es mucho lo que puede explicarse del tema, hay que mirar y probar:


.navi1 {
display: block;
height: 72px;
margin:0 auto;
position: relative;
width: 525px;
}
.navi1 ul {
float: none;
list-style-image: none;
list-style-type: none;
margin: 3px 0;
}
.navi1 ul li {
height: 72px;
background-image: url(URL_imagen);
background-repeat: no-repeat;
float: left;
margin: 0px;
padding-top: 5px;
position: absolute;
}
.navi1 ul li a {
display: block;
height: 100%;
width: 100%;
}
.navi1 ul li.sm1 { background-position: 0px 0px; left: 0px; width: 125px; }
.navi1 ul li.sm2 { background-position: -125px 0px; left: 100px; width: 124px; }
.navi1 ul li.sm3 { background-position: -249px 0px; left: 200px; width: 124px; }
.navi1 ul li.sm4 { background-position: -373px 0px; left: 300px; width: 125px; }
.navi1 ul li.sm5 { background-position: -498px 0px; left: 400px; width: 126px; }
.navi1 ul li:hover { z-index: 1000; }
.navi1 ul li.sm1:hover { background-position: 0px -75px; }
.navi1 ul li.sm2:hover { background-position: -125px -75px; }
.navi1 ul li.sm3:hover { background-position: -249px -75px; }
.navi1 ul li.sm4:hover { background-position: -373px -75px; }
.navi1 ul li.sm5:hover { background-position: -498px -75px; }

Las otras variantes siguen el mismo criterio y todos los ejemplos pueden descargarse desde la web del autor.




REFERENCIAS:DeepuBalan

21 comentarios:

Manuel Alberto  

Asombra ver cómo algo tan simple puede tener tanta potencialidad... :P

Responder
Unknown  

!Hay qué bonito! cómo me gusta!
Veré si me sale un 'algo' :P

Responder
JMiur  

Todo es cuestión de paciencia e imaginación :D

Responder
La hormiguita  

Hola, Maestro.... bueno tengo que hacer una pregunta???,no se si podría ser contestada??? donde puedo encontrar un efecto para un menú vertical y que en el onmouseover se aparezca una imagen en el medio del ,div#mainContent, en dreamweaver, me lo pregunto un amigo que tiene que hacer una página...la idea la saco de acá http://lekevicius.com/ para el fondo lo piensa hacer en un gif para el cambio de colores, porque de programación... 000... pero con un poco de maña algo va salir. :)

Responder
JMiur  

En esa página, el efecto se realiza con algún plugin de jQuery. es dif´ciil responder con exactiud porque dependerá del diseño que quieran armar , de si se ttata de una imagen de fondo o no, etc. Por ejemplo, este enlace cambiaría la imagen de fondo de un DIV llamado mainContent

<a href="javascript:void(0);" onmouseover="javascript:document.getElementById('mainContent').style.backgroundImage='url(URL_imagen)';">ALGO</a>

Responder
La hormiguita  

Que bueno!!!
Ese diseño diparó la idea después, lo adapto, el fondo va ser liso y en el div main contet va ie un gif que cambia de color y en la sidebar un menú vertical. Se puede hacer las letras que se muevan como ahí? como se hace en dreamweaver? Lo del efecto lo vamos a dejar.... por lo menos ahora.. me parece mas fácil hacer el menú que se corran las palabras y cambien de color.Si sabe de donde lo puedo sacar??
Gracias

Responder
JMiur  

En Dreamweaver no tengo idea pero, en todo caso, la clave, siempre es la imagen. Fijate como está hecho el ejemplo de esta entrada:
http://2.bp.blogspot.com/_hljKDuw-cxQ/S6EpnbFVXyI/AAAAAAAAPUI/CYHVh6VJ_nM/s00/tab-1.png
es lo que se llama la técnica de los sprites.

Responder
La hormiguita  

Si, gracias... hay otro post suyo que no lo encuentro que hace ese efecto pero con imágenes, ya lo encontraré. y pensaba ese suplantar las imágenes por el texto.
Nuevamente gracias!!!!

Responder
JMiur  

Hay varios de ese estilo, no sé donde buscar :D

Responder
Empar  

Hola, una pregunta tonta (seguramente): ¿dónde hay que pegar el código del menú con sprites? Y otra: hay que pegar también el código simple? En ese caso, dónde? Gracias

Responder
JMiur  

El CSS se coloca antes de </b:skin> y el código HTML donde quieras que se muestre el menu; ya sea directamente en la plantilla o en un elemento HTML.

Responder
Empar  

Muchas gracias. Es un blog estupendo para aprender, gracias por compartir tus conocimientos. Saludos desde València.

Responder
*+~Namide Project*+~  

ola olle sabes que no se x k en mi blog no se ve :( me puedes explicar que ocurrio

Responder
JMiur  

Estás colocando todo el HTML dentro de la etiqueta b:skin y eso es un error. Debes colocarlo en alguna parte del body, donde quieras que se vea el menú.

Responder
*+~Namide Project*+~  

hola sabes que no me resulta por mas que intento :( aqui te dejo mi blog para que veas
namideproject.blogspot.com
ah y tambien como se hace que cada boton del menu tenga su propia imagen
te agradeceria mucho que me ayudes en los 2

Responder
*+~Namide Project*+~  

ola yo de nuevo xd bueno te queria decir 2 cosas
la primera esque en algunos blogger ahy menus que cada boton tiene su propia imagen quiero saber como lo hacen
y la otra creo que no entendi mucho asi que me lo puedes explicar mejor (mas facil xd) y decirme los errores que ise me arias un gran favor

Responder
JMiur  

Lo mismo de antes; el HTML sigue adentro del estilo.

Vas a tener que tratar de entender cómo funciona una plantilla y cuales son las reglas de sintaxis que deben utilizarse; cuál es la diferencia entre el CSS y el HTML, dónde va cada cosa, etc; sino, todo será muy complicado.

Responder
ADSDA  

Hola tengo una duda muy rara.
Todo me sale bien. Pero cuando el raton pasa por los botenes me sale cuadro negro de color plomo.
Cual es el problema ¿?

Responder
JMiur  

Habria que ver tu ejemplo.

Responder
ADSDA  

Este es mi sitio. Espero que me puedas ayudar. Y muchas gracias por responder tan rapido.
http://sxe-sxe-sxe.blogspot.com/

Responder
JMiur  

Eso ocurre porque en esas plantillas nuevas hay muchísimas definiciones de estilo por defecto que afectan al contenido. En este caso, todas estas:

.tabs-inner .widget li a { ... }
.tabs-inner .widget li:last-child a { ... }
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover { ... }

que deberías elimianar.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR