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 red1, red2, 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.
