Menú con círculos desplegables | Oloblogger Como por aquí casi que estamos de vacaciones, hoy os pongo sólo un código simple de esos de copiar y...

4 de julio de 2013

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.



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(http://2.bp.blogspot.com/-BLOpL79hRq0/UdNeyumjXYI/AAAAAAAAK7E/4gCBEFR4JRk/s32/home.png) no-repeat;}
a.red2 {background:url(http://2.bp.blogspot.com/-rvP0hlwHzEk/UdNeoq9rEgI/AAAAAAAAK60/Nq_kzwUPiFY/s32/info.png) no-repeat;}
a.red3 {background:url(http://2.bp.blogspot.com/-5H9SkAxPuXQ/UdNep8XWLzI/AAAAAAAAK68/BkXJ4YvmGOg/s32/redes.png) no-repeat;}
a.red4 {background:url(http://4.bp.blogspot.com/-kyZIdwOjJmI/UdNen_SC6dI/AAAAAAAAK6s/BpmHTKLYkNg/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
Copy URL

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

follow us in feedly

44 comentarios :

  1. Muy bonito y ordenado, saludos Oloman.

    ResponderEliminar
  2. Cheverisimo!!
    gracias Oloman

    ResponderEliminar
  3. donde puedo encontrar mas iconos de la misma color, para seguir implementando mas mi menu

    ResponderEliminar
    Respuestas
    1. En Internet, Rafael, en Internet.

      Yo hice una búsqueda y esos naranja fueron los primeros que encontré. Busca "iconos redondos naranja" y seguro que encuentras alguna colección que te cuadre.

      Eliminar
    2. Oloman, lose, a que me referecia es que me dijeras (si se puede) la pagina web de donde copiastes los iconos ps, saludos y gracias....

      Eliminar
    3. Los encontré tal y como te dije y asímismo los he vuelto a encontrar ;)

      http://www.freestockphotos.biz/stockphoto/16644

      Eliminar
  4. Precioso aporte ^_^ Oloman.

    Consulta ¿ Hay posibilidad de poser solicitarte una pequeña y enorme ayudita, o mejor dicho un pedido ♥. (No existe tutorial a lo que deseo),

    Saludos y Precioso Tema.

    PD: Deseo extraer un container de un template y poder aplicarlo en un gadget.

    ResponderEliminar
    Respuestas
    1. Arriba a la derecha: Oloblogger low cost ;) Pero explica con más detalle en el formulario lo que quieres, porque de la forma en que lo has descrito no lo entiendo.

      Eliminar
  5. Gracias Oloman, excelente aporte. saludos.

    ResponderEliminar
  6. Niquelao. Me ha resuelto el dilema de un nuevo menú- cosa que no me interesaba- y/o implementar varios widgets en una caja con cantidad ingente de info. ¡GRACIAS!
    Echa un ojo> http://morgan82000.blogspot.com

    ResponderEliminar
    Respuestas
    1. Lo único es que yo lo movería encima del cuerpo de las entradas, pues en tu barra lateral hay poco espacio para esta gadget ;)

      Eliminar
  7. oie esta genial esto... pero para ponerlo en mi blog... como lo hago? (no soy taaaaan avanzada que digamos en esto de html de los blogs... >< de echo... he echo bastantes cosas dependiendo de tu blog >< y de ciudadblogger... y demases) pero esto de verdad quier agregarlo al blog.. para poner los iconos de seguidores, facebook, bloglovin y etc... se puede hacer para que queden flotando en una esquina del blog?

    ResponderEliminar
  8. olvide poner el link del blog: http://elsecretodelabuenalectura.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Hola. Sólo tienes que tomar los dos trozos de código y ponerlos uno a continuación de otro en un gadget tipo HTML/Javascript. Encima del cuerpo de entradas creo que es el mejor lugar para que tengan un ancho suficiente.

      Eliminar
  9. Muy buen menú. Se ve bastante bien.

    ResponderEliminar
  10. Oloman,

    No se si es el lugar correcto para hacerlo, pero quiero pedirte una gran ayuda.

    No se como hacer para que el menú de navegación de mi Blog (qtdpremama.blogspot.com) esté alineado a la izquierda y además como modificar la altura.

    Por favor, puedes ayudarme?
    Gracias

    ResponderEliminar
    Respuestas
    1. Ve a tu CSS, busca el selector #top-wrapper y añádele un height: 44px;

      Y para que se vaya a la izquierda no lo veo fácil. Quizás algún script la centra porque a bote pronto no pude modificarlo con CSS. De todas formas ¿no te gusta más centrado? :) Es que eso es lo difícil normalmente.

      Eliminar
  11. Oloman,

    mira lo que me hace cuando le pongo un height: 44px; (http://3.bp.blogspot.com/-mdOWv20Ijs8/Uh0Dwthz-6I/AAAAAAAAB9g/J2ztPq3FdYo/s1600/sshot-1.png) no solo me desplaza el menú sino también la siguiente línea.

    En cuanto a alinearlo a la izquierda, antes lo tenía y no se porque ahora está centrado.

    Ojalá puedas ayudarme.
    Gracias

    ResponderEliminar
    Respuestas
    1. Vale, ya lo tengo. El problema viene de más arriba. La cabecera es la que provoca todos los problemas. En lugar de lo que te dije, añade al selector #header-wrapper un overflow: hidden;

      Ya me estaba volviendo loco :)

      Eliminar
  12. Si señor!!!, era eso. Además de ajustarse el alto, ya queda todo alineado correctamente.

    Eres un genio, y que gran ayuda me has dado.
    Gracias nuevamente.

    ResponderEliminar
    Respuestas
    1. Vale, pues en agradecimiento a partir de ahora usarás el botón Responder cuando comentes en este blog, que vas abriendo hilos uno tras otro y siempre me lio contigo :)

      Eliminar
    2. Ningún problema. Así lo haré

      Eliminar
  13. Ya sabes que ando remodelando la pagina para que luzca mas llamativa, quite el menu que tenia y le puse este pero tengo dos dudas que no he podido resolver, la primera, como hago para que se despliege hacia el lado contrario? y segundo, le agrege un quinto icono de buscar y sale perfecto pero no cumple su funcion, no se que hice mal (cuando estaba empezando con esta pagina hace dos meses le quite el buscador por completo, no se si borre algun codigo que debia estar para esta funcion, me enseñas donde puedo buscar que esta mal?) ya sabes como me gusta que me enseñes a pescar en lugar de que me des el pescadito frito, jejeje. Abrazos.

    ResponderEliminar
  14. ¿Para el lado contrario? Si te fijas bien, al poner el puntero sobre un círculo, este se expande hacia ambos lados simultáneamente. Si no mueves el puntero te darás cuenta que una vez abierto sigue en el centro del óvalo (el círculo ampliado).

    Lo del buscador no sé cómo lo pretendes hacer. Si es metiendo una caja sencilla dentro de esos botones podrías usar el código que mostré en esta entrada

    ResponderEliminar
    Respuestas
    1. Por cierto, un chiste que me contaron el otro día al hilo de tu comentario sobre la pesca:
      "Dale a un hombre un pescado y comerá un día. Dale una caña... y te pedirá una tapa".

      Traducción para no españoles:
      Caña: Vaso de forma cilíndrica o ligeramente cónica, alto y estrecho, que se usa para beber vino o cerveza
      Tapa: Pequeña porción de algún alimento que se sirve como acompañamiento de una bebida

      Eliminar
  15. Si lo quiero poner vertical como seria?

    ResponderEliminar
    Respuestas
    1. Ese es el camino fácil Luis Daniel :)

      Simplemente quítale a ul.menured li en el CSS, la regla display: inline-block;

      Eliminar
  16. Y una pregunta que seguramente sea un poco tonta... de una imagen con 1 colección de iconos como la que tienes... ¿cómo o con que programa los extraes 1 a 1 de la imagen? Gracias de antemano

    ResponderEliminar
    Respuestas
    1. Pues si no vienen con transparencia, es complicado que te queden bien, pues tendrías que recortarlos con un programa de edición de imágenes y lo que peor suele quedar es el fondo recortado. Lo mejor es busques algunos iconos que vengan ya individuales o con un color de fondo que te cuadre.

      Eliminar
  17. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  18. Amigo borré los comments porque resolví las pavadas que te pregunté. Ahora quiero preguntarte algo dificil.
    Como veras en elcielodekampa.com
    Puse esta barrita y estoy tratando de poner todas las paginas por lo que eliminé la barra de paginas. Esto hizo que se elimine el menú en la vista para moviles (donde esta barrita no se ve). Como hago para poner nuevamente el menu de paginas en la vista de movil sin agregar la barra en la vista para pc?
    Gracias!

    ResponderEliminar
  19. Hubiera sido mejor que te autocontestaras en lugar de borrar, porque seguro que otro/s tendrán la misma duda, pero en fin.

    Restaura el gadget y luego usa una condición para que se oculte en la versión web. Esta entrada seguro que te será útil.

    ResponderEliminar
  20. Tenes razon y te pido disculpas.
    Entonces lo que hago es ir al codigo y en el gadget de pagelist le pongo mobile=yes y listo.?
    Otra cosa curiosa: si ves en mi blog: elcielodekampa.com yo puse este menu en la parte de las entradas porque si lo ponia arriba, donde va el menu de paginas, el gadget se deforma, se hace cuadrado y pierde toda la estetica... Sabes por que se da esto?

    ResponderEliminar
    Respuestas
    1. En un principio sí. Es que ese post no es mío como habrás podido comprobar y no conozco bien el tema.

      Sobre lo otro del menú, lo tendría que ver para tener alguna idea...

      Eliminar
  21. Ya lo cambiaré cuando esté en una pc y te aviso.
    Una dudilla mas.
    A veces cuando publico material (lo hago siempre igual: intro + imagen y luego salto de linea) en algunos articulos, en la version movil, no me muestra la imagen... Pir que se da esto?

    ResponderEliminar
    Respuestas
    1. Kampa, me pillas en todas... No tengo ni idea.

      Bueno, mientras pensaba un poco antes de Publicar esta respuesta, creo que lo he encontrado. Te pasa con las imágenes que no subes a Blogger sino que enlazas directamente desde otros servicios. Prueba a cambiar eso en la 4º y 7º parte de tus últimos posts que están en ese caso y... suerte ;)

      Eliminar
  22. Como siempre Oloman, excelente ayuda

    ResponderEliminar
  23. Estoy armando mi web (de momento, privada) y quiero poner este menú en la página de inicio. ¿Dónde coloco los códigos, los dos, que has puesto en citas?

    ResponderEliminar
    Respuestas
    1. Hola Gato
      En tu caso lo más fácil sería ponerlo todo junto (uno a continuación del otro), dentro de un gadget tipo HTML/JavaScript y luego mover ese gadget a la parte superior del bloque de las entradas o bajo la cabecera.

      Eliminar
  24. Buen día, muy bueno el efecto, pero tengo una duda si se quieren hacer más grande los circulo, que se tendría que modificar para que el efecto sea el mismo. Gracias

    ResponderEliminar
    Respuestas
    1. Pues serían muchas cosas porque habría que hacer incluso unas imágenes nuevas para los iconos, pero de mayor tamaño. Para empezar habría que cambiar los width y height de los distintos elementos y luego seguramente, además de lo dicho para las imágenes, seguramente también habría que cambiar alguna cosilla más.

      Te sugiero que uses Codepen para copiar allí este código y sobre él, ir probando las modificaciones que necesitas.

      Eliminar
  25. Hola Oloman!
    Tanto tiempo...espero te encuentres muy bien!
    Estoy con ganas de armar una tienda on line usando blogger...me podras orientar con algun tutorial que tengas?...y despues queria subir la misma a facebook. Se podes orientarme con estas 2 cuestiones seria de una gran ayuda...muchas gracias y un gran abrazo!!!

    ResponderEliminar
    Respuestas
    1. Hola Gabriel. Sólo tienes que buscar "tienda" en mi buscador y te aparecerán un montón de tutoriales sobre la única que conozco para Blogger, sin ayuda de ningún servicio externo. Sin embargo ya no atiendo consultas sobre ella, así que si te sirve sólo con lo ya publicado y comentado...
      Por otra parte creo que no hay tiendas para Facebook.

      Eliminar