Un par de menús con efectos. En horizontal y en vertical | Oloblogger Un menú para poder acceder rápidamente desde un solo elemento a otras páginas o secciones importante...

17 de junio de 2014

Un par de menús con efectos. En horizontal y en vertical

Un menú para poder acceder rápidamente desde un solo elemento a otras páginas o secciones importantes, es algo casi indispensable en cualquier sitio web que tenga un mínimo de contenido.

Pero como con los colores (los que visualizan los humanos normales), versiones hay tantas como personas multiplicadas por gustos. Por aquí ya hemos publicado algunas decenas, pero seguro que más de uno todavía no ha encontrado ese que le acaba de cuadrar del todo.

Para ellos y siempre planteándolos sólo como base para modificar según la conveniencia de cada cual, aquí van un par que utilizan transiciones para incorporar efectos de "movimiento" con transiciones CSS. Ambos dos son variaciones de otros vistos anteriormente.

2 menús con efectos


Rectángulos grandes con la fuente de iconos Awesome


Este lo he visto por un par de sitios últimamente, pero estaba hecho con imágenes. En su momento vimos una fuente que permitía añadir iconos mediante una fuente "trucada" para que las letras no fueran tales sino dibujos escalables y que podían ser tratados con propiedades reservadas para texto (bold, font-size, color, etc.). Era la fuente Awesome.

Para ejemplarizar su uso presenté un menú muy similar a este pero mucho más sencillo de aspecto; apenas una palabra y un icono para cada elemento, sin ninguna cosa más.

No es que le haya añadido mucho más... unos bordes redondos y un cambio de escala para el hover, pero con poco a veces las cosas cambian mucho.

Para probar:



Para añadirlo en un gadget tipo HTML/JavaScript (bajo la cabecera parece el mejor sitio), sólo tenéis que copiar y pegar lo siguiente. Si hay alguna duda sobre su funcionamiento, sólo tenéis que decirlo en los comentarios.

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
<div class="menuicon">
<a href="#">
<div class="fa fa-bug"></div>
<div class="title">My blog</div>
</a>
<a href="#">
<div class="fa fa-user"></div>
<div class="title">About</div>
</a>
<a href="#">
<div class="fa fa-camera"></div>
<div class="title">Portfolio</div>
</a>
<a href="#">
<div class="fa fa-search"></div>
<div class="title">Search</div>
</a>
<a href="#">
<div class="fa fa-envelope"></div>
<div class="title">Contact</div>
</a>
</div>
<style>
.menuicon {text-align: center; font-size: 0;}
.menuicon a {position: relative; display: inline-block; *display: inline; zoom: 1; width: 100px; height: 120px; text-align: center; color: PaleGoldenrod; text-shadow: 1px 1px 0 DarkGoldenrod; text-decoration: none; background: #D3AE4E; vertical-align: top; -webkit-transition: .3s all; -moz-transition: .3s all; transition: .3s all;}
.menuicon a .fa {position: relative; top: 10px; padding: 10px; border-radius: 200px; border: 2px solid white; font-size: 40px;}
.menuicon a .title {font-size: 20px; line-height: 60px;}
.menuicon a:hover {-webkit-transform: scale(0.90,0.90); -moz-transform: scale(0.90,0.90); transform: scale(0.90,0.90);}
.menuicon a:nth-of-type(odd) {background: #BF9830;}
.menuicon a:first-child {background: #A67900; width: 200px;}
.menuicon a:first-child .fa {border: 0; font-size: 60px;}
.menuicon a:first-child .title {font-size: 30px; line-height: 20px; font-style: italic;}
</style>

En la primera parte del código (HTML), los div con clases fa marcan el icono que se debe mostrar, siguiendo el catálogo de los disponibles con Awesome.

En la segunda (CSS) sólo destacar que de las cuatro últimas reglas, la primera es para que los elementos impares tengan un color de fondo distinto y las tres siguientes para cambiar el tamaño y asimismo el fondo del primer elemento.

El resto son reglas habituales y cambiando background y color de los selectores que los lleven, podréis integrar el menú totalmente con vuestro diseño.

Para que hagáis experimentos he preparado también un Codepen.


En vertical con una marca de selección deslizante


También vimos anteriormente tres de este tipo pero con disposición horizontal.

El elemento seleccionado se va a ver con un cambio de color de fondo, pero en lugar de ser un simple background que cambia de golpe, el color será realmente un bloque independiente que bajará de manera progresiva desplazándose hasta el elemento.

Otra vez para probar:




También como antes, os doy el código preparado para copiar y pegar en un gadget. En este caso, por ser más alto que ancho, parece que el sitio idóneo sería la barra lateral.

<div class="menudes">
<a href="#">Inicio</a>
<a href="#">Pintura</a>
<a href="#">Escultura</a>
<a href="#">Grabados</a>
<a href="#">Música</a>
<a href="#">Danza</a>
<a href="#">Acerca de</a>
<a href="#">Contacto</a>
<div class="marca"></div>
</div>
<style>
.menudes {
position: relative;
overflow: hidden;
width: 200px;
margin: 10px auto 10px;
background: #000;
text-align:center;
font-size: 0;
}
.menudes a {
display: block;
padding: 8px;
border-bottom: 2px solid #fff;
position: relative;
z-index: 2;
color: white;
text-decoration: none;
font-size: 14px;
text-transform: uppercase;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
font-family: arial;
font-weight: bold;
}
.marca {
position: absolute;
top: -30%;
left: 0;
width: 100%;
height: 12.5%;
background: orange;
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
z-index: 1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.menudes a:hover {color: #000;}
.menudes a:nth-child(1):hover ~ .marca {top: 0%;}
.menudes a:nth-child(2):hover ~ .marca {top: 12.5%%;} /* (100/nº elementos)x1 */
.menudes a:nth-child(3):hover ~ .marca {top: 25%;} /* (100/nº elementos)x2 */
.menudes a:nth-child(4):hover ~ .marca {top: 37.5%;} /* (100/nº elementos)x3 */
.menudes a:nth-child(5):hover ~ .marca {top: 50%;}
.menudes a:nth-child(6):hover ~ .marca {top: 62.5%;}
.menudes a:nth-child(7):hover ~ .marca {top: 75%;}
.menudes a:nth-child(8):hover ~ .marca {top: 87.5%;}
</style>


Aquí lo destacable son las últimas líneas del CSS que lo que hacen es situar el rectángulo naranja (.marca) que inicialmente está desplazado por arriba fuera de la zona visible (top: -30px;), dentro del menú y en concreto a la altura del elemento correspondiente.

El top en tanto por ciento para el elemento n tiene que ser el que salga de la fórmula (100/nºtotal elementos) * (n+1), así que eso hay que cambiarlo si la cantidad de elementos de vuestro menú son más o menos de 8, que son los que yo usé para el ejemplo.

En el anterior post sobre este tipo de menús lo expliqué con más detalle para el que necesite más aclaraciones.

Otro Codepen para pruebas con este último tipo de menú.


Y bueno, los de BPT que no olviden cambiar los símbolos # por las direcciones de destino que corresponda, que en las demo están así por innecesarios.

¿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

39 comentarios :

  1. ¡Genial Oloman! Una cosa, fijate en el código del segundo menú, en .menudes a:nth-child(2):hover pusiste dos "%" y no funciona bien, saludos!

    ResponderEliminar
    Respuestas
    1. OK. Visto y corregido. Muchas gracias Julián

      Eliminar
  2. Me ha gustado el primer tipo. Luce bien y podría quedar bien en mis blogs. Realizaré algunas pruebas para ver que tal.

    ResponderEliminar
  3. Muchas Gracias Oloman por este gran aporte, estoy utilizando el segundo y se ve genial en mi blog.

    Saludos desde México.

    ResponderEliminar
  4. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
    Respuestas
    1. No sé de qué tipo de menú me hablas Alex, pero es que tampoco sé en qué blog lo tienes puesto y eso es imprescindible para saber cómo lo montaste.

      Eliminar
  5. Que tal

    Fantastico lo he incorporado en mis dos webs y queda de muerte.

    Un saludo

    ResponderEliminar
  6. Muy interesante para colocarlo en blog

    ResponderEliminar
  7. Hola, no me cambia de color al poner el cursor se desaparece en negro el texto que puede ser

    ResponderEliminar
    Respuestas
    1. No sé. Podrían ser varias cosas ¿dónde lo tienes puesto?

      Eliminar
  8. Holaaa, lo he puesto en mi blog pero hay una cosilla que necesito arreglar con tu ayuda, el rectangulo naranja no me queda centrado, coge dos lineas y no queda centrado y otra cosa como puedo quitar que quede en mayusculas?

    un saludo

    ResponderEliminar
    Respuestas
    1. En las últimas líneas del post explico como ajustar eso dependiendo del número de elementos que tenga el menú. El del ejemplo tiene 8 y el tuyo 9, por eso no cuadra. Si quitas un enlace verás que sale perfecto, pero si los necesitas todos relee esa parte que te dije.

      Eliminar
  9. Hola, en mi blog las letras del menu (2) no son blancas, cual sera el problema?

    ResponderEliminar
    Respuestas
    1. Pues es que tienes un selector que "machaca" el color que puse en el código del ejemplo para el enlace. Es este:
      .sidebar .widget a:link {
      color: #3778cd;
      }

      Para anularlo añade a tu CSS esto otro:
      .sidebar .widget .menudes a:link {
      color: white;
      text-decoration: none;
      }
      Lo del text-decoration es un regalito ;)

      Eliminar
    2. Lo hice pero sigue sin haber cambios. Igualmente gracias!

      Eliminar
    3. OK. Pero antes de rendirte del todo prueba lo mismo con:
      color: white !important;

      Eliminar
  10. Muchas gracias, Oloman. He aplicado el código para el segundo menú vertical que propones y se ve estupendo en mi blog, pero hay algunas preguntasque me quedan pendientes:

    En primer lugar, ¿es posible encajar este menú vertical justo debajo de la cabecera del blog?

    En segundo lugar, el fondo de mis gadget es supuestamente transparente pero siempre se ve el contorno.No sé cómo corregir este problema, más que nada porque el ancho de este menú es superior al del marco "transparente" y no quiero que el menú pierda propiedad.

    Y en tercer lugar, desconozco cómo enlazar cada entrada a una pestaña específica del menú.

    Probablemente sean preguntas básicas, pero quiero dar una vuelta importante de imagen al blog y se me abren tantas posibilidades y tan desconocidas... Gracias de antemano.

    ResponderEliminar
    Respuestas
    1. Con enlazar cada entrada a una pestaña específica del menú, me refiero a enlazar varias entradas a la misma pestaña de un menú. Creo que no supe explicar bien.

      Eliminar
    2. Hola Lucía. Como he tardado en contestar, ya veo que encontraste la manera de poner el menú vertical en tu barra lateral, bajo la cabecera.

      Para la segunda cuestión sólo tienes que buscar en tu plantilla el selector .main-inner .widget y quitar de él los tres box-shadow que tienes... pero cópialos en algún sitio para poder reponerlos porque quizás cuando veas como queda descubrirás que te realmente te gusta más la versión inicial ;)

      Y por último, para enlazar varias entradas a una misma pestaña tienes que usar etiquetas en tus posts. Si es así, la dirección de enlace sería con este formato:
      http://mensicorpore.blogspot.com/search/label/ETIQUETA
      ...sustituyendo ETIQUETA por la que quieras mostrar.

      Eliminar
    3. Me ha servido de gran ayuda y el resultado me parece atractivo. A continuar con más modificaciones... Muchas gracias, Oloman!

      Eliminar
  11. Buenos días Oloman,

    ¿Habría alguna manera de colocar el menú vertical que propones debajo de la cabecera del blog y en sentido horizontal? Me gusta mucho el efecto que realiza, pero quizás gano mucho más espacio para contenido de esa manera.

    ResponderEliminar
    Respuestas
    1. Jajaja... Si ponemos el menú vertical en horizontal, ya no sería un menú vertical. Es que son códigos muy distintos.

      Algo parecido a lo que quieres quizás sea lo que encontrarás en este otro post.

      Eliminar
    2. Me gusta más este tipo de menú, pero cuando copio el código en el gadget HTML/Javascript que hay debajo de la cabecera (crosscol) siempre me sale en vertical y, es más, me aparece un fondo gris que no sé cómo eliminar. Gracias por toda la ayuda prestada. ;)

      Eliminar
    3. Me he despistado Lucía. Ahora mismo veo un menú horizontal, con un sistema parecido -o igual- al de este post.
      Lo que decías al principio es que te gustaría colocar el vertical bajo la cabecera pero en sentido horizontal. Eso no lo hace ningún menú vertical (por definición), así que te he remitido a otro que sí que es en horizontal, pero con el efecto del que aquí se ve en vertical ¿no era eso lo que querías?
      Ahora dices que te gusta más "este tipo de menú", pero aquí hay dos y de verdad que ya me he liado. Si te sale siempre en vertical es porque lo has elegido vertical ¿?
      Si pudieras explicarme con más detalle qué quieres, dónde lo tienes puesto y qué problemas tienes, quizás podría ayudarte, pero como decía, ahora mismo estoy hecho un lío...

      Eliminar
    4. Hola Oloman, perdona que te haya despistado tanto.

      Efectivamente buscaba el mismo sistema del menú vertical pero en sentido horizontal. He estado probando a insertar alguno de los menús que aparecen en el link que me indicaste pero, aún así, siempre aparecían en sentido vertical debajo de la cabecera. No se exactamente porqué si, tal como se muestra, es un menú horizontal.

      Así que como me interesaba un menú horizontal decidí hacer pruebas con el mismo que aparece en esta página, sin atraerme en principio demasiado. Y tras modificar un poco el código, conseguí lo que pretendía. Estoy más satisfecha ahora con el menú.

      Reitero mis disculpas. Y muchas gracias por toda la ayuda prestada.

      Eliminar
    5. Bien, pues entonces tema cerrado. De nada ;)

      Eliminar
  12. Hola Oloman.
    He usado la fuente awesome para poner un pequeño icono antes del texto de cada elemento de mi menú vertical. Algo como esto:
    icono | Inicio
    icono | Patrocinadores
    icono | Enlaces
    Y así sucesivamente, pero me gustaría que pareciera como si los botones estuvieran divididos en dos partes independientes, la del icono y la del texto, aunque siguieran siendo un mismo botón, porque hay algo que no me gusta nada y es que si alineo center, al tomar tanto el awesome como el resto de texto, los iconos quean desalineados y si lo hago con align right o left se queda todo también muy feo pues aunque los iconos quedan en linea los textos mas largos hacen que los cortos queden con mucho espacio en blanco en el lateral.
    Había pensado que quizá se podría dividir en dos cada botón, de manera que se asignara al lado izquierdo de cada botón un apartado del 20% en el que estuviera centrado el icono awesome y otro apartado de botón que ocupara un 80% en el que estuviera centrado el texto, de forma que los iconos salieran todos alineados entre sí y el resto centrado y así no quedaría tanto espacio libre entre el texto de un botón y el del siguiente.
    Estoy intentando hacerlo con una tabla en cada botón, pero no me sale ¿alguna ayuda sobre cómo hacerlo?

    ResponderEliminar
    Respuestas
    1. De tablas nada ;)
      Prueba a alinear a la izquierda y a añadir esto:
      .fa {
      width: 30px;
      }

      Eliminar
    2. Lo he probado y se queda un pelín regular, porque aunque ahora me salen los iconos en la izquierda y les deja un espacio de 30 hasta llegar al texto, al ser una barra lateral muy pequeña esta solución me descuadra las partes del menú con nombres mas largos pues las pone en dos líneas.
      Supongo que es cuestión de intentar probar con esta opción, con distintos px y si acaso, añadirle algún que otro atributo, aunque me temo que me lo va a aplicar a todos los fa-fa que ponga, así que creo que lo voy a dejar como está, que tampoco es que tenga mucha importancia, salvo la estética.
      Gracias por la tomarte la molestia.
      Un saludo.

      Eliminar
    3. Pues úsalo sólo para los fa de ese menú:
      #main-menu .fa {width: 30px;}

      Eliminar
  13. Que bueno el menú vertical, estaría súper que se pudieran agregar submenúes deslizables dentro de cada item o categoría del menú...¿es muy complicado eso?...

    ResponderEliminar
    Respuestas
    1. No se me ocurre cómo podría verse eso Óscar. Y no me refiero al código que siempre es posible de desarrollar de una manera u otra, sino que no imagino cómo hacer subcategorías en el menú vertical. Si por ejemplo van en una barra lateral, ocupando todo el ancho ¿dónde se vería el submenú? ¿por fuera de la pantalla?

      Eliminar
  14. Gracias por tu respuesta...

    Aquí te paso algo para que veas a que me refiero...

    http://www.summarg.com/2012/menu-vertical-con-efecto-acordeon-con-jquery-muy-liviano/

    Yo estoy armando un blog y me gustó mucho el menú que tu hiciste..., luego tendré que cambiarle los colores para que quede dentro de la gama de colores de mi blog...

    Link del Blog en construcción:

    http://hogarmaxmuebles.blogspot.com.ar/

    ResponderEliminar
    Respuestas
    1. Vale. Ya entendí. Quieres acoplar este efecto a un menú acordeón.
      El problema es que esto es sólo CSS y no sería posible predecir cuán largo es el espacio que se abre entre dos opciones principales cuando una de ellas se despliega y esa es la base de todo el sistema. por Por eso te preguntaba qué dónde ibas a desplegar, ya que la única posibilidad para que sirviera es menú principal fijo y los desplegables a un lado u otro.
      Quizás con jQuery sería más fácil, pero eso ya no tendría nada que ver con esto.

      Eliminar
  15. Un buen artilugio, los usé en un tiempo, dasn bastante estética y dinamismo al blog. pero bien ahora estoy enfocado en otros puntos para mejorar mi seo on page. miraré en que os puedo ayudar en esto.

    ResponderEliminar
  16. Hola Oloman, muchas gracias por el codigo, estoy utilizando el menu horizontal y tengo un pequeño problema, cuando trato de cambiar los iconos Awesome por otros no me aparece nada, estoy utilizando los iconos que tu adjuntaste en la pagina "http://fontawesome.io/icons/". Lo que hago es cambiar por ejemplo class="fa fa-search" por class="fa fa-bars", fa-bars esta en la pagina "http://fontawesome.io/icons/", de antemano gracias por la ayuda.

    ResponderEliminar
    Respuestas
    1. ya encontré la solución solo hay que solicitar acceso, adjunto el link para el que tenga el mismo problema
      http://fontawesome.io/get-started/#get-started-cdn

      Eliminar
    2. Gracias por compartirlo Jonathan, porque no sabía había que solicitar acceso.

      Eliminar