JMiur [E]

Este es un ejemplo sencillo para crear un menú desplegable que puede incluir submenús, que usa las posibilidades que nos brindan las nuevas propiedades del CSS3.

Como casi cualquier otro, el HTML se arma en una lista, utilizando etiquetas UL y LI que, se anidan si es que queremos crear un submenú. Esta sería una lista standard:
<ul class="mi-menu">
  <li><a href="URL_enlace_1"> texto_enlace_1 </a></li>
  <li><a href="URL_enlace_2"> texto_enlace_2 </a></li>
  <li><a href="URL_enlace_3"> texto_enlace_3 </a></li>
</ul>
y si quisiéramos que uno de esos enlaces fuera un submenú:
<ul class="mi-menu">
  <li><a href="URL_enlace_1"> texto_enlace_1 </a></li>
  <li>
    <a href="#"> texto_enlace_2 </a>
    <ul>
      <li><a href="URL_enlace_2.1"> texto_submenú_2.1 </a></li>
      <li><a href="URL_enlace_2.2"> texto_submenú_2.2 </a></li>
      <li><a href="URL_enlace_2.3"> texto_submenú_2.3 </a></li>
    </ul>
  </li>
  <li><a href="URL_enlace_3"> texto_enlace_3 </a></li>
</ul>

Así como está, veríamos algo similar a esto:

Y ahora, el CSS que hará que esa lista se transforme en otra cosa:
<style type="text/css">
  /* el menú en si mismo */
  .mi-menu  {
    border-radius: 5px;
    list-style-type: none;
    margin: 0 auto; /* si queremos centrarlo */
    padding: 0;
    /* la altura y su ancho dependerán de los textos */
    height: 40px; 
    width: 510px;
    /* el color de fondo */
    background: #555;
    background: -moz-linear-gradient(#555,#222);
    background: -webkit-linear-gradient(#555,#222);
    background: -o-linear-gradient(#555,#222);
    background: -ms-linear-gradient(#555,#222);
    background: linear-gradient(#555,#222);
  }

  /* si es necesario, evitamos que Blogger de problemas con los saltos de línea cuando escribimos el HTML */
  .mi-menu  br { display:none; }

  /* cada item del menu */
  .mi-menu  li {
    display: block;
    float: left; /* la lista se ve horizontal */
    height: 40px;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
  }
  .mi-menu li a {
    border-left: 1px solid #000;
    border-right: 1px solid #666;
    color: #EEE;
    display: block;
    font-family: Tahoma;
    font-size: 13px;
    font-weight: bold;
    line-height: 28px;
    padding: 0 14px;
    margin: 6px 0;
    text-decoration: none;
    /* animamos el cambio de color de los textos */
    -webkit-transition: color .2s ease-in-out;
    -moz-transition: color .2s ease-in-out;
    -o-transition: color .2s ease-in-out;
    -ms-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;
  }
  /* eliminamos los bordes del primer y el último */
  .mi-menu li:first-child a { border-left: none; }
  .mi-menu li:last-child a{ border-right: none; }
  /* efecto hover cambia el color */
  .mi-menu li:hover > a { color: Crimson; }

  /* los submenús */
  .mi-menu ul {
    border-radius: 0 0 5px 5px;
    left: 0;
    margin: 0;
    opacity: 0; /* no son visibles */
    position: absolute;
    top: 40px; /* se ubican debajo del enlace principal */
    /* el color de fondo */
    background: #222;
    background: -moz-linear-gradient(#222,#555);
    background: -webkit-linear-gradient(#22,#555);
    background: -o-linear-gradient(#222,#555);
    background: -ms-linear-gradient(#222,#555);
    background: linear-gradient(#222,#555);
    /* animamos su visibildiad */
    -moz-transition: opacity .25s ease .1s;
    -webkit-transition: opacity .25s ease .1s;
    -o-transition: opacity .25s ease .1s;
    -ms-transition: opacity .25s ease .1s;
    transition: opacity .25s ease .1s;
  }
  /* son visibes al poner el cursor encima */
  .mi-menu li:hover > ul { opacity: 1; }

   /* cada un ode los items de los submenús */
  .mi-menu ul li {
    height: 0; /* no son visibles */
    overflow: hidden;
    padding: 0;
    /* animamos su visibildiad */
    -moz-transition: height .25s ease .1s;
    -webkit-transition: height .25s ease .1s;
    -o-transition: height .25s ease .1s;
    -ms-transition: height .25s ease .1s;
    transition: height .25s ease .1s;
  }
  .mi-menu li:hover > ul li {
    height: 36px; /* los mostramos */
    overflow: visible;
    padding: 0;
  }
  .mi-menu ul li a {
    border: none;
    border-bottom: 1px solid #111;
    margin: 0;
    /* el ancho dependerá de los textos a utilizar */
    padding: 5px 20px;
    width: 100px;
  }
  /* el último n otiene un borde */
  .mi-menu ul li:last-child a { border: none; }

</style>
REFERENCIAS:designmodo.com

236 comentarios:

Unknown  

Hola Jorge, te comento que en vez de usar una anchura especificada, sería mejor usar display:inline-block, porque de la otra manera veo el último enlace bajado (por la tipografía tal vez?). El caso es que con inline-block se le da la menor anchura posible, manteniéndolo en una línea.
Para centrarlo sería darle al contenedor text-align:center;

JMiur  

Eso queda a criterio de cada uno. Hay muchas variantes para llegar al mismo resultado o a resultados similares; obviamente, si se usan valores fijos, esos valores deben corresponderse con el tipo de fuente a usar y los textos en si mismos.

Gem@  

En la sencillez está el buen gusto :)

davisdrumkey  

me gusta me gusta :D

Rosendo Ramírez  

Esta muy bonito ! :D

Rob X  

Hola!! una pregunta: dentro del submenu pueden haber pestañas y sub pestañas?? y de ser afirmativo, como quedaría el Código??

JMiur  

¿Que significa pestañas y subpestañas?

Amador López Criado  

Gracias de nuevo por tus lecciones maestro.

Pablo  

Es inclreible, entro a vagabundia buscando una sencilla explicación de un menu desplegable, y mira que me encuentro en la portada...

Muchas gracias por tus aportes JMiur

Megan  

esto me será de extrema utilidad, gracias por ponerlo aquí.. no te imaginas cuanto me costo encontrarlo :p


saludos desde Ariana de juegos gratis

Rob X  

Hola!! con las pestañas y sub pestañas me referia a esto: fijate en el texto_submenú_2.1


texto_enlace_2
texto_submenú_2.1
a- Camisas
a.1 Formales
a.2 Informales
b- Pantalones
c- Corbatas
texto_submenú_2.2
texto_submenú_2.3
texto_enlace_3

Ahora si me di a entender? algo asi como este menu: http://transformersg.blogspot.com/

JMiur  

Si te refieres a que en un sumbmeú haya otro submenú, el HTML será otra lista interna pero para estabelcer las propiedades de eso deberás probar porque no hay una respuesta simple.

Unknown  

Wooooo... esta genial, y solo con css.

Anónimo  

Hola JMiur, se que no es el post indicado, pero es el mas actual y no se si te enteras de los comentarios de un post viejo, pero lo hago aca. Hace poquito cree un blog nuevo para cambiar la plantilla del viejo y empezarla de 0, elegi la mas minimalista de Blogger, y empece a modificarla hasta que quedo a mi gusto, el problema viene que cuando llego a la parte de los comentarios y el formulario, no puedo llegar a modificar nada, ya que esta todo distinto a lo que vos explicas en tu post que esta dividido en dos partes sobre como modificar los comentarios anidados. Quisiera saber si me podrias dar una mano sobre como reiniciarlos y empezar desde cero y poder agregarle el CSS que yo quiera. Desde yua muchas gracias!

JMiur  

Esa es uan parte de Blogegr que ha ido sufriendo modificaciones constantes 1 2.

Pacheta  

Buenas ! me dijo al guardar que había un error en la plantilla, que me faltaba un

Justo al final
< l i > < a h r ef="URL_enlace_3"> texto_enlace_3

Aquí habría que cerrar el li de arriba, creo !

Saludos y gracias como siempre Vagabundia!

Pacheta  

No entiendo por qué no me despliega el menú :((( http://pruebasdelamierdaperruna.blogspot.com.es/

No me hace la función de desplegar

JMiur  

Ahí ya está corregido el error.

Pacheta  

Gracias JMiur como siempre !

Escuela de Gaitas CGBA  

Muy bueno el aporte, muy útil.

Hay alguna forma de evitar que el submenu se esconda detrás de otro objeto?

Una forma que encontré de hacerlo es aumentando el ancho del elemento .mi-menu. Pero no queda bien.

Probe con z-index y tampoco tuve suerte. Alguna idea?

http://escueladegaitas.blogspot.com.ar/

Gracias

JMiur  

Esa es una de las nuevas plantillas de Blogger así que, probablemente, agregandole position:relative; a esta regla:

.mi-menu {}

EmmaX  

te hago una pregunta amigo jmiur.. he buscado en tu blog pero no lo he podido encontrar.. hay alguna forma que el menu sea desplegable pero al hacer click en el boton que contiene subcategorias?? es decir que no se despliegue por solo colocar el cursor encima sino que se tenga que clickear sobre él..

JMiur  

Hacerlo sólo con CSS es bastante complicado, hay algunos experimentos que usan el atributo target pero, no funcionan del todo bien.

El CSS no tiene eventos que reaccionen a un click.

EmmaX  

entiendo y que tal esto..
se me ocurrio hacer un menu con la funcion verocultar que encontre en esta pagina y queria saber si hay alguna posibilidad de que si ya tenes una pestaña abierta.. al queres abrir otra se cierre la primera y luego esta se habra..
no se si me explico.. a ver, va un ejemplo:
tengo un menu donde tengo tres botones
Portal, Foro y contacto.. cada uno con subcategorias que se despliegan cuando uno hace click en ellos y se vuelve a contraer con otro click mas..
mi pregunta es si al tener desplegadas las subcategorias de "Portal" y dar click en "Foro" se abrieran las de "Foro" pero antes se cerraran las de "Portal".

El codigo que he usado:

Este el script

http://www.itaka-fan.net/IMG/codigo.jpg

JMiur  

Parecería que lo que quieres hacer es lo que se llama un acordeón. Puedes mirar esta entrada por ejemplo y ver si es algo de ese estilo ya que la técnica es completamente distinta.

EmmaX  

es casi asi.. ya conocia los acordeones e incluso tengo ese intalado en la pagina principal..
lo que necesitaria es que en un principio no se muetre el contenido de ningun boton, (por ejemplo en los acordeones siempre se muestra el primero o el que vos desees) y que en lugar de mover todos los botones cuando se expanda uno.. queden donde estan y el contenido se muestre sobre ellos (movido un poco para algun costado como para que los demas sigan estando accesibles..)
bueno, me diste una idea, voy a ver si con el script de ese acordeon logro lo que quiero hacer..
si sabes como lograrlo, te encargo me lo hagas saber.. saludos

EmmaX  

bueno solo paso a avisar que lo pude lograr, use este acordeon http://vagabundia.blogspot.com/2010/03/un-script-muy-pequeno-para-crear.html
y como resultado final me quedo este menu horizontal que pueden ver en la cabecera de nuestra pagina http://www.itaka-fan.net

muchas gracias Jmiur por la ayuda, siempre saco buenas ideas de tu pagina. saludos

Vanicer  

SUper util.Muchisimas gracias :]

Anónimo  

Excelente aporte...solo tengo un pequeño inconveniente y no logro resolver, el submenu me aparece alineado a la izquierda, junto con la linea divisoria y no logro hacer que se centre u oriente a la derecha, me puedes ayudar?

mil graicias!

JMiur  

¿Dónde tienes colocado el ejemplo para verlo online?

Fersho  

Gracias JMiur, los ejemplos estan aquí

http://www.xpresiongrafica.com/css-menu.html
este esta intacto como tu lo tienes en tu post

http://www.xpresiongrafica.com/admin.html
este esta modificado pero siempre existe el mismo inconveniente

Gracias por tu ayuda!

Fersho  

he puesto un par de veces los links y no terminan de aparecer

Fersho  

he intentado colocar varias veces pero no se porque no sale mi comentario,

puedes verlo en http://www.xpresiongrafica.com/admin.html

gracias!!!

JMiur  

Tal como dice allí abajo, los comentarios sestan moderados ypor lo tanto, solo se ven cuando se los autoriza.

En ese blog, la etiqueta UL tiene un padding de 40 pixeles por defecto por lo tanto, debes quitarlo agregando padding:0 a esta regla:

.menucss ul {
...
padding:0;
}

Fersho  

Excelente!!! ahora si esta al 100 MIL GRACIAS!!! buen trabajo!!!

Coco Travel & Adventure  

Hola, JMiur, yo de nuevo, disculpa las molestias, pero el menú no se despliega. ¿Puedes darte una vueltita por mi blog? www.cocotraveladventure.com

JMiur  

Eso ocurre porque en esas plantillas nuevas de Blogger hay decenas de reglas de estilo que se adosan por defecto y que, en este caso deberás sobrescribir con algo com oesto:

#HTML3 {
position: relative;
z-index: 1000;
}
#HTML3 ul {
overflow: visible !important;
}

Coco Travel & Adventure  

JMiur, eres mi héroe. Ahora se despliega perfectamente. Un beso y muchas gracias. Cuando vengas por aquí, ya sabes dónde alojarte... por cortesía de Coco. Eres el primero de los Master's Blog en mi lista.
LFM

josepartengo  

Hola,
Quiero hacer un menú que se despliegue al clicar en un botón y al abrirse aparezcan columnas y en cada columna enlaces.
He estado buscando, y para darte un ejemplo de como es lo que quería saber si se puede hacer y como, es la opción de Filtrar resultados en Youtube, la abres cuando quieres clicando en un botón y aparecen columnas con enlaces.
Mira: https://dl.dropbox.com/u/11723636/Men%C3%BA%20Youtube.png
Saludos

JMiur  

No sabría decirte con exactitud porque habría que diseñarlo pero parecería un simple botón que muestra y oculta una lista. No sé si tiene algo más.

Unknown  

Hola Jmiur. En primer lugar muchas gracias por compartir tu conocimiento, es muy interesante y útil, estuve toda la mañana estudiándolo y pude aprender propiedades nuevas, como la de animar el height, que da un efecto bastante interesante a los submenús. Tienes algunas otras propiedades interesantes para mostrarnos.

Muchas gracias y felicitaciones por tu trabajo.

JMiur  

Casi todas las propeidades pueden ser animadas así que es cosa de jugar un poco y ver el resultado :-)

EdisonR  

Si se puede hacer con todos los menus que tengan submenus porque he visto ejemplos en otras páginas y solo hace con un menu y al poner otro menu se daña la página???

Y tambien lo tienes el ejemplo para descargar xfavor!!

Agradeceria una respuesta y muy buen ejemplo.

JMiur  

Tu primer párrafo no se entiende.

No hay nada para descargar, el ejemplo es el que se muestra en la entrada.

Bienvenido Heredia  

SALUDOS JMIUR! HE ENTRADO A TU BLOG BUSCANDO UN TUTORIAL SOBRE LA CREACION DE UN MENU QUE ME PERMITA NAVEGAR EN MI BLOG, ES DECIR, QUE AL CLICKEAR UN ENLACE O TITULO DEL MENU (EDUCACION, POR EJEMPLO), ME LLEVE AL ARTICULO O PAGINA QUE DESEO LEER. POR ESO NO HE PODIDO FINALIZAR LA CREACION DE MI BLOG. PODRIAS AYUDARME?

GRACIAS Y SALUD!

JMiur  

Esto que ves en esta entrada es un menú ¿Cuál es la dificultad?

GF  

Hola disculpa te hago una consulta soy muy novato con esto yo quiero hacer un menú desplegable en Blogger.
Donde debo añadir el codigo que pusiste en la plantilla o en añadir CSS ?
Ya hay un "menú" te dejo el enlace por si lo necesitas
www.mods-para-minecraft.blogspot.com

Muy buena la página me has ayudado mucho.

JMiur  

El CSS se coloca entre <b:skin> y </b:skin> o entre etiquetas <style> </style> antes de </head>

El HML, donde quieras mostrarlo, ya sea en al plantilla misma o agregando un elemento HTML.

Lo que ahora tienes en ese blog es un gadget llamado PageList así que si quieres colcoar un menú desplegable, debes agregar otro porque ese no puede ser modificado de este modo.

Dolores Tutora  

Muchas gracias por compartir tus conocimientos, de cuando en cuando entro en tu blog cada vez que me surge alguna dificultad en blogger. Yo tengo creadas ya un menú de páginas y querría preguntarte si al incluir ese código tengo que modificar algo más, a parte de lo que indicas, para introducir submenús. Mi dirección es http//lagalaxiasinaptica.blogspot.com Espero que puedas ayudarme. Gracias.

JMiur  

No, en principio, no debes agregar nada más. Luego, habrá que ver si hay algún detalle que solucionar o no.

Dolores Tutora  

Disculpa, pero sigo teniendo dudas. Entiendo que hay que incluir los dos códigos que indicas en tu entrada, de un lado, la lista de menús y submenús y de otro, el código CSS para generar la barra de menús que has puesto en tu entrada. ¿Ambos se colocan seguidos, en el mismo sitio? ¿Debo borrar el listado de páginas que ya están incluídas en mi blog para que no se dupliquen menús? Siento molestar de nuevo, pero es que no termino de entender cómo tendría que aplicar lo que cuentas en la entrada.

JMiur  

El CSS se coloca junto con el resto, por ejemplo, antes de </head>

El resto es el menú en si mismo que se coloca allí donde quieras verlo; por ejemplo, en un elemento HTML.

No borres cosas has ver los resultados de los cambios, una vez que estés conforme, puedes quitar el gadget de Blogger si es que no vas a utilizarlo.

Unknown  

no puedo consegir que los sub-menus se vean por ensima de algunos objetos

Unknown  

Saludos Jmiur, Muchas Gracias por el aporte de verdad muy bueno..
crees que puedas ayudarme, no puedo consegir que se despliegen los sub-menus por encima de algunos objetos

JMiur  

Mira en esta entrada o indícame dónde está tu ejemplo.

Santiago Ramírez  

Hola JMiur, excelente tu trabajo, muchas gracias por compartirlo. He estado tratando de hacerlo solo (basándome en tu ejemplo, por supuesto) para aprender, y me sale todo como quiero hasta que llego a la parte de los submenús, donde todo me sale bien, pero no logro hacer que aparezcan cuando estoy sobre el menú principal, sino que aparece cuando estoy sobre en el espacio donde estaría el submenú. Espero hacerme entender, de igual forma, aquí está mi código:

.mi-menu {
list-style-type:none;
padding:0;
margin:0 auto;
width:80%;

}

.mi-menu>li{
list-style:none;
display:block;
float:left;
background:#900;
padding:15px;
margin:0;
border-right:3px solid #FFF;
border-spacing:15px;
width:100px;
}

.mi-menu>li:first-child{
border-radius:15px 0 0 15px;
}

.mi-menu>li:last-child{
border-radius:0 15px 15px 0;
border:none;
}
.mi-menu li a{
text-decoration:none;
color:#FFF;
font-size:1.5em;
line-height:15px;
padding:0;
margin:0;
display:block;
text-align:center;
}

.mi-menu li ul{
opacity:0;
position:absolute;
padding:0;
margin:0;
margin-left:-14px;
margin-top:7px;
transition:1s;
}
.mi-menu li:hover> ul{
opacity:1;
}
.mi-menu ul>li {
height:0;
overflow:hidden;
float:none;
list-style:none;
background:#900;
padding:14px;
margin:0;
width:100px;
border-bottom:3px solid #FFF;
transition: height 1s;


}

.mi-menu li>ul>li:last-child {
border:none;
border-radius:0 0 15px 15px;
}

JMiur  

Tendría que ver tu ejemplo online para poder responderte, Santiago.

Anónimo  

Saludos Jmiur, Muchas Gracias por el aporte de verdad muy bueno..
crees que puedas ayudarme, el menu en el IE 8 se ve sin fondo transparente y todo ya desplegado en desorden pero en morzilla se ve perfecto cual seria la causa no logro entender el css lo puse separado en hoja de estilo y tb junto en el html style dame una manito gracias

JMiur  

Tendría que ver tu ejemplo.

Unknown  

JMiur, tengo un problema al poner este menú debido a que al desplegar los submenú, estros quedan debajo de los bloques de publicidad adsense. Hay alguna solución? Muchas gracias por todo.

JMiur  

Fíjate en esta entrada.

Unknown  

Gracias, ya lo solucioné. Un abrazo!

Muelle 57  

Hola que tal, excelente el tutorial, lo que no pude lograr es centrar tanto los links, el menu y los submenues, me refiero a los textos. Muchas gracias!

Muelle 57  

Hola como andas? lo que te consultaba era para mejorar este menu, no puedo centrar los submenues de servicios ni bajarles el interlineado, http://www.logocreadores.com/aguza/index2.html gracias!

JMiur  

El tema de Servicios no es que no esté centrado, lo está, sino que el ancho establecido es escaso para contener ese texto largo; en .mi-menu ul li a {} dice width:80px y ese valor es el problemático.

En cuanto al interlieando, aparentemente, hay varias propiedades que separan los items del menú, no sólo line-height que está en .mi-menu li a {} sino también el padding que está en otra regla pero que en realidad es la misma .mi-menu ul li a {} y height que está en .mi-menu li {}

Unknown  

Hola, antes que todo te agradezco mucho tu tutorial, me encuentro con un problema al igual que Muelle 57 y es que cuando paso por los submenus los textos no se alinean hacia la izquierda, estuve observando y al parecer ese pequeno espacio es el que ocupan las vinetas, usa el list-style: none; pero no desaparece ese espacion, ojala pudieras ayudarme, es el mismo caso que en la pagina de Muelle 57 en la seccion de Servicios que hay un espacion antes de las letras......
Gracias!!!

JMiur  

Probalmentente la etiqueta UL o LI tengan un margen por defecto; tendría que ver tu ejemlo para decirte.

Unknown  

Hola de nuevo JMiur ya encontre el problema.......
en la etiqueta de
.mi-menu ul { }
nos esta haciendo falta un padding: 0; (segun cuanto lo quieras mover del margen) para moverlo del margin.... espero y este correcto y pues fue lo que me funciono....
muchas gracias de antemano

webmaster  

Eso eraaaaaaaaaaaa! Gracias!

adelperello  

Hola Sr. Miur, buenos dias.
El menu desplegable del blog que estoy diseñando, no se desplegaba bien por el bloqueo de dos elemenentos. Trasteando la plantilla html y cambiando de posición absoluta a relativa..... ..jqueryslidemenu ul li {
position:relative;
display: inline;
float: left;
}......, el menu no vuelve a la posición original de bloqueo. Se queda encogido.

http://adelperello.blogspot.com.es/

Gracias de antemano

JMiur  

Ese menú usa un script y por lo tanto, cómo funciona no puedo decirte pero, lo que se ve es que las propiedades position son erróneas. Deberías probar con algo así:

.jqueryslidemenu ul li {position: relative;}
.jqueryslidemenu ul li ul {position: absolute;}

ul li debe ser relativa y ul li ul debe ser absoluta porque parecería que los valores left y top son relativos al contenedor

adelperello  

Gracias. He vuelto al estado anterior, recordando la plantilla guardada. Ahora la duda esta, en el bloqueo del desplegabe por el o los elementos. He mirado una entrada que recomiendas mas arriba pero no logro entenderla.

Gracias de nuevo.

JMiur  

En este blog: http://adelperello.blogspot.com.es/
el menú se despliega pero hay propiedades que deberías corregir; por ejemplo, sacar el padding de las etiquetas UL y LI

.jqueryslidemenu ul {padding: 0;}
.jqueryslidemenu ul li {padding: 0;}

y agregar el z-index en:

.jqueryslidemenu ul li ul {z-index:1000;}

Puede haber más pero esas son las básicas para ver si el script establece correctamente la posición.

adelperello  

Eres un fenómeno. Te lo agradezco. Un pequeño lio con lu y ul, pero bien.

Gracias de nuevo.

Eddy Sánchez  

Excelente amigo...
Es bueno saber que personas como tú se toman el tiempo para instruir a otros....
Saludos cordiales.

Eddy Sánchez

Unknown  

muy buenas! lo primero agradecerte este gran aporte que me ha servido para crearme un menu.

el problema viene a que lo he hecho y lo he previsualizado en firefox pero cual es mi sorpresa que cuando lo voy a ver en el iexplorer al pasar por encima me muestra los submenus pero cuando voy a elegir uno (del submenu) se me vuelve a "contraer". sabes a puede deberse?

nuevamente gracias!:)

JMiur  

Tendría que ver tu ejemplo concreto para decirte. En el de esta entrada, por lo menos, con IE8, se muestra correctamente, más allá de que no funcionan animaciones y otros detalles gráficos.

Unknown  

muy buenas. Te he colgado el ejemplo aqui.

http://www.nerelan.com/menu.html

saludos

JMiur  

Se despliega perfectamente pero, el submenú se cierra cuando se intenta posicionarse encima de un item porque la altura de la etiqueta LI está definida como de 20 pixeles y eso, es escaso.

Simplemente, elimina la propiedad height de .mi-menu li {} y deja que el navegador la calcule o coloca una altura correcta. Esto último, lo puedes ver si le colocas un color de fondo a esas etiquetas LI lo que te dará una idea de cuál es su tamaño.

Cositasdedith  

Hola!!
tengo un problemilla... acabo de abrirme un blog y bueno, esto es lo que quiero hacer;
Quiero crear entradas, y dentro de esas entradas que hubieran aparatdos. Por ejemplo una entrada se llama "Disfraces" y me gustaría poder crear como otras entradas, pero dentro de la de Disfraces, donde pongo diferentes trajes, etc...
No se si me he explicado bien... -_- espero que puedas ayudarme, xk me stoy volviendo loca Ò.Ó
Muchas gracias!!! >.<

JMiur  

No es posible poner una entrada dentro de otra. Lo que puedes hacer es editarla, agregarle más cosas y volverla a publicar incluso, cambiándole la fecha para que se vea inicio si eso quieres.

Cositasdedith  

Vale!ya imaginaba que no se podía.... La imaginación va más a allá x)
Porque otra cosa, para hacer una menú desplegable, como se hace y como le vas metiendo textos?
Muchas gracias por todo!!!! Y perdón por ser pesada -_- soy un poco manca

JMiur  

El HTML es tal como l omuestra esta misma entrada; una serie de etiquetas UL y LI. Que sea desplegable o tenga otro tipo de efectos, dependerá del CSS agregado.

Un menú, no es otra cosa que una lista.

Falso9  

pero esos códigos en que parte del html los pego? después de la etiqueta head o donde?

JMiur  

¿Qué códigos? Si es HTML va en al entrada o en al parte de la página donde quieras verlos. Si es CSS puede ir ahí o junto al resto de las reglas de estilo que tengas.

Unknown  

ya me hecho el mío, le va genial a mi sitio, gracias JMiur!

zamorano  

Saludos, tengo un problema el menu funciona perfectamente para todos los navegadores execto IE... que deberia hacer para solucionarlo

JMiur  

No sé dónde lo has colocado o a cuál versión de IE te refieres.

Cristina Lobo Díaz  

hola, el menú funciona perfectamente el único problema que me surge es el de como cambiarle el color de fondo, ya que cambio los códiogos de
/* color de fondo*/ y me sigue saliendo igual que antes. ¿ Qué puedo hacer?

JMiur  

El fondo está en .mi-menu {} y tiene una gradiente ¿Cuñal es el cambio que quieres hacer?

Anónimo  

hola, muchas gracias por el menu!
Estoy intentando ponerle opacidad al submenu pero no puedo, me podrias ayudar?
Gracias!

JMiur  

Deberías colocar la opacidad en esta regla:

.menucss ul li a {}

Anónimo  

si pongo opacity:0.5; en .mi-menu ul li a me pone la opacidad sobre el teexto y no sobre el fondo.

JMiur  

Lógico. Así funciona la propiedad opacity; si se aplica al contenedor, afecta al contenido.

Para hacer eso que quieres, debes usar un fondo con colores en formato rgba().

TXQ Design  

mil gracias :) simple y perfecto

BEATMASTER  

Hay alguna forma de que esto funcione en explorer?, lo eh probado en explorer 9 pero no tiene el mismo efecto que en firefox o chrome nisiquiera oculta los submenus... lo peor es que quisiera que fuera compatible desde explorer 7 en adelante por ejemplo... pero si ni en el 9 se ve bien que se supone tiene mas compatibilidad con css... en todo caso que me recomiendan solo nececito un menu con submenus que jale bien en explorer!!! es mejor usar algun otro metodo como javascript? eh pensando en usar flash pero creo eso es caer muy bajo ademas de la incompatibilidad mayor que puede representar sobre todo con dispositivos moviles

JMiur  

Funciona perfetcamente en IE8.
En IE9 no séporque no lo uso.
En IE7 quien sabe, es demasiado viejo y nadie debería preocuparse por ese navegador.

sebastian  

Saludos,
1. Muchas gracias por el aporte, muy bueno.
2. Para q se vea el degrado de colores en IE9 se debe agregar esta línea
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000, endColorstr=#000000GradientType=0);/*degradar color IE*/

Uri  

Buenas JMiur, tu aporte me ha servido de gran utilidad, estoy diseñando una nueva página web y a pesar de mi conocimiento no muy avanzado voy entendiendo las cosas. En mi caso me gustaria incluir un segundo submenú dentro de un elemento de la lista que se encuentra previamente dentro de otro submenú, como puedo hacerlo?

Gracias de antemano.

jeanca  

para que se usa el ">" en "hover > ul"

JMiur  

Es el llamado child selector (selector de hijos) y puedes ver su uso en esta otra entrada.

dn-z  

Jmiur, excelente el menu desplegable, está perfecto para lo que quiero, lo modifique para mis necesidades y quedo bastante bien, pero tengo algunos problemas que no he podido solucionar, te explico lo que hice:

Los MENU tienen SUBMENU y a algunos de ellos les agregue otros SUBSUBMENU. (No lo puedo poner aquí porque no me deja)

Eso está todo bien, pero no he podido lograr reparar lo siguientes problemas, necesito que:

1- Los SUBSUBMENU aparezcan a la derecha de los SUBMENU (como está actualmente) pero al mismo nivel del SUBMENU elegido.

2- Los SUBSUBMENU aparezcan pegados al SUBMENU, ya que actualmente no los puedo ni clickear.

(No puedo poner el código de la plantilla porque excede el máximo de caracteres)

Espero que me puedas ayudar, ya que he intentado muchas cosas pero no he podido avanzar como quisiera en mi página, sé que existen otras formas pero tampoco me gustaría cambiar este menu desplegable ya que el tuyo está perfecto. Te dejo mi página:

http://chirisushi.blogspot.com/

Muchas Gracias

JMiur  

Es bastante complejo de seguir; me da la impresión que hay demasiadas reglas que se superponen; que deberías dividirlas aunque se repitan de tal modo de evaluar correctamente cuáles deben tener posiciones absolutas o relativas y respecto a cuales otras.

También creo que deberías tener en cuenta la propiedad top ya que en Firefox, el menú no puede usarse ya que queda un espacio importante en blanco lo que hace que se cierre cuando uno trata de colocar el ratón encima.

dn-z  

Gracias, seguiré intentando.

Muchas gracias

Ce  

Hola gracias por este ejmplo, esta muy bueno funciona casi al 100% lo unico es que no logro hacer que aparescan los recuadros del menu te dejo mi web para que la puedas chekar y haver si me puedes ayudar, gracias

JMiur  

No sé cuál es tu blog.

Ce  

hola gracias por este ejemplo no soy exxperto en webs pero algo se jeje y pude usar tu codsigo solo tengo un problemita esque no puedo hacer que quede de ese color oscuro el recuadro te dejo mi web para que lo puedas chekar te lo agradeceria mucho www.aeroperu-va.tk

JMiur  

El sitio dice: "PAGINA WEB EN MANTENIMIENTO ESTAMOS REALIZANDO MEJORAS EN LA WEB EN BREVE ESTARA DISPONIBLE"

Ce  

si disculpa esque estaba integrando tu codigo jeje ya esta disponible si lo puedes chekar te lo agradeceria.

JMiur  

Ahí no hay ningún menú.

www.barruntos.net  

Hola que tal, estoy interesado en implementar su menú en mi blog pero estoy poco puesto en el tema, quería saber si me podía ayudar.
El caso es que me va bien pero sólo cuando pongo el html en el sidebar, cuando pongo el html bajo de la cabecera no se ve bien ni nada parecido.
Me puede explicar porqué ?
Gracias y un saludo.
http://www.barruntos.net/

JMiur  

Tendría que verlo puesto en el sitio para poder responder eso.

www.barruntos.net  

Si, perdone ayer después de las pruebas lo dejé como estaba. En primer lugar le adjunto una imagen para que vea que en el sidebar el menú funciona bien, no lo podrá apreciar exactamente pero para que se haga una idea.
https://www.dropbox.com/s/cue0458l2cy8kpc/barruntos.net.jpeg
Y ahora dejo en el blog el menú bajo de la cabecera para que lo pueda observar.
Estamos en contacto.
Un saludo

JMiur  

OK. Eso ocurre porque el menú está colocado dentro de un div cuya clase es tabs-outer que, a su vez tiene otro div:
<div id="crosscol" class="tabs section">

¿Por que digo esto? Porque Blogger, agrega decenas de reglas de estilo a esos divs que son los que hacen que el menú se vea pésimo. Deberías colocarlo en un div propio, para que Blogger no lo afecte o eliminar cada una de esas reglas de estilo, sobrescribiéndolas.

www.barruntos.net  

Muchas gracias, me ha sido de gran ayuda, ya lo tengo controlado.
Me he hecho suscriptor RSS de su perfil.
Un saludo.

www.barruntos.net  

Le quería comentar otra cosa, sino le importa, me gustaría rizar el rizo y añadir iconos a las opciones del submenú, pero algo no va bien....
Puede pegar un vistazo a mi blog ?
Gracias anticipadas y un saludo.
http://www.barruntos.net/

JMiur  

Podrías usar la regla .mi-menu li a {} para agregar allí una imagen de fondo o bien agregarle un atributo style a cada enlace. No sé qué imágenes son o cuál es la idea.

Unknown  
Este comentario ha sido eliminado por el autor.
JMiur  

Supongo que te refieres a los selects y options; en ese caso, en la etiqueta select dice algo parecido a esto:

onchange="if(options[selectedIndex].value){location = options[selectedIndex].value}"

y podrías cambairla de este modo:

onchange="if(options[selectedIndex].value){window.open(options[selectedIndex].value,'_blank')}"

Cuidado con las comillas simples y dobles; no sé cómo está escrito realmente en tu blog así qeu sólo te doy la idea general.

location es lo que abre el enlace con la dirección y se ca,noia por window.open que eprmite agregar la opción target _blank para que se abra en otra pestaña o ventana.

Unknown  

Madre mía... eres un genio. Queda a la perfección con el código que pusiste. Quizás podrías hacer un post sobre los menús desplegables en forma de botón, porque no hay nada en Internet y son muy útiles para organizar la información.

Bueno... muchísimas gracias amigo.



JMiur  

Perfecto Felix.

Revista Pixel MX  

JMiur Excelente POST!

Me surgió un problema: Aplique este bello menu a mi blog y funcionaba bien solo que los objetos se sobreponen y no se ve el efecto deslizante :/ que modifico para que funcione? te dejo mi blog http://cbtapozo.blogspot.mx/

JMiur  

Agrégale un z-index a .mi-menu ul {} para que aparezca encima de ese slider; por ejemplo:

.mi-menu ul {
.......
z-index: 10000;
}

Revista Pixel MX  

Wii! Gracias, ahí la llevo JMiur!

Fernando_Miranda  

Gracias me sirvio de mucho! :D

Técnico deportivo  

Estimado amigo he añadido el código CSS en el diseñador avanzado y el HML en un elemento HTML pero no se despliega el menú cuando pongo el html bajo de la cabecera, sin embargo cuando coloco el HTML en el sidebar se ve bien. Espero me pueda ayudar a solucionar el problema, le estaría muy agradecido.
Gracias. ildepruebas@blogspot.com

JMiur  

Porque lo estás poniendo en un div llamado <div class="tabs-outer"> que Blogger usa para su propio menú (PageList) y todo lo que pongas allí tendrás decenas de propiedades por defecto que vas a tener que cambiar.

Lo mejor, sería que lo colocaras en un DIV propio.

Técnico deportivo  

Gracias por prestarme su atención, me gustaría ya que soy algo novato me diera alguna noción de como se coloca en un DIV propio.
Siempre agradecido.

JMiur  

Podrías poner algo como esto;

<div id='contenedor-menu'>
<b:section class='elmenu' id='elmenu' />
</div>

arriba de:

<div class='tabs-outer'>

y eso hará que aparezca una nueva sección en Diseño, donde podrás agregar gadgets o mover el que usas.

Es probable que también debas establecer las reglas de estilo de ese DIV.

Estás usando una de las nuevas plantilla de Blogger lo que hace que toda personalización sea engorrosa ya que están pensadas para ser modificadas exclusivamente desde el Editor de Plantillas interno.

Técnico deportivo  

Mil gracias por su ayuda, ya he colocado el despegable debajo de la cabecera, y si se despliegan los sub-menus pero no se mantienen para poder acceder a esos sub-menus. ¿Que paso no he realizado bien?
esta es la pagina donde estoy probando el menu desplegable
ildepruebas.blogspot.com

Gracias

JMiur  

El sitio ildepruebas.blogspot.com no existe.

Unknown  

Hola, gracias por el tuto, muy bueno, lo unico es que no me muestra la animacion del submenu en explorer9, que puedo hacer??

JMiur  

No tengo IE9 así que no puedo decirte.

Parroquia de San Julian de los Prados  

buenas!
tengo un problema. que codigo habria que añadir para que se me quedara en rojo la pestaña de navegacion del menu cuando tengo activa la pagina?

es decir, pulso en "un item", en consecuencia navego hasta la pagina, pero "un item" no quedaria marcado en rojo, si no que vuelve al color blanco. yo quiero que quede marcada en rojo.

gracias

JMiur  

Eso no puede hacerse con CSS. Debes usar JavaScript, detectar la url donde te encuentras, verificarla y actuar en consecuencia. Dependiendo de las urls que uses, puede ser más o menos engorroso.

Gonzalo L.  

Rara vez se encuentra un tutorial tan bien explicado y sencillo.
Muchísimas gracias.

Unknown  

que capo eres tigre, luego de buscar y sufrir por varios dias con otros tutoriales, cai por aqui y me has hecho ver la luz xD hice unos cambios para adaptar a mi pagina y quedo super genial, muchas gracias por el tutorial man!

Octavio Cortés  

hola, está muy bueno el tutorial.. pero como le puedo cambiar el color rojo a los vinculos de sustitución?
De antemano muchas gracias!

JMiur  

Personalizando el CSS. En este caso, el color está definido en esta regla:

.mi-menu li:hover > a { color: Crimson; }

Octavio Cortés  

a los minutos después me di cuenta jaj
muchísimas gracias

Alejandro García  

Una duda:
¿Cómo puedo poner el menú desplegable de forma horizontal? Intenté en cambiar el float: left por vertical y funciona pero los sub menús no siguen lo mismo :/

JMiur  

Tendrás que seguir investigando porque habría que cambiar muchas cosas.

Fernando Alvez  

Muy Útil!! muchas gracias maestro!!

Unknown  

Buen Aporte, sencillo y útil gracias :D

sonia  

hola jmiur estoy diseñando mi pagina web y encontre la barra de menu desplegable que dejaste.. es un exelente trabajo... ahora bien tengo un pequeño problema la barra me aparece dividida en dos una con tres menus y otra con otros 3 y no entera como muestras en el tutorial... como podria solucionar este problema para que la barra de menu se viera en una sola... un saludo y gracias

JMiur  

Tendría que ver tu ejemplo online para tratar de responderte ¿Está colocado en alguna parte?

Analisto.com  

Hace unos meses me comentaste que necesitaba javascript para conseguir que funcionase lo que queria hacer. No hay manera de hacerlo funcionar. No tengo conocimientos tan avanzados para ello.
¿Sabes de algún tutorial sencillo para hacerlo funcionar en blogger?
Muchas gracias.
--------------------------------------------------------------
2/08/2013 03:40:00 p.m.
Blogger Analisto.com dijo...

buenas!
tengo un problema. que codigo habria que añadir para que se me quedara en rojo la pestaña de navegacion del menu cuando tengo activa la pagina?

es decir, pulso en "un item", en consecuencia navego hasta la pagina, pero "un item" no quedaria marcado en rojo, si no que vuelve al color blanco. yo quiero que quede marcada en rojo.

gracias

2/10/2013 05:45:00 p.m.
Blogger JMiur dijo...

Eso no puede hacerse con CSS. Debes usar JavaScript, detectar la url donde te encuentras, verificarla y actuar en consecuencia. Dependiendo de las urls que uses, puede ser más o menos engorroso.

2/10/2013 05:59:00 p.m.
-----------------------------------------

JMiur  

No. No tengo presente ninguno.

Anónimo  

Hola... excelente la forma como lo explicas, me sirvio de mucho, tengo una duda , me gustaria agregar un menu mas dentro del submenu... osea que abra una pestaña mas dentro de la que esta ya esta deslizada hacia abajo, se me ocurrio como acordeon, y ando probando con ello y no encuentro la forma, si me puedes ayudar con ello te lo agradeceria.

muchas gracias.

JMiur  

Con este en particular habría que hacer pruebas y ver si es posible o cómo hacerlo ya que, en general, se vuelve un tema engorroso en extremo. Te conviene buscar un modelo que ya incorpore esa posibilidad y partir desde allí.

Unknown  

Disculpa y si quiero que el menu del segundo nivel aparesca igual de manera horizontal en lugar de ser vertical... como seria???

JMiur  

Tendrás que agregar propiedades viendo cuáles modificar; no es algo que pueda hacerse cambiando sólo un dato.

Gabriel Segura  

Muchas gracias, me ha sido de mucha ayuda tu aporte.

Gabriel Segura  

Gracias, mil gracias

Unknown  

Ojo con el , por ahí pasa que en ocasiones no pueda ser visualizado este menu :)

Saludos y gracias por el aporte !

Unknown  

Me refiero para trabajar con versiones de Internet Explorer no tan recientes (como la versión 8, que viene por defecto en Win7).

JMiur  

No veo problema alguno en IE8 pero, de todos modos, al solución en Windows 7 es sencilla; basta actualizar el navegador y dejar de usar una versión obsoleta.

Unknown  

Buen día sr.Jmiur, es un gusto saludarte - primeramente agradezco inmensamente vuestra ayuda en este y otros articulos, quisiera pedirte un gran favor sucede que he puesto este vuestro menu en mi nuevo blog, es un trabajo que debo preparar, un blog sencillo porque me han puesto a aprender de esto un poco, donde trabajo. Fijate que puse el menu y luce muy bien pero cuando presenta un problemilla .. es cuando lo pongo en esa parte de las tabs, mira es que promero cree un gadget llamado tabs o menu del blogger pero no tiene opcion de ponder otras pestañas desplegadas como las que posee este tu menu que me gusta mucho, entonces segui vuestros pasos y ahora lo he conseguido, ya lo puse y sirve pero si lo pongo en la columna derecha de gadgets .. si la pongo debajo del cabecero donde se pone o para mi, es mejor poner el menu si se ve el menu pero cuando pasas el cursos sobre el menu que tiene subpestañas no las muestra, no se porque, he buscado pero no se que mas hacer, a pesar de que he entendido como funciona este menu por vuestra explicación, no entiendo aquella plantilla del blog muy bien, solo un poco y os ruego vuestra ayuda, estoy seguro que vuestra ayuda será efectiva.

mi blog es esta: http://adinolmar.blogspot.com/

ahi ya veras que he pueso tu menu dos veces, es decir, en dos gadgets, uno en la parte de las tabs debajo de la cabecera y otro en la columna de los gadgets, asi podras apreciar la diferencia y el problemilla que te digo.

Os agradezco infinitamente, no sabes cuan valiosa es tu ayuda para mi y este menu y mas de tus articulos, quiero por ultimo decirte gracias, gracias y os envío un saludo desde Malaga.

Gracias por ayudar a quienes nos aturde la tecnologia como a mi, os agradezco.

JMiur  

Eso ocurre porque está colocado dentro de un DIV o seccion cuyo ID es crosscol y cuya clase es tabs.

Como esa clase tabs posee por defecto una serie de definiciones de estilo y propiedades, estas, se suman a las del menú personal, haciendo que ciertas cosas no funcionen o se vean distintas a como las ves en el ejemplo agregado en al sidebar.

Puedes empezar resolviendo la mayor parte de los problemas, agregándole dos propiedades extras a la regla .mi-menu {}

.mi-menu {
.......
position: relative;
z-index: 1000;
}

para que se despliegue encima del contenido del blog y no se oculte.

Unknown  

Sr. Jmiur gracias por vuestra respuesta, ya veo lo que me dices y enteindo un poco, la verdad un poquillo, pero os agradezco, ... hice lo que me habeis dicho - puse esto "position: relative;
z-index: 1000;" dentro del css de la clase "mi-menu" y guarde la plantilla y no, de todas formas se sigue ocultado, ahi sigo sin saber que es, pero os agradezco, recibe un saludo de nuevo, gracias por prestarme vuestra atención y responderme tan prontamente.

Gracias.

JMiur  

Va mejorando. Ahora, agrega una propiedad más en el mismo lugar:

.mi-menu {
.......
overflow: visible !important;
}

Alexanderix  

Muyyy buen aporte felicidades, sencillo, y lo mejor de un buen programador, lineas comentadas

Unknown  

Hola! Muy buena la botonera.
La estoy usando y es realmente muy práctica. Pero tengo un problema ubicandola en mi web.

Pueden verlo aquí:
http://d-tecno1.com.ar/prueba/nosotros_prueba_menu.html

El problema es que no logro centrarla a los t´tilos superiores ("Mejor Tecnología. Mejores Negocios.Distribuidor mayorista de tecnología informática.")

Estuve probando a ojo cambiando margins y paddings en distintos lugares del css, pero no logré corregirlo. Si tienen idea donde tengo que cambiarlo se los agradezco.

Saludos.

Bruno.

JMiur  

Basta colocarle margen al contenedor. Por ejemplo:

.mi-menu {
margin-left: 200px;
}

Unknown  

tengo un menu desplegable como este con un color de fondo como puedo hacer para k cada vez k se despliegue el menu el color de fondo tambien lo haga

JMiur  

Imposible decírte algo sin ver el ejemplo concreto.

Unknown  

muy buena aportación, pero me surge un detalle:
el menu esta bien pero en el submenu no me aparece visible se tapa con los objetos que hay detras ellos y eso provoca que no pueda ver completamente los submenus

JMiur  

Hay que ver tu ejemplo para responcer.

santimental  

Hola JMiur!.
Tengo un par de dudas al respecto del menú desplegable a ver si me puedes ayudar:
1.- Si seleccionas una categoría o entrada de una de las pestañas, encuentra las entradas, pero si quiero volver a seleccionar otra categoría no deja seleccionar. Debes ir a la página principal. Mejor si lo puedes ver en mi blog con un ejemplo http://dondecomesanti.blogspot.com.es
Marco las entradas de Raciones (en tipos de comida), pero si seguido quiero selecionar la pestaña Precio no me deja marcar +40€ porque se mezcla con el texto existente de la búsqueda anterior.
2.- Tampoco se recoge la pestaña si la has desplegado, lo cual sería muy útil para la versión móvil. Por cierto ¿cómo se adapta este menú a la versión móvil?.

Muchíiisimas gracias.

JMiur  

Eso pasa porque al cambiar de página, estás en una de etiquetas y aparece el cartel "Mostrando entradas con la etiqueta xxxxxx" por encima. Prueba agregando esto para hacer que ese cartel no quede encima:

.status-msg-body {z-index: inherit !important;}

También puedes ocultarlo con esto:

.status-msg-wrap {display:none;}

santimental  

Perdona JMiur, pero esto ¿dónde se pone exactamente?.

Además en cuanto al punto 2, ¿se pueden plegar los menús y submenús?¿se puede adaptar a la versión móvil?.

Te agradezco muchiisimo tu ayuda y paciencia, jejeje.

JMiur  

El CSS se coloca dentro de <b:skin> </b:skin> o entre etiquetas <style> <style>

El resto no puede responderse. A partir de la base puedes hacer cualquier modificación que será siempre específica para cada sitio o cada necesidad.

santimental  

Siento ser tan pesado pero ¿me podrías poner un ejemplo?, es que no tengo ni idea de CSS :(

Gracias JMiur.

JMiur  

¿Un ejemplo de qué? ¿De lo que preguntas en el punto 2? Eso es imposible, no hay manera de poner ejemplos sobre algo abstracto; son todas cosas muy personales y tienen variantes infinitas.

santimental  

Perdona veo que no me he explicado bien.

Me refiero a un ejemplo sobre lo que me has puesto para el punto 1, que no sé como hacerlo porque no se usar CSS. No sobre el punto 2.

Muchas gracias.

JMiur  

Simplemente debes copiar y pegar las dos reglas que te di.

santimental  

El problema es que al abrir el blog en formato HTML aparecen muchas líneas y no sé exactamente donde pegar esas dos reglas.

A ver si me entero de una vez y dejo de molestarte. Disculpa.

Muchas gracias.

JMiur  

Es lo que de dije antes, dentro de <b:skin> </b:skin>


Administrador  

Está fenomenal la info. muy útil

Pau Perramon  

Hola Jorge,

Este tutorial está genial, gracias!

Tengo una duda: por alguna razón el contenido de los menus desplegados aparece desplazado unos 20-30px a la derecha. Alguna idea?

Gracias de antemano!

JMiur  

Tendría que ver tu ejemplo para responderte ¿Dónde puede verse?

DEXTROID  

Exelente me ha servido de mucho!!

A R. T  

Hola JMiur, aprendo mucho de ti y si no escribo más seguido, es porque encuentro la respuesta en otras preguntas que ya hicieron.
Tengo un blog en el que usé un menú desplegable superior y, en una entrada un wow slider. Tengo un problema con los submenúes pues no despliegan correctamente sobre el slider. Me podrías ayudar?
Gracias y que tengas un lindo día,

JMiur  

Tendría que ver cuál es tu ejemplo concreto

A R. T  

JMiur. el ejemplo está acá: http://realestate-uruguay.blogspot.com/2013/05/un-dormitorio-carrasco-norte-avda.html

Muchas gracias!

JMiur  

Busca algo así en la plantilla:

.tabs-outer {
z-index: 1;
}

y aumenta ese valor; por ejemplo:

.tabs-outer {
z-index: 1000;
}

A R. T  

Funcionó con la sencillez y simpleza del que SABE!
Gracias mil!
Que tengas un precioso fin de semana!

Adrián  

Me he bajado el codigo y esta genial la verdad, pero tengo un problema, cuando un submenu tiene muchos apartados llega a superar el espacio de la pantalla y queda mal. He hecho pruebas para ver si podia dividirlo en 2 para que se vean a la derecha pegadas pero no tengo tanto conocimiento, me gustaria que la parte que supera la pantalla quedara a la derecha y no siguiera hacia abajo.

¿que puedo hacer?

Gracias

JMiur  

Tendría que ver tu ejemplo pero, en general, lo razonable es limitar la cantidad de items porque desde el punto de vista de la usabilidad, los menúes extensos no son prácticos.

Unknown  

Agradezco que hagas este tipo de aporte, esta genial.

Daniel Montilla  

gracias me serbio mucho

Unknown  

Genial, muy preciso ! :)

Edwin  

Alguien me podria ayudar? estoy tratando de hacer el tercer nivel pero si tengo 2 deplegables no me deja ver sino el primer item y se me pasa a la otra lista que siguede. Dejare el codigo para ver si alguien tiene idea de en que me puede ayudar por que soy nuevo en CSS y verdad que se me complica la cosa.

/* el menú en si mismo */
.Menu {
border-radius: 5px;
list-style-type: none;
margin: 0 auto; /* si queremos centrarlo */
padding: 0;
/* la altura y su ancho dependerán de los textos */
height: 40px;
width: 990px;
/* el color de fondo */
background: #555;
background: -moz-linear-gradient(#555,#222);
background: -webkit-linear-gradient(#555,#222);
background: -o-linear-gradient(#555,#222);
background: -ms-linear-gradient(#555,#222);
background: linear-gradient(#555,#222);
}

/* si es necesario, evitamos que Blogger de problemas con los saltos de línea cuando escribimos el HTML */
.Menu br { display:none; }

/* cada item del menu */
.Menu li {
display: block;
float: left; /* la lista se ve horizontal */
height: 40px;
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
.Menu li a {
border-left: 1px solid #000;
border-right: 1px solid #666;
color: #090; /*Color del texto inicial*/
display: block;
font-size: 13px;
font-weight: bold;
line-height: 30px;
padding: 0 23px;
margin: 6px 0;
text-decoration: none;
/* animamos el cambio de color de los textos */
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
/* eliminamos los bordes del primer y el último */
.Menu li:first-child a { border-left: none; }
.Menu li:last-child a{ border-right: none; }
/* efecto hover cambia el color */
.Menu li:hover > a { color: #F60; }

/* los submenús */
.Menu ul {
border-radius: 0 0 5px 5px;
left: 0;
margin: 0;
opacity: 0; /* no son visibles */
position: absolute;
top: 40px; /* se ubican debajo del enlace principal */
/* el color de fondo */
background: #222;
background: -moz-linear-gradient(#222,#555);
background: -webkit-linear-gradient(#22,#555);
background: -o-linear-gradient(#222,#555);
background: -ms-linear-gradient(#222,#555);
background: linear-gradient(#222,#555);
/* animamos su visibildiad */
-moz-transition: opacity .25s ease .1s;
-webkit-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}

/*Menu hacia los lados*/
.Menu ul ul {
left: 218px;
top: 5px;
border-radius: 5px 5px 5px 5px;
}

/* son visibes al poner el cursor encima */
.Menu li:hover > ul { opacity: 1; }

/* cada uno de los items de los submenús */
.Menu ul li {
height: 0; /* no son visibles */
overflow: hidden;
padding: 0;
/* animamos su visibildiad */
-moz-transition: height .25s ease .1s;
-webkit-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
.Menu li:hover > ul li {
height: 40px; /* Alto submenus */
overflow: visible;
padding: 0;
}
/*Ancho lineas y cuadros menus de nivel 2*/
.Menu ul li a {
border: none;
border-bottom: 1px solid #FFF;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
margin: 0;
padding: 5px 20px;
width: 178px;
}

/* el último no tiene un borde */
.Menu ul li ul li:last-child a { border: none; }

JMiur  

Imposible responder sin ver el ejemplo. El código que muestras es el mism que indica la entrada.

Edwin  

Basicamente si es el mismo codigo pero al montar el tercer nivel no me funciona bien, lo unico que he hecho propio es el siguiente codigo para el tercer nivel:

/*Menu hacia los lados*/
.Menu ul ul {
left: 218px;
top: 5px;
border-radius: 5px 5px 5px 5px;
}

Pero al usarlo al bajar por la lista del tercer nivel: de 1.1.1 a 1.1.2 se pasa al 2.1.1 y no puedo ver los niveles 1.1.2, 1.1.3...etc

JMiur  

sin ejemplo, no hay forma de saberlo

María J. Montiel  

Hola. Necesito algo de ayuda con el Blog.
Mis submenús no se despliegan por fuera, si la altura del gadget (retocada por el css) no ocupa todo el desplegable. Que se oculta, vaya.

He visto que en otros blogs queda bien, sin necesidad de ampliar la altura y que se despliegan por encima de lo que se muestra en el blog al pasar el cursor y no sé qué más tocar.

Aquí te dejo el blog, para que le eches un vistazo.
http://thedreamtoyggdrasil.blogspot.com.es/

JMiur  

Si se trata del menú superior, no veo tal cosa, se despliega normalmente.

María J. Montiel  

Hola. ¿Cómo puedo hacer que los elementos desplegados “floten” por encima de las publicaciones? Por fuera del gadget html.

JMiur  

Explícate un poco más.

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR