Menú horizontal con efecto hover deslizante (CSS) | Oloblogger Hoy toca explicar una cosa que vi hace algún tiempo y que le da cierto toque sofisticado a un menú h...

3 de octubre de 2013

Menú horizontal con efecto hover deslizante (CSS)

Hoy toca explicar una cosa que vi hace algún tiempo y que le da cierto toque sofisticado a un menú horizontal simple tipo flat. La cuestión es que con JavaScript (apoyándonos en jQuery) la cosa es sencilla, pero este que os presento -aunque tenga alguna línea más de código- se genera por entero con CSS, así que apuntároslo, especialmente los que seguís sin instalar esa librería para no aumentar la carga del blog.

Menú con marca deslizante

El truco principal ya se deja ver en el HTML que necesitamos. Tras la serie de enlaces de texto metidos dentro de una caja debidamente marcada con un selector ad hoc (menudes), añadimos una caja extra que contendrá el elemento que hará las veces de señal o marca y que será lo que se deslizará hasta el enlace sobre el que pongamos el puntero.

<div class="menudes">
<a href="">Inicio</a>
<a href="">Portfolio</a>
<a href="">Acerca de</a>
<a href="">Contacto</a>
<div class="marca"></div>
</div>

El resto del método se basa simplemente en posicionar de manera absoluta esa marca sobre la lista de enlaces, llevarla fuera del menú con un left negativo y luego con el hover ir moviéndola cambiando el valor de ese left en función del enlace señalado. Como es habitual, con un transition conseguiremos que el efecto no sea brusco, de todo o nada, sino con un movimiento suave.


Para hacer todo eso necesitamos el siguiente estilo, en el que la mayoría de reglas son las comunes a cualquier menú. Lo he redactado en porcentajes para que os valga para cualquier ancho de página y los comentarios sirven para variaciones con cualquier número de elementos del menú, lo cual lo hace casi adaptable (RWD). Sólo haría falta alguna que otra media query para cambiar tamaños de fuentes y listo.

.menudes {
position: relative;
overflow: hidden;
width: 70%;
margin: 10px auto 10px;
border-radius: 8px;
background: #025BA3;
text-align:center;
}
.menudes a {
display: inline-block;
width: 25%; /* 100% dividido por el número de elementos del menú */
box-sizing: border-box;
padding: 10px 5px;
color: #fff;
text-decoration: none;
}
.marca {
position: absolute;
bottom: 4px;
left: -12.5%; /* Al menos 1/2 del ancho de cada enlace */
width: 12.5%; /* 1/2 del ancho de cada enlace */
height: 4px;
background: #fff;
transition: 0.5s ease-in-out;
}
.menudes a:nth-child(1):hover ~ .marca {
left: 6.25%; /* 1/4 Ancho del enlace */
}
.menudes a:nth-child(2):hover ~ .marca {
left: 31.25%; /* 1/4 Ancho del enlace + 1 vez ancho enlace */
}
.menudes a:nth-child(3):hover ~ .marca {
left: 56.25%; /* 1/4 Ancho del enlace + 2 veces ancho enlace */
}
.menudes a:nth-child(4):hover ~ .marca {
left: 81.5%; /* 1/4 Ancho del enlace + 3 veces ancho enlace */
}

Ya decía que todo esto de los porcentajes era para hacerlo más universal, pero en la parte final es dónde está el meollo de eso de mover la marca utilizada, en este caso una simple caja con una anchura de la mitad de la del enlace, 4px de alto y un relleno de fondo blanco. Lo que viene siendo una raya gorda.

En esa parte final veis que hemos usado un símbolo raro que podéis arrancar de vuestro teclado con alt+126 (~) y que es un selector de hermanos no necesariamente adyacentes (para los adyacentes usaríamos +). En este caso hace que las reglas para marca sean ejecutadas siempre que se haga hover en cualquier enlace con clase menudes que además sea hermano de marca.

Por último, para que no sea "cualquier enlace" sino justo el que queremos, simplemente hemos añadido :nth_child(x) para identificar el enlace que se está seleccionando (1, 2, 3, etc.)

Bonito y fácil una vez que se conoce el truco ¿verdad? Veamos el resultado pasando el puntero por estos enlaces:






¿Y qué tal si ajustamos un poco el estilo y hacemos otro tipo de marca? Esta es un rectángulo que ocupa todo el espacio destinado a un enlace. Por no extenderme demasiado sólo apunto los selectores y las reglas principales que habría que cambiar/añadir con respecto a lo anterior:

.menudes a {
border-right: 2px solid #fff;
position: relative;
z-index: 2;
}
.menudes a:last-child {
border-right:2px solid transparent;
}
.marca {
box-sizing: border-box;
position: absolute;
bottom: 0;
left: -30%;
width: 25%;
height: 40px;
background: #fff;
opacity:.5;
transition: 0.5s ease-in-out;
z-index: 1;
}
.menudes a:hover ~ .marca2 {
margin-left: -1px;
}
.menudes a:nth-child(1):hover ~ .marca {
left: 0%;
}
.menudes a:nth-child(2):hover ~ .marca {
left: 25%; /* 1/4 del ancho total */
}
.menudes a:nth-child(3):hover ~ .marca {
left: 50%; /* 2/4 del ancho total */
}
.menudes a:nth-child(4):hover ~ .marca {
left: 75%; /* 3/4 del ancho total */
}





Y por último algo similar a lo anterior pero sólo con un borde volantero como marca. Este sí lo pongo entero para que veáis como se hace con más enlaces en el menú.

.menudes {
position: relative;
overflow: hidden;
width: 100%;
margin: 0 auto 10px;
text-align:center;
}
.menudes a {
display: inline-block;
width: 20%; /* 100% dividido por el número de elementos */
box-sizing: border-box;
padding: 10px 5px;
color: #000;
background: #ccc;
opacity:.5;
text-decoration: none;
font-weight:bold;
text-align: center;
border-right: 2px solid #fff;
position:relative;
z-index:2;
}
.menudes a:first-child {
border-left: 1px solid #fff;
}
.marca {
position: absolute;
width: 20%;
height: 38px;
box-sizing: border-box;
bottom: 0;
left: -30%;
border: 2px solid #990000;
transition: 0.5s ease-in-out;
z-index:1;
}
.menudes a:hover ~ .marca {
margin-left: -1px;
}
.menudes a:nth-child(1):hover ~ .marca {
left: 0%;
}
.menudes a:nth-child(2):hover ~ .marca {
left: 20%; /* 1/5 del ancho total */
}
.menudes a:nth-child(3):hover ~ .marca {
left: 40%; /* 2/5 del ancho total */
}
.menudes a:nth-child(4):hover ~ .marca {
left: 60%; /* 3/5 del ancho total */
}
.menudes a:nth-child(5):hover ~ .marca {
left: 80%; /* 4/5 del ancho total */
}


Actualización

El código adaptado para menús construídos con listas en CodePen

¿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

85 comentarios :

  1. Hola, Oloman. ¿Podrías explicarme cómo eliminar ese borde (o sombra) que aparece en el pie de las entradas, debajo del 'publicado por'? Es que puesto el separador negro entre las entradas y no me gusta el efecto que hace la otra rayita gris. Gracias.

    ResponderEliminar
    Respuestas
    1. Busca esto en tu plantilla y quítale la línea que empieza por "border-bottom":
      .post-footer {
      margin: 20px -2px 0;
      padding: 5px 10px;
      color: #7a7a7a;
      background-color: #fdfdfd;
      border-bottom: 1px solid #f2f2f2;
      line-height: 1.6;
      font-size: 90%;
      }

      Eliminar
  2. Hola , Oloman he visto tu video y como tu mismo dices yo soy una Blogger para Torpes, me gustaria que me ayudaras a cambiar la imagen de mi blogspot.Es la primera vez que me hago uno y de verdad no me ha salido bien.Quiero cambiarlo con tu ayuda y que tenga mas vista y poder administralo yo si tu me ayudas,poner una plantilla bonita con lo que yo hago ,porque empiezo ahora, y que la gente se lo encuentre facil a la hora de entrar en el, necesito tu ayuda porque esta fatal tu mis mo le puedes echar un vistazo aqui te dejo la direccion porque no se corregirlo desde blogger. cucaditasdesaluta1965.blogspot.com y quitar 1965 dejarlo solo en cucaditasdesaluta necesito tu ayuda urgente gracias. Mi correo es este cucaditasdesaluta@gmail.com o restaurarmelo tu por favor si quieres ablamos en privado y te cuento mas un saludo y gracias

    ResponderEliminar
    Respuestas
    1. Reconstruir un blog no es objeto de este blog. Te puedo ayudar en una cosa puntual, pero no en todo lo que pides.

      Empieza por ir al Diseñador de plantillas y verás que desde ahí puedes cambiar muchas cosas, incluida la imagen de fondo.

      Eliminar
  3. Hola Oloman, estan genial los menus. Pero yo acudo a ti con el motivo de que me ayudes con un problema, aver, yo tenia un blog, ahora me echo uno nuevo y para no perder a mis visitantes utilize el codigo de redireccionamiento que tu seguramente sabras cual es... pues eso, el problema esta en que al blog viejo tarda mucho en redireccionar, es decir, que primero carga el blog viejo y cuando ya esta listo entonces redirecciona al blog nuevo, puedes verlo tu mismo metiendote tu mismo en el blog viejo(cinemaunivers.blogspot.com). La pregunta es, como hacer que el blog viejo no cargue sino que directamente redireccione al nuevo? es solo para que los visitantes no vean la vieja plantilla q no sirve para nada ya, espero que me ayudes. Gracias y Saludos :)

    ResponderEliminar
    Respuestas
    1. El blog está eliminado, así que supongo que ya no necesitas esto. Un aviso para que no tuviera que meterme a ver el sitio y contestarte en este sentido, hubiera sido de agradecer.

      Eliminar
  4. Gracias Oloman, necesito usar este mismo menu pero para una plantilla de joomla, pudieras enseñar el efecto usando una lista desordenada con sus elementos es decir usando las etiquetas:< ul > < li>. Por favor lo necesito urgente.

    ResponderEliminar
    Respuestas
    1. La solución es NO hacer una lista, sino usar DIV como hice en el ejemplo. Joomla lo admite perfectamente. Es HTML básico.

      Eliminar
  5. Muy bueno. Muchas gracias.

    ResponderEliminar
  6. Hola oloman anteriormente me has ayudado con lo de las twitter cards, cosa que agradezco mucho. Esta vez se trata de que ya tengo un menu, pero el mismo es de una plantilla que descargue, no lo hice yo. la situacion es que ahora quiero incluir otro menu, (uno sencillo de navegacion) para la plantilla para moviles "Fantastico"(prediseñada por blogger). Ya vi tu post sobre las plantillas personalizadas para moviles, pero eso no es lo que quiero, quiero crear un nuevo menu solo visible para la plantilla movil. Gracias de nuevo y saludos desde Venezuela

    ResponderEliminar
    Respuestas
    1. mi blog es freshtechs1.blogspot.com

      Eliminar
    2. No sé cómo lo tienes por dentro, pero tienes desactivada la plantilla para móviles:
      http://freshtechs1.blogspot.com?m=1

      De todas formas no se puede cambiar casi nada, por no decir nada de esas plantillas.

      Eliminar
  7. Hola Oloman, tengo problemas para regular los espacios laterales entre cada link, el menú lo estoy colocando dentro de una caja de 1000px de ancho, el espacio entre los links no se regula automáticamente por lo que dos de ellos (son siete) aparecen en una segunda fila abajo, gracias por tu ayuda...

    ResponderEliminar
    Respuestas
    1. ¿Siete? Mala división tiene eso, pero la cosa está el selector ".menudes a"
      Tienes que darle un width de 1000 (ancho total) / 7 (unos 142px ) y redondear a la baja, pero para que salga exacto, mejor utiliza un ancho de 994px. El único problema será si el texto que aparece en alguno o varios links es muy largo para ese ancho (142px). En ese caso la única solución sería reducir el tamaño de fuente (font-size).

      De todas formas me resultaría más fácil si lo viera ;)

      Eliminar
  8. Una pregunta si tengo el menu horizontal hecho con listas, como aplico tu ejemplo a las mismas.
    Gracias.-

    ResponderEliminar
  9. Hola que tal buen tutorial me ha gustado mucho pero bueno también tengo una pregunta que hacer como podría hacer para añadir un submenu a un elemento del menú principal, lo he intentado pero me recorre los elementos del menú de forma que solo me aparecen 2 elementos del menú y los demás no los muestra espero que me puedas ayudar.

    ResponderEliminar
    Respuestas
    1. Hola Carlos. Mete ese código que utilizas en un CodePen, me pasas la dirección y así podré ver y quizás averiguar dónde está el problema. De otra manera me resultará imposible saber qué haces y proponerte la solución.

      Eliminar
  10. Hola, mi nombre es Lucas y tengo una duda más grande que la torre Eiffel ! jaja! Bueno mi duda es que quiero conseguir un menú como el que tiene esta página→ http://www.nick.com/ y no puedo encontrar ese menú por ningún lado! He buscado por quizá más de 100 términos de búsqueda en Google y no encuentro nada, y como soy nada experto en esto de html, css y javascript no lo puedo hacer yo solo! Bueno, me parece que el menú que yo quiero sería algo así como con un efecto deslizante y a su ves que tenga ese tooltip que sigue al cursor! Por favor si es que puedes fíjate en la página que te dije (nick.com) y vas a ver el menú que yo quiero... Por favor también te pido que si sabes como hacer esto explícamelo con mucho detalle, ya que soy algo nuevo en esto. Desde ya, muchas gracias y espero tu pronta respuesta.
    PS: Los menús que tienes tu también están muy buenos pero no es lo que busco exactamente. Saludos desde Uruguay.-

    ResponderEliminar
    Respuestas
    1. Es sencillo, pero no fácil ni rápido de explicar si hay que entrar en detalles. Básicamente es una imagen de fondo en cada enlace, que incluye arriba el icono y abajo el texto. Inicialmente sólo se ve la parte de abajo de la imagen y cuando se hace hover es cuando ya se ve entera y eso simula que aparece el texto.
      Si tengo un rato preparo un sistema distinto que no requiere imágenes y lo publico.

      Eliminar
    2. Ok! Muchas gracias! :)

      Eliminar
  11. HOla que tal muy bueno los menus, sin embargo como puedo hacer para agregar mas opciones y que en una opcion tenga subitems?

    ResponderEliminar
    Respuestas
    1. Para agregar sub-opciones hay que añadir más código, pero como ese no era el objeto de este post, pásate mejor por este o incluso este otro.

      Eliminar
  12. hola amigo, veras me gusto el primero, pero no entendi puse el primer codigo, pero el segundo mas largo en donde va?
    gracias!

    ResponderEliminar
  13. como hago para al hacer clic me envie a otra pagina. ?

    ResponderEliminar
    Respuestas
    1. Hola Héctor. El segundo trozo de código es CSS y va en la plantilla, entre las etiquetas SKIN. Con respecto a los enlaces (para lo del clic), tienes que añadir la dirección de destino entre las comillas que dejé en
      a href=""

      Eliminar
  14. Hola Oloman. Podria conseguir el codigo completo del segundo menu?.No doy con la composicion correcta para que funcione.
    Saludos y gracias.

    ResponderEliminar
    Respuestas
    1. Aquí lo tienes: http://codepen.io/oloman/pen/kpACI

      Eliminar
  15. donde se coloca el codigo segundo

    ResponderEliminar
  16. Hola, tengo una duda, como haria para que el menu visitada quede de otro color? gracias de antemano.
    Saludos

    ResponderEliminar
    Respuestas
    1. En un menú no suele interesar cambiar el color de los enlaces ya visitados, pero...
      .menudes a:visited {
      color: red;
      }

      Eliminar
    2. Gracias por responder. Me referí cambiar el color de fondo del menú mientras sea visitada. Gracias

      Eliminar
    3. Pues me parece que sigo sin entenderte. Eso es lo que hace el segundo menú de los que puse en la entrada ¿no?

      Eliminar
  17. Hola Oloman, una pregunta relacionada con un menu horizontal con subpestañas con egecto deslizante que creo que comentaste en su dia y que no localizo aunque guardo los codigos. veras lo he implementado y no logro lo siguiente: al pasar por un boton con subpestañas se realiza un efecto de color hver pero al bajar a las subpestañas ese efecto desaparece, mostrando otro color (color del resto de las botones del menu. Yo quisiera que al apsar y bajar a las subpestañas se viera el mismo color.
    Gracias

    ResponderEliminar
    Respuestas
    1. Sólo recuerdo este, pero no es de este mismo tipo (deslizante) sino desplegable.

      Eliminar
  18. Hola Oloman ¡ , muchisimas gracias por tu blog , los codigos y toda la info que pones. Es de gran ayuda . Tengo listo un menu como este combinado con desplegables y en breve lo quiero subir a mi blog ( http://anttonlandaburu.blogspot.com.es/ ) . Tengo claro tambien como hacerlo pero me gustaria hacerte esta pregunta : funcionara si el codigo css lo coloco entre las etiquetas style correspondientes dentro de un gadget junto con el codigo html en lugar de colocar el css entre las etiquetas skin.
    Saludos y gracias

    ResponderEliminar
    Respuestas
    1. Perfectamente Antton. Precisamente entre etiquetas STYLE es cómo se tiene que añadir el CSS en cualquier otra parte que no sea esa zona de la plantilla (entre los SKIN).

      Eliminar
  19. Hola Oloman!

    Muchísimas gracias por compartir esto, debo admitir que aún me da miedo tocar el html de mi blog, pero ahí ando practicando en un blog de prueba. Esto que colocas aquí me sirve bastante para lo que deseo hacer.

    Saludos y gracias.

    ResponderEliminar
    Respuestas
    1. Me alegro Julio. Gracias a tí por hacérmelo saber.

      Eliminar
  20. hola como hago el menu 2 para que salga vertical?

    ResponderEliminar
    Respuestas
    1. Como hay que cambiar muchas cosas, te lo he reconstruido aquí

      Eliminar
  21. Que tal Oloman, de todas las búsquedas que he hecho para hacerme de un menú horizontal, el tuyo fue el que más me ha gustado y ya lo he aplicado. Hice mi menú horizontal de forma flotante, para ir haciendo scroller entre las diferentes alturas de mi página, me gustaría saber como dejar marcado (negrita u otro color) el botón que he presionado la última vez, espero haber sido claro en mi duda.

    ResponderEliminar
    Respuestas
    1. Con este tipo de menú no es posible Adan. Habría que añadir JavaScript o bien acoplarlo al "menú de páginas" de Blogger porque de marcar los botones pulsados en este último caso, ya se ocupa Blogger.

      Eliminar
  22. Hola Oloman, he creado un menú pero con subpestañas, es decir, de cada pestaña sale una "flechita" que indica que sale otra subpestaña. Hasta ahí todo bien.

    Quería que una de las subpestañas tenga otro ancho diferente al resto... lo conseguí dándole a esa subpestaña un estilo concreto.

    El problema es que la "flechita" sigue estando al final de la subpestaña con el ancho antiguo, es decir que no se adapta al nuevo ancho. Me explicaron que el problema es que esa flechita se genera con un script que es general para todo el menú.

    No hay forma de cambiar ese script para esa subpestaña en concreto?

    Salu2

    ResponderEliminar
    Respuestas
    1. El problema si te he entendido bien, es más bien que esa flecha es una imagen. Como tal, tiene unas dimensiones y para cambiarlo tendrías que hacer como con la subpestaña, es decir, añadir un estilo concreto a esa imagen para cambiar su WIDTH,

      Eliminar
    2. No Oloman, la flecha no es una imagen que pueda cambiarse su width y si se puede no sale en la plantilla.

      Es decir, esta era la subpestaña --------> y una vez acortada quedaria ---- > es decir que se acorta el width de la subpestaña pero la flecha queda en el mismo sitio y no sé como hacer para que quede ---- >

      Eliminar
    3. Creo que me explicaré mejor si te mando el link del blog... http://recordandoati.blogspot.com.es/

      En el caso de la subpestaña 3.2, si te das cuenta al final tiene una flecha porque de ella sale otra subpestaña.

      Le he dado un estilo a esa subpestaña poniéndole otro width más pequeño,
      la subpestaña 3,2 se acorta pero la flecha continúa estando donde estaba, es decir, no se mueve y quiero que esté "pegada" a la sub 3.2

      Creo que ahora me he explicado mejor, no? Salu2

      Eliminar
    4. Ahora está mucho más claro :)
      Busca este selector y cambia todo lo que tienes por esto otro:
      .rightarrowclass {
      position: relative;
      top: 2px;
      margin-left: 2px;
      }

      Eliminar
    5. Joooo menuda tontería... no me dí cuenta que arrow es flecha.

      Cambié margin-left por right: -23 y todo ok, pero veo q se aplica a todas las flechas right de las subpestañas, no solo a esa concreta.

      Gracias y salu2

      Eliminar
    6. Claro que se aplica a todas las flechas right... para eso está CSS; para cambiar una regla y que con eso se modifiquen todos los elementos bajo ese selector.
      Si lo que querías era cambiar una en concreto entonces pon estilo "inline", es decir, el CSS dentro del elemento HTML con una etiqueta STYLE.

      Eliminar
    7. Si lo quería, solo para la subpestaña 3.2... pero como no daba con el style en el html en concreto, probé a poner en css de la plantilla, el valor absolute y ahora aparecen todas las rightarrow en el mismo punto al final de todas las subpestañas, independientemente de su anchura, osea que todo ok

      Salu2

      Eliminar
  23. Muchas felicidades por tu conocimiento y por compartirlo.
    Soy apenas principiante en esto del diseño web y ya hice mi menú pero queda en un costado de mi página y lo necesito en el centro de la misma, como le hago para que aparezca en el centro de la página? Gracias

    ResponderEliminar
    Respuestas
    1. Hola Alejandro. Con el código que puse en esta entrada te debería quedar centrado. Si no es así o bien cambiaste algo o bien hay algo en tu plantilla que interfiere. El problema es que en tu perfil no está tu blog y no puedo comprobar qué es lo que falla.

      Eliminar
  24. Hola Oloman, voy a hacerte ésta pregunta acá porque no sabía donde hacerla... Como se podría hacer algo como lo que tiene las imágenes del menú de cartoonnetworkla.com?! Es que a mi me parece que tiene un efecto de transición pero no se como hacerlo. Me podrías ayudar? Gracias, y saludos! :)

    ResponderEliminar
    Respuestas
    1. Eso son animaciones en flash Lucas. Como dibujos animados prácticamente.

      Eliminar
  25. Buen día Oloman, nuevamente haciendote una consulta. He implementado el menu en mi pagina, pero al validarla en W3C me lanza un error por meter un DIV en una lista UL, si saco el DIV me deja de funcionar el menu. Que podré hacer?

    ResponderEliminar
    Respuestas
    1. Adán, en este artículo el menú está construído precisamente sin listas. Seguramente usaste el que puse en Codepen que era una variante, así que prueba con este.

      Eliminar
  26. ¡Buenas! Me encanta el menú nº1, siempre he querido saber cómo hacerlo, pero en el web que estoy construyendo no me sale bien :( Tengo 10 apartados que están en una capa fija de un width 100%. El principal problema es que la marca no me coincide con el link, aún y habiendo hecho los cálculos de los porcentajes. Otra cosa que no me convence es que entre link y link hay mucho espacio a causa del width establecido... ¿no se puede hacer sin width? Me gustaría alinear el menú a la izquierda pero con tanto espacio me ocupa toda la parte superior. Te dejo el link para que lo puedas checar y ¿me comentas? ¡Gracias! www.marsurftours.com/inicio.php

    ResponderEliminar
    Respuestas
    1. "Page Not Found"... no puedo verlo, pero de todas formas sería con los siguientes valores:
      - .menudes a, width del 10%
      - .marca, left del -5% y width del 5%

      Por último tienes que poner 10 .menudes a:nth-child(X):hover ~ .marca, cada uno con su ordinal (1, 2, 3, etc.) y los valores para el left, en ese mismo orden serían: 2.5%, 12.5%, 22.5%, 32.5%, 42.5%, 52.5%, 62.5%, 72.5%, 82.5% y 92.5%

      Eliminar
  27. hola, tengo una duda. Tengo puesto un menu tipo roll pero simpre se ponen los links verticales ó en lista. ¿Habrá alguna forma de que pueda hacerlo horizontal? Perdón si te pregunto a ti, no tiene mucho que ver con tu HTML pero es que de verdad me gustaría que salieran horizontales :/ mi blog es: http://addcoffeetomylife.blogspot.com
    ¡Porfavor! Saludos.

    ResponderEliminar
    Respuestas
    1. Hola Jessica. No logro ver un menú de ese tipo en tu blog y sin eso no puedo indicarte si hay una modificación fácil que arregle eso. Es que hay muchas maneras de hacer un menú y también distintas formas de poner sus elementos en horizontal.
      Aquí explico un sistema, pero es más complicado que una simple lista porque está preparado para subopciones desplegables: Menú desplegable en horizontal. Espero que te sirva.

      Eliminar
  28. Hola. MIra tengo un problema. Necesito quitar las opciones del mi menu por que no las necesito. Requiero unas diferentes... Donde las puedo modificar y con que codigo. Es que enserio me genera conflicto de lo que quiero dar a conocer en mi blog.

    ResponderEliminar
  29. Fabián, sin datos no puedo ver nada. Ni sé qué menú usas, ni sé dónde lo usas, ni sé con qué te da conflicto, etc.

    ResponderEliminar
  30. Hola,
    En mi blog tenía 3 páginas principales como pestañas en la barra horizontal.
    Ahora he añadido una página más y tras darle a publicar, veo que en la barra no aparece la pestaña. ¿Cómo podría hacer para que salga también?
    http://psicologiapadres.blogspot.com.es/
    Gracias!!

    ResponderEliminar
    Respuestas
    1. Sospecho que ya encontraste que eso se hacía desde Diseño y editando el gadget de Páginas para después marcar las pestañas que quieres que se vean ¿no? :)

      Eliminar
  31. Pregunta un poco fuera de tema ( pero relacionado a los menus )
    logre dar con un estilo agradable de menu en mi blog, pero no logro captar que hago mal, el css , el id, o el html nose, pero no logro agregar sub menus, ni muchos menus hacia el lado, se deforma totalmente esa zona, eh probado varios menus y si funcionan ( hasta cierto punto ) pero este que me agrada no puedo agregarle nada mas de lo que tenia al ponerlo, ya eh intentado varias conbinaciones con los li- a - ul y todo esa parte del codigo, y nada.

    ResponderEliminar
    Respuestas
    1. http://a1tracksmaster.blogspot.cl/

      Eliminar
    2. ¿Qué tal si te olvidas del sistema de esta entrada y te pasas por esta otra?

      Eliminar
    3. ah disculpa, voy para alla.

      Eliminar
  32. tengo este menu horizontal pero lo quiero vertical que debo hacer
    #button {
    padding: 0;
    }
    #button li {
    display: inline;
    }
    #button li a {
    font-family: Arial;
    font-size:11px;
    text-decoration: none;
    float:left;
    padding: 10px;
    background-color: #2175bc;
    color: #fff;
    }
    #button li a:hover {
    background-color: #2586d7;
    margin-top:-2px;
    padding-bottom:12px;
    }

    ResponderEliminar
    Respuestas
    1. Hola Freddylopera

      Si cambias el display:inline; por un display:inline-block; ya casi lo tienes ;)

      Eliminar
  33. ¡Hola! Muchas gracias por compartir tu conocimiento. Ha sido de gran ayuda.
    Oye, he intentado hacer este menú pero no me ha quedado. Coloqué el primer código y sí queda muy bien pero al colocarle los estilos, sale el código en vez de salir el estilo en el blog. ¿Qué estaré haciendo mal?

    ResponderEliminar
    Respuestas
    1. Hola ¿Dónde añades los estilos y cómo? Si los pones a continuación del HTML tendrá que ir entre etiquetas <style> y </style>. De lo contrario lo tendrías que añadir en la plantilla, junto con el resto del CSS. Más info (ver "Dónde va el CSS").

      Eliminar
  34. Hola Oloman. Muy buen tutorial! pero como haría para que la linea o el cuadro se quede en el item del menu mientras esté activo y no se devuelva?

    ResponderEliminar
    Respuestas
    1. ¿Activo = Pulsado? Si está pulsado y es un enlace no tiene objeto esto ¿no?

      Eliminar
  35. ¡Hola! tengo 3 días intentando a toda marcha crear un menú y no he podido con ningún método... hasta que conseguí tu post :) ha sido súper sencillo y me ha fascinado el efecto.

    Mis preguntas serían: cómo cambiar el color de la barra del menú (es negra), y del color del efecto al deslizar sobre las categorías (es gris).

    Muchísimas gracias, saludos.

    https://venusinsitu.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Color de la barra del menú en .menudes:
      background: #025BA3;

      Color del efecto deslizante en .marca:
      background: #fff;

      Eliminar
  36. De casualidad conoces de algun codigo para hacer menus verticales asi como una lista de capitulos o mas bien usando un codigo similar...
    te lo agradeceria.

    ResponderEliminar
  37. Gracias me sirvió el primero, te hago otra pregunta...

    ¿Me podrias ayudar a emular o hacer algo parecido al recuadro que tienen estos menus "tab"?

    te paso pantallazo

    http://i.imgur.com/d8dIk88.png

    la pagina y su respectivo post


    http://pokemonlaserie.blogspot.com.ar/2016/09/capitulo-16-temporada-19-elecciones-de.html

    te lo agradeceria demasiado.

    Me viene sirviendo mucho tu ayuda.


    * otra pregunta

    existe alguna manera de que los menus del tab se queden estaticos cosa que la persona no tenga que apretarlos o sea la primera oopcion que salga estatica, ya apretada
    para que sepa que hay un reproductor ahi?

    ResponderEliminar