Menú con círculos desplegables

Como por aquí casi que estamos de vacaciones, hoy os pongo sólo un código simple de esos de copiar y pegar, con el que podréis construir un menú de círculos desplegables. 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.


Y sin más preámbulo la demo y a continuación el código, al que como siempre podéis añadir la sal que queráis añadiendo selectores y/o cambiando valores, para conseguir un plato de vuestro total gusto.

• Para empezar

  InicioPortfolio

• Información

  Sobre nosotrosProyectos

• En redes

  TwitterFacebookGoogle+

• Contacto

  eMailFormularioLocalización

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. Todo eso lo he marcado en verde.

<ul class="menured">
 <li>
  <a class="red1"></a>
  <div>
   <h5>Para empezar</h5>
   <a href="javascript:void();">Inicio</a>
   <a href="javascript:void();">Portfolio</a>
  </div>
 </li>
 <li>
  <a class="red2"></a>
  <div>
   <h5>Información</h5>
   <a href="javascript:void();">Sobre nosotros</a>
   <a href="javascript:void();">Proyectos</a>
  </div>
 </li>
 <li>
  <a class="red3"></a>
  <div>
   <h5>En redes</h5>
   <a href="javascript:void();">Twitter</a>
   <a href="javascript:void();">Facebook</a>
   <a href="javascript:void();">Google+</a>
  </div>
 </li>
 <li>
  <a class="red4"></a>
  <div>
   <h5>Contacto</h5>
   <a href="javascript:void();">eMail</a>
   <a href="javascript:void();">Formulario</a>
   <a href="javascript:void();">Localización</a>
  </div>
 </li>
</ul>

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:

<style>
ul.menured * {margin: 0 auto; padding: 0; text-indent: 0;
-moz-transition: all .5s ease-in-out;-webkit-transition: all .5s ease-in-out;transition: all .5s ease-in-out;}

ul.menured {list-style: none; width: 1800px; max-width: 100%; margin: 0 auto; text-align: center;}

ul.menured li {position: relative; display:inline-block; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width:44px; height: 44px; overflow: hidden; margin: 2px; padding: 5px; border-radius: 44px; border: 1px solid transparent; background: #fff;
-moz-box-shadow: 1px 1px 3px #555; -webkit-box-shadow: 1px 1px 3px #555; box-shadow: 1px 1px 3px #555;}

ul.menured li a[class^=red] {position: absolute; top: 5px; left: 5px; display: block;width: 32px;height: 32px; -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);}

a.red1 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd8lk8z78lH_iMwZW5mtY7IKNi4J7a__j24kIW8KOapPvzUiqG40YNqZR1UEErj7DvyFSlskI01EGJChHIh0eU-R8j-lNAs2qxedpriofVqWiwUHt97bzftfP98amJlYs1X49mePfPUe4/s32/home.png) no-repeat;}
a.red2 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMzb8GEhfehK4fVSvFPOyrEaRqsKNy1JNPC04D27AnZz3VdQRo_EqtArHL6BBhyphenhyphenlDi4gJjZa7Ja8vLFdeGM2I-6jOUe_3JYXhw73BbpMI9xsRsSSoCs8r9pcBiiBefLMy1G95v2lZMEqY/s32/info.png) no-repeat;}
a.red3 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkiqVgc90zL2Fg-AbIqzbL1sASM68ez-Y3Rj7DdBz4JnernmqOAUP5IYecEJnS3DEoMzrb4ud4qBfB5ZmfquQqvmBxTyy6imP0MhQrfX9SPnHZ83Jqg8byTPBFdGVlmajMcTecyfE7GsM/s32/redes.png) no-repeat;}
a.red4 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirYbnyKdIxcKgy8is8JV539rU3W0iwqk5O4z2TvT-7UgDHIOV6bMQ1gYDTdC6gt9FMCcxFs38dl4jaa9vXranm__W3xS-vp7iYaAscaPBVmkxC5eT_MROxzneimCiUrD-a3ggs0EitFRk/s32/contacto.png) no-repeat;}

ul.menured li div {margin: 0px 8px 5px 38px; text-align: center;}
ul.menured li div h5 {text-align: left; text-transform: uppercase;}
ul.menured li div a {display: inline;margin: 0 3px;font-size: 12px; color: #F36900;}

ul.menured div a:hover {color: grey;}
ul.menured li:hover {width:240px;}
ul.menured li:hover a[class^=red] {-moz-transform: rotate(720deg); -webkit-transform: rotate(720deg); transform: rotate(720deg);}
</style>

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 olvidéis quitarle las etiquetas style que hay al principio y al final.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter