Menu Despeagable

Ayuda Para Tu Web

DanGrecks ~ ˇAyuda WebMaster!

Menu con Circulos despeagables

En este tutorial haremos un tipo Menu con circulos despeagables, muy útil para ahorrar espacio en tu web. Con él se pueden agrupar y ordenar bastantes enlaces internos a modo de mapa del sitio, pero ocupando menos espacio y con un aspecto resultón.

Sólo lleva CSS pero incluye algunos efectos que creo que no tienen nada que envidiar a otros menús que usan librerías JavaScript para plegar y desplegar. Eso sí, en las versiones más antiguas de Internet Explorer, como es habitual, se perderán parte de los efectos como las transiciones que no serán visibles y las curvas que serán rectas, pero igualmente el menú funcionará. Sólo lo notaremos en la cuestión estética. Ver Ejemplo [ Click Aqui ].

Esta sería la estructura HTML. En ella hay que cambiar los javascript:void(); que sólo son enlaces vacíos para la demo, por las direcciones de destino que queráis, al igual que hay que hacer con los rótulos principales (entre h5) y las palabras que harán de enlace.


Los enlaces sin contenido y con clases red1red2, etc. son las que generan los iconos que se ven de primeras y en realidad son unos fondos que podemos fijar desde el CSS con los iconos o dibujos que queramos. El código está ajustado para unos de 32x32px y es el siguiente:

Esta última parte la podréis añadir delante o detrás del código HTML, pero si se pone directamente en la hoja de estilo, no olvides quitarle las etiquetas style que hay al principio y al final.

Este fue todo el Tutorial, espero que les haya ayudado y les sirva para algo, Saludos.



Copyright © 2009-2013| DanGrecks | by AnGrecK

En DanGrecks nos encargamos de que todos los usuarios puedan encontrar lo que están buscando fácilmente.





DanGrecks esta Hostiado en Paginawebgratis.es. Lo Recomendamos para registrar su sitio web Totalmente Grátis.





Todos los Derechos reservados a sus respectivos Dueños. Página creada y editada por AnGrecK.





Volver Arriba ↑

=> ¿Desea una página web gratis? Pues, haz clic aquí! <=