La cuestión de los menús desplegables o drop down y cómo no liarse 25.4.16
No hay nada más sencillo de construir que un menú desplegable. Y más sencillo aún hacerlo plénamente funcional sólo con Css. Y de cómo lograrlo va este artículo. Corregido y ampliado Abril de 2016.
La cuestión de los menús desplegables o drop down y cómo no liarse
No hay nada más sencillo de construir que un menú desplegable. Y más sencillo aún hacerlo plénamente funcional sólo con Css. Y dicho lo anterior me adelanto y respondo la pregunta que ya estás lanzando: por recuerdos atávicos y experiencias arcaicas.
Para realizarlos sólo se necesita un grupo de elementos ocultos que se mostrarán tras realizar alguna acción sobre otro. Un evento :hover, por ejemplo.
El típico marcado Html
Antes de continuar, y por si acaso algún visitante lo necesita para comprender mejor lo que sigue, aquí el típico marcado de un menú desplegable construido con listas:
<ul>
<li>
<a href="#">Opción 1</a><!--Visible-->
<ul><!--Lista de segundo nivel: opciones desplegables-->
<li><a href="destino1">Opción 1.1</a></li>
<li><a href="destino2">Opción 1.2</a></li>
</ul>
<li>
<li><a href="#">Opción 2</a></li>
</ul>
Un poco de historia
Hubo un tiempo que era obligado pensar en los IE´s. Especialmente en el difunto IE6. Fuente de todo tipo de dolores de cabeza. Una de sus muchas "bondades" para con los buenos artesanos del código y motivo de inflar el trabajo y las facturas era su "visión particular de la web".
Dos de estas eran su negativa a aplicar las pseudoclases (el :hover por ejemplo) a cualquier otro elemento que no fuese un enlace y que tampoco entendía los selectores de hermano.
Así que era obligado recurrir a otros lenguajes (js, flash...) o a verdaderas obras de ingeniería html para lograrlo sólo con Css. Obra que requería construir tablas falsas y css sólo visibles para IE6 mediante comentarios condicionales.
Compara el código anterior con el necesario para lograr los drop down menús con sólo Css y códigos que pasaban el validador:
<ul>
<li class="nivel1"><a href="#" class="nivel1">Opción 1</a>
<!--[if lte IE 6]>
<a href="#" class="nivel1ie">Opción 1
<table><tr><td>
<![endif]-->
<ul>
<li><a href="#">Opción 1.1</a></li>
<li><a href="#">Opción 1.2</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table></a>
<![endif]-->
</li>
</ul>
Una explicación detallada y multitud de estos menús son los realizados por Mikel Morote en su página araudi.net. Amén de otros muchos recursos a cada cual más ingenioso siempre pensando en su funcionamiento en IE6 y con códigos Html y Css válidos.
Pero todo este sobreesfuerzo y derroche de energías hoy es ya innecesario. Y lo último que yo recomendaría en 2013 es utilizar esta vía. Excepto en casos mínimos y situaciones muy muy específicas.
El menú desplegable paso a paso
Todo lo anterior es ya historia, y en muchos casos historia olvidada. Pero cuyos efectos aún persisten hoy en día en algunos realizadores. Así que aquí mi granito de arena para que logres menús desplegables plénamente funcionales sólo con Css:
Primer paso: el primer nivel de opciones
Comenzamos por crear las opciones de primer nivel del drop down. Esto es, las que siempre estarán visible y que actuarán como interruptor para mostrar las de segundo nivel u ocultas que añadiré en el segundo paso:
<nav id="menu_gral">
<ul>
<li><a href="#">Opción 1</a></li>
<li><a href="#">Opción 2</a></li>
<li><a href="#">Opción 3</a></li>
</ul>
</nav>
Para el ejemplo opto por incluir un id en la caja padre del menú <nav id="menu_gral"> para discriminar la lista y sus contenidos de otras listas o menús (nav) que pudiera haber en la página.
También doy por asumido que en la página hay algún tipo de reset. Así que saltamos esa parte y declaramos los estilos para estos:
#menu_gral {
font-family: verdana, sans sherif;
width: 80%;
margin: 1.5rem auto;
}
#menu_gral ul {
list-style-type: none;
text-align: center;
font-size: 0;
}
#menu_gral > ul li {
display: inline-block;
width: 25%;
position: relative;
background: #FF7361;
}
#menu_gral li a {
text-decoration: none;
font-size: 1rem;
color: #444;
display: block;
line-height: 2.5rem;
}
#menu_gral li a:hover,
#menu_gral li a:focus {
background: #444;
color: #fff;
}
En #menu_gral centramos el menú y dejamos un poco de espacio a su alrededor con el margen y su anchura. También dejamos declarada la tipografía utilizada.
En #menu_gral ul retiramos la viñeta que por defecto tienen los elementos de una lista, alineamos al centro sus contenidos (y el de sus descendientes) y por último pongo el tamaño de la tipografía a cero para evitar el espacio de separación entre los li (por su display). Ver explicación detallada.
En #menu_gral > ul li Utilizo el selector de hijo directo (>) para evitar que sus propiedades sean heredadas por los li de segundo nivel (las opciones que se desplegarán). Las otras 2 reglas son porque he optado por un menú en horizontal en la demo con la anchura en cada item homogénea e independiente de su contenido. Son cuatro, así que cada uno al 25% (de su padre). Y muy importante: lo posicionamos como relative para que el desplegable se coloque respecto a él.
Si se quiere el menú en vertical, un item encima de otro, bastaría con cambiar su display: block en los li´s y ajustar la anchura al 100%. Declarando, como es lógico, la anchura de #menu_gral a la necesaria.
En #menu_gral li a quitamos el subrayado propio de los enlaces, ajustamos el tamaño de la tipografía al gusto (recuerda que por herencia estaba a 0) y su color. Al hacerlo elemento de bloque (block) ajustamos automáticamente su anchura a toda la de padre y por lo tanto su zona activa. Aquí viene un punto interesante: si te has fijado, hasta ahora no se han marcado alturas ni he mencionado el centrado en la vertical de los items. Estos dos detalles los conseguimos con el valor de line-height.
En #menu_gral li a:hover, #menu_gral li a:focus jugamos con el Css para poner de manifiesto el item que recibe el foco.
Las propiedades y valores de estas dos últimas reglas sí son heredadas por los enlaces del desplegable porque utilizo selectores de "descendientes" (los elementos del selector separados por un espacio).
El resultado de todo lo anterior es el que ves en la imagen:
Segundo paso y último: las opciones desplegables
Lo primero es incluir las opciones de segundo nivel en el Html, dentro de aquellos li´s se necesiten y fuera de los enlaces que ya existían de antes:
<nav id="menu_gral">
<ul>
<li><a href="#">Opción 1</a>
<ul><!-- Segundo nivel desplegable -->
<li><a href="#destino1-1">Opción 1.1</a></li>
<li><a href="#destino1-2">Opción 1.2</a></li>
<li><a href="#destino1-3">Opción 1.3</a></li>
</ul>
</li>
<li><a href="#">Opción 2</a></li>
Lo primero que hay que hacer es ocultar estas opciones para que no se muestren hasta no necesitarlas. Por una cuestión de accesibilidad renunciamos al display: none
#menu_gral li ul {
position: absolute;
width: 0;
overflow: hidden;
}
position: absolute; evitará movimientos en el resto de elementos que haya después del menú al mostrarse esta lista.
El siguiente paso es como antes, estilizar este bloque de opciones desplegables en su estado de "reposo" y al recibir el foco para mostrarse. Tanto la lista (ul) como sus hijos: los li´s y sus enlaces del segundo nivel.
#menu_gral li li {
display: block;
width: 100%;
}
#menu_gral li:hover li a,
#menu_gral li:focus li a {
display: block;
font-family: monospace;
font-size: .9rem;
line-height: 1.7rem;
border-top: 1px solid #e5e5e5;
background: #444;
}
#menu_gral li li a:hover,
#menu_gral li li a:focus {
background: #8AA9B8;
}
El Css anterior básicamente es para pisar alguno de los estilos heredados o para diferenciar estos items de los del primer nivel./p>
Y para terminar sólo resta mostrar cada grupo de estos enlaces del drop down menu al recibir el :hover, ya sea por ratón o teclado:
#menu_gral li:hover ul,
#menu_gral li:focus ul {
width: 100%;
z-index: 5;
margin: 0 -4rem -4rem -4rem;
padding: 0 4rem 4rem 4rem;
background: #bbb;
}
Sencillo. Reescribimos su anchura al 100% (la habíamos declarado 0).
El z-index para que se muestre sobre (eje z) el resto de elementos que haya después de esta lista en el html.
Las declaraciones del margin y padding de esta lista son para crear una pequeña zona de seguridad de 4rem en los laterales y parte inferior de la lista. De esta manera aunque salga el cursor de ella no se cierra. El fondo gris del foco ampliado es para hacerla visible en la demo de abajo o en jsfiddle.
Si quieres saber un poco más sobre esa zona gris de la demo o zona de seguridad
para que no se cierre el desplegado tienes el artículo dedicado a este detalle en:
Menú con zona activa de seguridad (foco) ampliada
Variaciones
En base a esta forma de construir los menús desplegables o drop down
es sencillo adaptarlo a otros casos, como puede ser que las opciones de primer nivel se muestren en vertical limitando la anchura ocupada por ellos.
En vertical a la izquierda o derecha
Sólo es necesario declararle el valor deseado en width a la caja padre y posicionar la lista de segundo nivel convenientemente (left: 100% para que se muestre a la derecha o right: 100% para que lo haga a la izquierda).
Con eso junto a mantener la naturaleza de los li como elementos de bloque y poco más la apariencia y funcionamiento es el siguiente:
See the Pen BygKGL by Kseso (@Kseso) on CodePen.
En vertical hacia abajo
Y si quisieras que la lista de segundo nivel y sus opciones se desplegasen debajo de su ítem desplazando el resto de opciones visibles, sólo es cuestión de no sacarlas del flujo del documento position: relative, con tamaño 0 (cero) mientras estén replegadas y al desplegarlas hacer que recuperen su altura:
See the Pen LEKZjV by Kseso (@Kseso) on CodePen.
En este caso hay que tener cuidado con cierto comportamiento. Pon el puntero sobre la "opción 2" y desplázate hacia abajo. Al salir el puntero del último de sus ítems de segundo nivel (opción 2.2) verás que ocurre al replegarse: el foco queda no sobre "opción 3" si no sobre el 4º.
Horizontal hacia abajo anchura total
Otra típica y muy empleada variación consiste en que las opciones desplegables ocupen toda la anchura del menú, no de cada item.
Para lograrlo sólo es necesario que las opciones de primer nivel esté con position: estatic para que su tamaño y ubicación dejen de ser el referente para su grupo de ítems desplegables (su contenido).
Como en esta demo:
See the Pen mJyVWP by Kseso (@Kseso) on CodePen.
En el artículo "Mega menú Css. Guía de creación" tienes una explicación detallada de su construcción y códigos, así como otras demos un poco más elaboradas.
Ver post "Mega menú Css. Guía de creación"
Y en base a esta misma variación se puede ir un poco más allá sólo con un poco de imaginación para lograr cosas como este "droUpDown Menu animado puro Css".
Más menús CSS a la carta
Si después de todo el artículo aún te has quedado con hambre de más menús en puro CSS tienes suerte. Con el paso del tiempo he ido publicando distintas entradas sobre ellos. Unas más básicas como las que ya he mencionado y otras un poco más elaboradas o vistosas.
Alguno en hexágonos, otros en el famoso hamburger menu
, navicon o trigram, otros aparecen letra a letra... étc.
Observaciones finales
- En los códigos Css de este artículo he priorizado la comprensión de los selectores (hacer más evidente a qué elemento apunta) que el optimizarlos.
- Lo mismo con las declaraciones. Posíblemente puedieran purgarse algo.
- La estética está descuidada y la elección de colores y otros detalles es notoriamente mejorable.
- La ausencia total de transiciones y/o transformaciones css es voluntaria. Bastaría aplicar una pizca de éstas para que su funcionamiento nada tenga que envidiar a los efectos logrados con js. Algunos de ellos los encontrará en otras demos del blog.
Artículo publicado originalmente en Abril de 2013. Actualizado y ampliado en Abril de 2016.
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
Hola +Kseso...
ResponderEliminarEn primer lugar, te felicito por compartir el procedimiento mostrado en el post...
En segundo lugar, permíteme hacerte la siguiente consulta: sabemos que el evento "hover" no existe en los dispositivos móviles (iPad/tablet o iPhone/smartphone)... ¿Es posible adaptar tus códigos sin hacer uso de jQuery o JavaScript?
Saludos desde Lima, Perú...
Hola César
ResponderEliminarNo estoy muy al día en sobre el desarrollo para los chismes táctiles. Pero creo recordar que si a todos los selectores que incluyen la paseudoclase :hover añades el mismo con la pseudoclase :focus no necesitarías de js.
Tal como está en la demo.
a:hover,
a:focus
{
/* declaraciones necesarias */
}
Gracias por tu visita y participación.
Un saludo
En vez de
ResponderEliminar#menu_gral li:hover ul, #menu_gral li:focus ul
{ ...
margin: 0 -4rem -4rem -4rem;
...
}
¿no sería lo mismo?
#menu_gral li:hover ul, #menu_gral li:focus ul
{ ...
margin: 0 0 0 -4rem;
...
}
¿O trae algún inconveniente?
ninguno invecil
Eliminarninguno invecil
EliminarEnhorabuena, campeón.
EliminarEn una frase de dos palabras "sólo" cuatro faltas. Deberías pensar quién es el imbécil, tanto por Alelado, poco inteligente como por [Persona] que molesta haciendo o diciendo tonterías.
Como verás encajas en ambas acepciones.
Y ahora haznos felices a todos y no vuelvas a aparecer por aquí y mucho menos comentar en mi blog.
Hola George
ResponderEliminarPosíblemente en la demo sí. Sólo tienes que jugar con el código. Puedes hacer las pruebas diréctamente en jsfiddle.
Y la razón, tras un vistazo rápido, es porque la lista de segundo nivel tiene una anchura del 100% y que en el ejemplo uso el box-model tradicional y no el que últimamente manejo por defecto: box-sizing: border-box;
Un saludo
Hola Kseso,
ResponderEliminarGracias por el post. Está genial.
Estoy intentando añadir un subnivel más, pero no lo logro. ¿Qué tendría que hace?
Muchas gracias
Hola Pablo
EliminarLa técnica para añadir subniveles es la misma para el primero que para el segundo y sucesivos.
Lo único que quizás necesites es ser más específico con los selectores para mostrar el 'ul' escondido.
Ya sea añadiendo clases esas listas o utilizando el selector de hijo directo '>'
Tomando como ejemplo el marcado de post
#menu_gral > li:hover ul {
/* declaraciones para primer subnivel */
}
#menu_gral li li:hover ul {
/* declaraciones para segundo subnivel */
}
Un saludo y gracias
P.D.: selectores sin optimizar
Muchísimas gracias, Kseso
ResponderEliminarVerás, sigo teniendo problemas. Te cuento más en detalle. En realidad quiero rehacer un menú desplegable que hice modificando estilos de un Spry del Dreamweaver, puedes verlo en www.avelinosala.es
El caso es que ahora funciona con Safari y Firefox perfectamente, pero algo debe ir mal con el java, porque en móviles y en tabletas no va bien (en Chrome directamente ni va). Así que estoy viendo la forma de hacerlo directamente con HTML y CSS, pues entiendo que es el java lo que da problemas.
Sin embargo, los CSS me vuelven loco. El cao es que al añadir a “2013” otro subnivel, éste me aparece directamente debajo de 2013 y no al lado, vamos, que lo coloca en el ,mismo nivel. He añadido unas declaraciones a #menu_gral li li:hover ul, pero nada.
Te adjunto las modificaciones que he hecho hasta ahora en tus CSS para adecuarlas a mi diseño. (Te adjuntaría también el HTML, pero no me lo permite el blog, porque me dice que la etiqueta ul no es aceptable.)
Muchas gracias por tu ayuda, y disculpa el acoso.
CSS
* {
margin: 0;
padding: 0;
border: o none;
position: relative;
}
#menu_gral {
font-family: Arial, Helvetica, sans-serif;
width: 100%;
margin: 0;
}
#menu_gral ul {
list-style-type: none;
text-align: center;
font-size: 0;
}
#menu_gral > ul li {
display: inline-block;
width: 110px;
position: relative;
background: #c6e5fa;
}
#menu_gral li a {
display: block;
text-decoration: none;
font-size: 12px;
line-height: auto;
padding: 0.5em 0.75em;
color: #000;
}
#menu_gral li:hover a, #menu_gral li a:focus {
background: #d0d1d3;
color: #000;
}
#menu_gral li ul {
position: absolute;
width: 0;
overflow: hidden;
}
#menu_gral li:hover ul, #menu_gral li:focus ul {
width: 100%;
margin: 0 -4rem -4rem -4rem;
padding: 0 4rem 4rem 4rem;
z-index: 5;
}
#menu_gral li li {
display: block;
width: 100%;
}
#menu_gral li:hover li a, #menu_gral li:focus li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: auto;
font-weight: bold;
background: #c6e5fa;
}
#menu_gral li li a:hover, #menu_gral li li a:focus {
background: #d0d1d3;
}
#menu_gral li li:hover ul {
position: relative;
width: 0;
overflow: hidden;
left: 110px;
}
El problema de partir de una realización ajena basada en otros lenguajes que no se dominan (como dices que es tu caso) es que se deben hacer los cambios uno a uno verificando cambio por cambio y revertirlo en caso de malfuncionamiento.
EliminarSi no se hace así llega un momento que te encontrarás perdido y sin saber cómo arreglar el desaguisado.
Vamos por partes. Tus opciones de 2º nivel (2013) aparecen debajo (eje y) y no al lado porque no declaras su ubicación en el selector #menu_gral li:hover ul, #menu_gral li:focus ul
Selector que repites al final (en el código que pusiste en este comentario).
Yo te sugiero que si te encuentras con muchos problemas con esa realización partas de cero con otra basada en puro css.
Un buen lugar podría ser la página de Stu Nicholls y sus menús
Un saludo.
P.D.: si quieres publicar código html en el blog tienes que cambiar todos los < por su entity correspondiente < ; (sin el espacio en blanco antes del punto y coma)
Y mételo entre las etiquetas <em></em>
En estas etiquetas sí puedes usar el símbolo 'menor qué' sin entidades.
Limitaciones de blogger.
Hola Kseso,
ResponderEliminarTío, muchísimas gracias. Me has salvado la vida.
He vuelto a hacerlo de nuevo partiendo de un menú de Stu Nicholls (CSS3 menús). Me ha costado un poquito trastear con las CSS sobre una de las plantillas, pero finalmente lo he adecuado a mi diseño perfectamente.
Gracias mil
Un abrazo
Hola que tal, me sirvió de retroalimentación y te agradezco el post.
ResponderEliminarTengo una pregunta: Se puede crear un menú deplegable pero que sólo algunos usuarios tengan acceso a ciertos elementos, o que vean todos los elementos del submenú pero que se pueda bloquear con una clave directa para poder acceder?
Espero me haya explicado un poco y que me puedas orientar en esa duda.
Muchas Gracias!
Claro que se puede, Eduardo.
EliminarY de hecho es algo muy común en cualquier aplicación.
Pero no corresponde a Css ese aspecto.
Debe ser el lenguaje de programación que uses para crear la aplicación el que en función de si el usuario se autentifica (del lado del servidor) o no le ofrezca unas opciones y otras.
Pero ese no es el cometido o encomienda del lenguaje de las hojas de estilo en cascada.
Un saludo
hola;
ResponderEliminarsuper interesante tu post, muchas gracias;pero tengo una pregunta: tengo un menu desplegable utilizando html5 y cc3 como losplicas arriba, pero no me funciona en ipad, ni iphone, tienes alguna idea de lo que pueda hacer.
De antemano muchas gracias.
www.eroticosenlaciudad.com
A falta de información precisa y concreta sobre los códigos que estás utilizando (aka tu propia realización) sólo puedo remitirte a mi primer comentario en respuesta a César.
EliminarN.B.: tu enlace final sobra y está demás, tal como lo has dejado ahí tirado, además de ser poco o nada efectivo. ¿No viste que blogger añade un nofollow a los enlaces incluidos en los comentarios?
Como le hago para poner la barra que contiene esta pagina web, al posicionar el mouse en el margen derecho??
ResponderEliminarpodría utilizarla para alojar en ella un enlace de un servidor que transmite una radio en vivo, y que al mismo tiempo se escuche pero que este oculta cuando no se ocupe prender/apagar o bajar/subir el volumen y si se ocupara que se visualizara solo al posicionar el mouse en el margen o lugar donde la posicione??
Hola Marco
EliminarCss es un lenguaje que no se puede "esconder". Todas las reglas de ese menú son totalmente accesibles al visitante.
Lo mismo para el marcad html.
Sólo tienes que usar cualquier inspector de código (como firebug en Firefox) o el que ya trae integrado cada navegador o complementos como "Web Developer Toolbar" en Firefox para hacerte con ellos.
En concreto, los estilos del menú lateral están señalados muy visiblemente con un comentario condicional que los precede:
/*************************
MENU LATERAL
**************************/
.trigram {
Un saludo
Excelente información...Felicidades
ResponderEliminarTengo una consulta sobre un megamenu, ¿cómo sería la forma para crear un menú de estilo como éste:? http://www.moosejaw.com/
Bien lo primero es si ya lo has explicado te agradecería si puedes pasarme el enlace, segundo en si mi pregunta se basa en hacer los li y demás internos con ese ancho a 100%.......si se que puedo ver el código y la verdad seguro lo saco solo que como explicas tan bien me gustaría saber tu opinión al respecto o si vas a hacer algún tutorial respecto a megamenu.
Muchas gracias
Gracias Josue
EliminarA ese tipo de construcción como tal creo que no le he dedicado artículo. Si lo quieres intentar sólo tiene un par de detalles básicamente: mantener al li con position: static y al elemento que se despliega darle una anchura igual al ul>
Quizás en lo que le dedico un post a esta variante puedas compararlo con alguna de las realizaciones sobre tabs o pestañas de las que sí hay donde elegir.
Un saludo
amigo como hago para que se muestre todo en una solo ventana, mira tengo un menu de navegacion y pero yo quiero que la accion de los botones se muestre en la misma pantalla. osea si uno de los botones es para mostrar una tablas pues que se muestre en en la misma pantalla, no quiero que la habra en otra pagina,
ResponderEliminarHola David
EliminarHas de tener presente que Css sólo aplica y se maneja con lo que haya en la página.
Así que para evitar recargar la página o ir a otra distinta tienes dos opciones:
1ª) Sistema de pestañas, tabs o como quieras llamarlas.
Esto significa que todo el contenido ha de ser cargado (estar presente en la misma página). Problemático si es muy extenso.
2ª) Usar algún lenguaje de programación para renovar el contenido que te interese sin necesidad de recargar la página o ir a otra url (por ejemplo con Ajax)
Si quieres tantear la primera opción en este post tienes algunos ejemplos
Un saludo
hola, tengo una dificultad y es que tengo un menu que despliega hacia abajo normal pero al bajar el puntero el menu desaparece y no logro seleccionar las opciones de este menu sinembargo solo al pasar el puntero hacia abajo d una forma rapida si logro seleccionar una opcion no se que pasa
ResponderEliminargracias
La razón está clara: pierde el foco y por eso queda sin efecto el :hover
EliminarLa causa: a saber. El adivino desertó y yo sin ver códigos...
Un saludo
Hoy no vengo agradecer, hoy vengo a retar (o a que me hagan el trabajo) me he propuesto hacer un menú circular (depronto un menú con iconos o textos) pero como de esos hay muchos ejemplos en la marea, estoy pensando realizar uno con subniveles dentro de las opciones, tal vez 1 o 2 y ver que tan viable puede ser.
ResponderEliminarSaludos y ya veremos sí es que no escupo al aire. jeje
pd: ahora si, Gracias.
Pues tengo una noticia buena y otra mala para ti, g3kdigital
EliminarUna es que el blog de los encargos es el de al lado ;-)
La otra es que de ese tipo de menú circular doble, si no recuerdo mal, ya hay ejemplos y demos publicados.
Sólo es cuestión de suerte en la búsqueda y que alguno de ellos coincida con tu trabajo.
Un saludo.
Buenas! No se donde cometo el fallo, pero llevo varias horas intentando y no consigo hacer que mi menú se despliegue :(
ResponderEliminarhttp://tu-seras-mi-baby.blogspot.com.es/
No hay menú desplegable y ni siquiera consigo enlazar una página a lo que tengo hecho
¿Sabes donde puedo estar fallando?
No soy muy entendida en esto, pero necesito ese menuu :(
Te felicito por el Blog
Saludos
Stefania
(Si, te escribí por Facebook también)
Creo María que el siguiente te podría servir como base para tu menú:
Eliminar[pen]data-height="350" data-theme-id="299" data-slug-hash="oLWRbq" data-default-tab="css,result" data-user="Kseso" data-embed-version="2" class="codepen"[/pen]
Es una demo con un mínimo de estilos y usando un id como selector diferenciador de todas las posibles listas que puedas tener en tu blog.
Seguro que por herencia o cascada habrá interferencias del CSS actual de tu blog que necesitarás "pisar" con declaraciones específicas.
Espero que con esto como base puedas lograrlo.
Un saludo
Hola Kseso,
ResponderEliminarEn primer lugar, felicitarte por tu blog.
Me encanta todo lo relacionado con el universo CSS3, pero tengo un problemilla que quizás tú me puedas solucionar: "Al añadir el menú desplegable con todas las opciones del submenú, me ocurre que "aside" y "section" se desplazan hacia abajo justo al límite inferior del submenú.
¿Cómo puedo evitar ese problema? Seguro que existe un atributo CSS3 que ayuda a evitar ese problema, pero yo lo desconozco por completo.
He probado con "float" y "clear", pero no he conseguido nada.
Mi intención es mantener el efecto hover de pasar el ratón por encima y desplegar todas las opciones del submenú, al mismo tiempo que puedan verse justo por encima del "aside" y "section", y sin la necesidad de que se desplacen hacia abajo.
Muchas gracias de antemano, por tomarte un tiempo en leer mi comentario.
Por lo que dices, paikerr, del movimiento del 'aside' y 'section' al mostrarse las opciones ocultas creo que te has olvidado declarle la posición absoluta, tal como indico en el segundo código del apartado "Segundo paso y último: las opciones desplegables"
EliminarUn saludo
Muy buen menú, me salio todo perfecto salvo que cuando despliega el menú se me esconde atrás del primer elemento del body, probé poniendo el z-index en valor 0 pero nada
ResponderEliminaralguna sugerencia hermano?
saludos
Solucionado le puse un z index de 9999 muchas gracias bro excelente menu.
Eliminarsaludos
Gracias tio, que Jehová Dios te bendiga
ResponderEliminarMuchas gracias, ha sido la mejor explicación que he encontrado en todo internet. Solo una consulta, si quiero que la barra de menus me abarque toda la pantalla ¿Que debo hacer? intenté ponerle el 100% al width en #menu_gral pero nada, siempre me deja un margen a ambos lados de la pantalla.
ResponderEliminarGracias Yusef aunque creo que no es para tanto xD
EliminarSobre tu consulta y a falta de poder ver tus códigos, supongo que estaremos ante un caso muy parecido a la demo que incluyo en el comentario 15.1
SI es así, fíjate que las listas <ul> son elementos de bloques y por lo tanto ocuparán toda la anchura que esté disponible.
En esa demo así lo hace y pese a tener su margin y padding puestos a 0 queda ese espacio lateral sin ocupar (como te ocurre a ti).
La razón no está ni en su tamaño declarado (en el ejemplo no tengo declarado su width) ni computado (al ser elemento de bloque ocupa el 100% de su padre).
Así que el porqué de esos espacios laterales hay que buscarlos en alguno de sus ancestro: en este caso en su padre, el elemento <body>
Más concretamente, esos espacios son debidos a que por defecto hay navegadores que aplican un pequeño margen al body.
Por ejemplo en Chrome (el navegador que estoy usando para responderte) son 8px.
La solución, anularlos con una declaración expresa.
Si te fijas en mis demos verás que en casi todas utilizo un mini reset donde anulo esos píxeles y alguna cosilla más:
[code]
*, *:before, *:after {
box-sizing: inherit;
}
* {
margin:0;
padding:0;
border:0 none;
position: relative;}
html {
background: #036C52;
box-sizing: border-box;
}
[/code]
En el caso de la demo del 15.1 no la incluí porque estaba pensada para incluir en un código ya existente y posíblemente fuese causa de roturas.
Un saludo
muy bueno el menu, si me funciono pero solo tengo una duda, hay alguna forma de ponerle diferente color a cada cuadro del primer nivel en ves de que todos tengan un mismo color?
ResponderEliminargracias
Sí, claro.
EliminarSólo necesitas "apuntar" a cada ítem de primer nivel con el selector CSS correspondiente.
O bien añadiendo una clase diferente a cada uno de ellos o haciendo uso de selectores por pseudoclases como puede ser :nth-child() o similares.
Un saludo
Me pierdo en lo de "Y muy importante: lo posicionamos como relative para que el desplegable se coloque respecto a él". Yo estoy acostumbrado a usar position acompañado de left/right/top/bottom y cuando va solo no entiendo por qué.
ResponderEliminarHola Álamo
EliminarRespuesta rápida:
El valor inicial o por defecto de position es static.
Dicho valor hace que los elementos no sean los referentes (para su contenido) en lo que a ciertas propiedades se refiere.
Como las que tú mencionaste de ubicación, calcular medidas de tamaños declaradas en %, contexto de apilamiento (z-index), étc.
Y como este post está desarrollado pensando en quienes estén en un estadio muy inicial en el conocimiento de CSS creí oportuno resaltarlo.
Un saludo.
P.D.: si fuese demasiado concisa mi respuesta me lo dices.
Gracias pero creo que la respuesta es demasiado concisa. ¿Tienes algún artículo en este blog donde analices esto con más detenimiento? Me temo que hay alguna cosa de static/absolute/relative que no tengo clara y me está dando problemas.
EliminarVeamos, Álamo
Eliminarel efecto del valor static
para el mismo elemento:
No aplican (son ignoradas y no tienen efecto) las propiedades de ubicación (top, right, bottom, left).
No aplica (es ignorada) la propiedad z-index, por lo que no crea lo que se conoce como "stacking content" o contexto de apilamiento.
Entre otras.
para sus hijos
No es referente (el elemento estático) para ubicar a sus hijos cuando se usan posiciones absolutas (fixed incluido).
Por lo tanto
- si un hijo de 'static' se posiciona de forma absoluta lo hará respecto a un ancestro cuya posición sea distinta a static.
- si a un hijo de 'static' le damos tamaño en % el cálculo lo hará no sobre la anchura de su padre (que es 'static') si no sobre el tamaño de un ancestro que no esté como 'static'
Por eso en el último pen de ejemplo el 'div' (li > div) que se muestra al :hover tiene a la lista ('ul') y no a su padre el 'li' como base de cálculo para su tamaño y lugar donde se muestra.
Para estos casos de comprensión, Álamo, lo mejor es que abras el pen en una pestaña nueva y juegues cambiando valores y observando qué ocurre con cada cambio.
Un saludo.
Hola! En cuál archivo .css va todo esto? estilo, bootstrap? Cuál? Gracias!
ResponderEliminarEso es una cuestión que dependerá del sistema de gestión y manejo de archivos que estés utilizando.
EliminarPero como sugerencia en cualquier hoja de estilos que ya se llame siempre que sea cargado el menú.
Un saludo