Menú
Está libre
registro
hogar  /  Programas/ Estire el menú al ancho completo del CSS. ¿Cómo hacer un menú de respuesta flexible en css? Marcado HTML y estilos básicos para un menú horizontal

Estire el menú al ancho completo del CSS. ¿Cómo hacer un menú de respuesta flexible en css? Marcado HTML y estilos básicos para menús horizontales

Un diseño bastante común del menú del sitio, cuando el contenedor con él ocupa todo el ancho disponible en la página. En este caso, el primer elemento está adyacente al borde izquierdo y el último al derecho, y la distancia entre todos los elementos es igual. Hoy te contamos cómo se hace esto.

Le ofrecemos un ejemplo de cómo implementar un menú de goma usando CSS para su recurso. En este menú, los elementos se ubicarán en una línea. No se utilizará JavaScript. El contenido del menú se incluirá en una lista regular. La característica principal de dicho menú es su versatilidad, que se expresa en el hecho de que tanto el número como la longitud de los elementos pueden ser cualquiera.

¿Cómo implementar esto?

Cada programador puede ofrecer su propia forma de resolver el problema. Todo depende de su imaginación, nivel de profesionalismo y habilidades. La solución más común a este problema es utilizar una tabla. Además, muchos sugerirían usar javascript. Aquellos que sugerirían usar la propiedad de visualización con el valor mesa o celda de tabla- Me apresuro a enfadarme. Este método no es suficientemente compatible con varios navegadores.

Nuestra solución

Nuestra propuesta se construirá sobre una base sólida de conocimientos de HTML5 y CSS3.

El núcleo del proceso se basa en la propiedad text-align con un valor de justificación. Para aquellos que lo han olvidado, les recuerdo: esta propiedad orienta la alineación del texto en todo el ancho del contenedor.

Hay dos reglas esenciales a seguir al utilizar nuestra solución. La primera es que el ancho del contenedor de elementos de menú debe ser menor que el texto. Es decir, no en una sola línea. La segunda regla importante es que las palabras se estiran por igual, independientemente de si pertenecen al mismo punto o no.

A continuación se muestra el código que sirve como ejemplo de creación de un menú "caucho":

HTML

< ul> < li>< a href= "#" >hogar < li>< a href= "#" >Blog < li>< a href= "#" >Noticias < li>< a href= "#" >Popular < li>< a href= "#" >Nuevos objetos

ul (alinear texto: justificar; desbordar: oculto; / * elimina los efectos secundarios del método * / altura: 20px; / * elimina lo innecesario también * / cursor: predeterminado; / * establece la forma original del cursor * / margen: 50px 100px 0 100px; fondo: #eee; relleno: 5px; ) li (pantalla: en línea; / * hace que los elementos del menú sean texto * /) li a (pantalla: bloque en línea; / * arregla el salto de palabra en el menú * / color: # 444; ) a: hover (color: # ff0000;) ul: after ( / * formación de la segunda línea para elaborar el método * / contenido: "1"; margen izquierdo: 100%; altura: 1px; desbordamiento: oculto; pantalla: bloque en línea; )

Para trabajar en el viejo Internet Explower, debe agregar el siguiente código al CSS

ul (z- index: expression (runtimeStyle. zIndex = 1, insertAdjectedHTML ("beforeEnd & apos,"< li class = "last" > "));) ul .last (margin-left: 100%;) * html ul (/ * solo se necesita ie6 * / height: 30px;)

Habiendo registrado los valores de propiedad necesarios y el código, obtenemos el siguiente menú de goma:

Desventajas del método

  1. Código a granel
  2. Incapacidad para determinar el estado activo de un elemento a través de un selector de clases. Esto se debe a la ruptura de las palabras en los párrafos (si es que hay una). La solución a este problema es agregar otro contenedor dentro de los elementos de la lista.
  3. Para el menú desplegable, debe personalizar el código debido al impacto negativo del desbordamiento.

¿En qué navegadores funciona?

6.0+ 6.0+ 10.5+ 5.0+ 3.6+ - -

Menú horizontal es una lista de secciones del sitio, por lo que es más lógico marcarlo dentro del elemento

    y luego aplicar estilos CSS a sus elementos. Esta disposición del menú es la más común debido a las evidentes ventajas en su posicionamiento en una página web.

    Cómo hacer un menú horizontal: ejemplos de marcado y diseño

    Marcado HTML y estilos básicos para un menú horizontal

    De forma predeterminada, todos los elementos de la lista se colocan verticalmente, ocupando todo el ancho del elemento contenedor en ancho, que a su vez ocupa todo el ancho de su bloque contenedor.

    Marcado HTML para navegación horizontal

    Opcionalmente, se puede colocar un menú horizontal dentro de una etiqueta dentro de un elemento.

    y / o
    ...
    ... Gracias a esto, se le da un significado semántico al marcado html, así como una oportunidad adicional para formatear el bloque de menú.

    Hay varias formas de colocarlos. horizontalmente... Primero, debe restablecer los estilos de navegador predeterminados para los elementos de navegación:

    Ul (estilo de lista: ninguno; / * eliminar marcadores de lista * / margen: 0; / * eliminar margen superior e inferior igual a 1em * / padding-left: 0; / * eliminar margen izquierdo igual a 40px * /) a ( text-decoration: none; / * eliminar el subrayado del texto del enlace * /)

    Método 1.li (pantalla: en línea;)

    Poner los elementos de la lista en minúsculas. Como resultado, se colocan horizontalmente, en el lado derecho entre ellos se agrega un espacio igual a 0.4em (calculado en relación con el tamaño de la fuente). Para eliminarlo, agregue un margen derecho li negativo para li (margin-right: -4px;). A continuación, aplicaremos el estilo que queramos a los enlaces.

    Método 2.li (flotación: izquierda;)

    Flotando los elementos de la lista. Como resultado, se colocan horizontalmente. La altura del bloque de contenedores ul se vuelve cero. Para resolver este problema, agregamos (overflow: hidden;) al ul, expandiéndolo y permitiendo así que contenga elementos flotantes. Para los enlaces, agregue un (display: block;) y modifíquelos como desee.

    Método 3.li (pantalla: bloque en línea;)

    Hacemos los elementos de la lista inline-block. Están ubicados horizontalmente, se forma un espacio en el lado derecho, como en el primer caso. Para los enlaces, agregue un (display: block;) y modifíquelos como desee.

    Método 4.ul (pantalla: flex;)

    Haciendo del ul un recipiente flexible usando un modelo. Como resultado, los elementos de la lista se organizan horizontalmente. Agregue un (display: block;) para los enlaces y modifíquelos como desee.

    1. Menú adaptable con un efecto de subrayado al pasar el cursor sobre un enlace.

    • Trabaja
    • Sobre
    • Blog
    • Contacto
    @import url ("https://fonts.googleapis.com/css?family=Ubuntu+Condensed"); .menu-main (list-style: none; margin: 40px 0 5px; padding: 25px 0 5px; text-align: center; background: white;) .menu-main li (display: inline-block;) .menu- main li: after (content: "|"; color: # 606060; display: inline-block; vertical-align: top;) .menu-main li: last-child: after (contenido: ninguno;) .menu-main a (decoración de texto: ninguna; familia de fuentes: "Ubuntu Condensed", sans-serif; espaciado entre letras: 2px; posición: relativa; fondo de relleno: 20px; margen: 0 34px 0 30px; tamaño de fuente: 17px; text-transform: mayúsculas; display: inline-block; transición: color .2s;) .menu-main a, .menu-main a: visitado (color: # 9d999d;) .menu-main a.current, .menu- main a: hover (color: # feb386;) .menu-main a: before, .menu-main a: after (content: ""; position: absolute; height: 4px; top: auto; right: 50%; bottom : -5px; izquierda: 50%; fondo: # feb386; transición: .8s;) .menu-main a: hover: before, .menu-main .current: before (left: 0;) .menu-main a: hover: after, .menu-main .current: after (derecha: 0; ) @media (max-width: 550px) (.menu-main (padding-top: 0;) .menu-main li (display: block;) .menu-main li: after (content: none;) .menu- principal a (relleno: 25px 0 20px; margen: 0 30px; ))

    2. Menú adaptable para el sitio de la boda

    @import url ("https://fonts.googleapis.com/css?family=PT+Sans"); .top-menu (posición: relativa; fondo: #fff; box-shadow: inset 0 0 10px #ccc;) .top-menu: before, .top-menu: after (content: ""; display: block; height : 1px; border-top: 3px solid # 575350; border-bottom: 1px solid # 575350; margin-bottom: 2px;) .top-menu: after (border-bottom: 3px solid # 575350; border-top: 1px solid # 575350; caja-sombra: 0 2px 7px #ccc; margin-top: 2px;) .menu-main (estilo de lista: ninguno; relleno: 0 30px; margen: 0; tamaño de fuente: 18px; alineación de texto: centro; posición: relativa;) .menu-main: before, .menu-main: after (content: "\ 25C8"; line-height: 1; position: absoluta; top: 50%; transform: translateY (-50% );) .menu-main: before (left: 15px;) .menu-main: after (right: 15px;) .menu-main li (display: inline-block; padding: 5px 0;) .menu-main a (decoración de texto: ninguna; pantalla: bloque en línea; margen: 2px 5px; relleno: 6px 15px; familia de fuentes: "PT Sans", sans-serif; tamaño de fuente: 16px; color: # 777777; borde inferior : 1px sólido transparente; transitio n: .3s lineal; ) .menu-main .current, .menu-main a: hover (border-radius: 3px; background: # f3ece1; color: # 313131; text-shadow: 0 1px 0 #fff; border-color: # c6c6c6;) @media (ancho máximo: 500px) (.menu-main li (pantalla: bloque;))

    3. Menú adaptable con vieiras

    • Trabaja
    • Sobre
    • Blog
    • Contacto
    @import url ("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .menu-main (estilo de lista: ninguno; relleno: 0 30px; margen: 0; tamaño de fuente: 18px; alineación de texto: centro; posición: relativa; fondo: blanco;) .menu-principal: después (contenido: ""; posición: absoluta; ancho: 100%; alto: 20px; izquierda: 0; fondo: -20px; fondo: radial-gradient (blanco 0%, blanco 70%, rgba (255,255,255,0) 70%, rgba ( 255,255,255,0) 100%) 0 -10px; tamaño de fondo: 20px 20px; repetición de fondo: repetición-x;) .menu-main li (display: inline-block;) .menu-main a (texto-decoración: none; display: inline-block; margin: 0 15px; padding: 10px 30px; font-family: "PT Sans Caption", sans-serif; color: # 777777; transición: .3s lineal; posición: relativa;) .menu -main a: before, .menu-main a: after (content: ""; position: absolute; top: calc (50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: # F58262; opacidad: 0; transición: .5s entrada-salida fácil;) .menu-main a: before (izquierda: 5px;) .menu-main a: after (derecha: 5px;) .menu-main a. actual: antes, .menu-main a.cur rent: after, .menu-main a: hover: before, .menu-main a: hover: after (opacidad: 1;) .menu-main a.current, .menu-main a: hover (color: # F58262; ) @media (ancho máximo: 680px) (.menu-main li (pantalla: bloque;))

    4. Menú adaptable en la cinta

    @import url ("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .top-menu (margen: 0 60px; posición: relativa; fondo: # 5A394E; cuadro-sombra: recuadro 1px 0 0 rgba (255,255,255, .1), recuadro -1px 0 0 rgba (255,255,255, .1), recuadro 150px 0 150px -150px rgba (255,255,255, .12), recuadro -150px 0 150px -150px rgba (255,255,255, .12);) .top-menu: before, .top-menu: after (content: ""; position: absolute ; z-index: 2; left: 0; width: 100%; height: 3px;) .top-menu: before (top: 0; border-bottom: 1px dashed rgba (255,255,255, .2);) .top- menu: after (bottom: 0; border-top: 1px rgba discontinuo (255,255,255, .2);) .menu-main (estilo de lista: ninguno; relleno: 0; margen: 0; alineación de texto: centro;). menu-main: before, .menu-main: after (content: ""; posición: absoluta; ancho: 50px; altura: 0; parte superior: 8px; borde superior: 18px sólido # 5A394E; borde inferior: 18px sólido # 5A394E; transform: rotate (360deg); z-index: -1;) .menu-main: before (left: -30px; border-left: 12px solid rgba (255, 255, 255, 0);) .menu- main: after (right: -30px; border-right: 12px solid rgba (2 55, 255, 255, 0); ) .menu-main li (display: inline-block; margin-right: -4px;) .menu-main a (text-decoration: none; display: inline-block; padding: 15px 30px; font-family: "PT Sans Caption ", sans-serif; color: blanco; transición: .3s lineal;) .menu-main a.current, .menu-main a: hover (background: rgba (0,0,0, .2);) @media (max-width: 680px) (.top-menu (margin: 0;) .menu-main li (display: block; margin-right: 0;) .menu-main: before, .menu-main: after (contenido: ninguno;) .menu-main a (pantalla: bloque;))

    5. Menú adaptable con un logotipo en el medio

    @import url ("https://fonts.googleapis.com/css?family=Arimo"); .top-menu (posición: relativa; fondo: rgba (34,34,34, .2);) .menu-main (estilo de lista: ninguna; margen: 0; relleno: 0;) .menu-main: después (contenido: ""; display: table; clear: both;) .left-item (float: left;) .right-item (float: right;) .navbar-logo (position: absoluta; left: 50%; top : 50%; transform: translate (-50%, - 50%);) .menu-main a (text-decoration: none; display: block; line-height: 80px; padding: 0 20px; font-size: 18px ; espaciado entre letras: 2px; familia de fuentes: "Arimo", sans-serif; peso de fuente: negrita; color: blanco; transición: .3s lineal;) .menu-main a: hover (background: rgba (0, 0,0, .3);) @media (ancho máximo: 830px) (.menu-main (padding-top: 90px; text-align: center;) .navbar-logo (posición: absoluta; izquierda: 50% ; top: 10px; transform: translateX (-50%);) .menu-main li (float: none; display: inline-block;) .menu-main a (line-height: normal; padding: 20px 15px; font -tamaño: 16px;)) @media (ancho máximo: 630px) (.menu-main li (display: block;))

    6. Menú adaptable con logotipo a la izquierda

    @import url ("https://fonts.googleapis.com/css?family=Arimo"); .top-menu (fondo: rgba (255,255,255, .5); box-shadow: 3px 0 7px rgba (0,0,0, .3); padding: 20px;) .top-menu: after (content: "" ; display: table; clear: both;) .navbar-logo (display: inline-block;) .menu-main (list-style: none; margin: 0; padding: 0; float: right;) .menu-main li (display: inline-block;) .menu-main a (text-decoration: none; display: block; position: relativa; line-height: 61px; padding-left: 20px; font-size: 18px; letter-spacing : 2px; font-family: "Arimo", sans-serif; font-weight: bold; color: # F73E24; transición: .3s linear;) .menu-main a: before (content: ""; width: 9px; altura: 9px; fondo: # F73E24; posición: absoluta; izquierda: 50%; transformar: rotar (45deg) translateX (6.5px); opacidad: 0; transición: .3s lineal;) .menu-main a: hover: before (opacidad: 1;) @media (max-width: 660px) (.menu-main (float: none; padding-top: 20px;) .top-menu (text-align: center; padding: 20px 0 0 0; ) .menu-main a (relleno: 0 10px;) .menu-main a: be fore (transform: rotate (45deg) translateX (-6px);)) @media (max-width: 600px) (.menu-main li (display: block;))

    Continuamos la serie con un tutorial sobre menús desplegables. El siguiente paso es un menú desplegable horizontal en CSS con sus propias manos.

    Si llegaste aquí por accidente o estabas buscando otra implementación del menú desplegable, te aconsejo que vayas a la sección de padres.

    Esta sección describirá el menú desplegable horizontal en CSS y HTML.

    Navegación de página:

    Entonces, nuestra tarea:

    haga un menú horizontal con el menú desplegable css (en listas ul li) sin usar jQuery y Javascript y también sin usar tablas

    en el código.

    Menú html horizontal desplegable

    En primer lugar, antes de comenzar a escribir el código, necesitamos crear una plantilla html para el menú.

    Debido al hecho de que estamos creando un menú universal, quiero que sea lo más similar posible a la salida del menú de WordPress. En mi opinión, este es uno de los códigos de menú Html más simples y versátiles. Se parece a esto:

    Como puede ver en el código, nuestro menú desplegable se implementará en las listas ul y li. Así es como se ve este menú sin estilos CSS:

    Digamos que se ve feo, como una lista normal. A continuación, necesitamos colorear este menú usando estilos CSS.

    Menú desplegable horizontal CSS

    Los estilos CSS para menús desplegables y más son tan esenciales como el aire. Después de todo, la pestaña desplegable se basa en la pseudoclase: hover.

    Para el menú desplegable horizontal, necesitamos los siguientes estilos:

    # menu1 (posición: relativa; pantalla: bloque; ancho: 100%; alto: auto; índice z: 10;) # menu1 ul (posición: relativa; pantalla: bloque; margen: 0px; relleno: 0px; ancho: 100 %; altura: auto; estilo de lista: ninguna; fondo: # F3A601;) # menu1> ul :: after (display: block; width: 100%; height: 0px; clear: both; content: "";) # menu1 ul li (posición: relativa; pantalla: bloque; flotador: izquierda; ancho: auto; alto: auto;) # menu1 ul li a (pantalla: bloque; relleno: 9px 25px 0px 25px; tamaño de fuente: 14px; fuente- family: Arial, sans-serif; color: #ffffef; line-height: 1.3em; text-decoration: none; font-weight: bold; text-transform: uppercase; height: 36px; box-sizing: border-box; ) # menu1 ul li> a: hover, # menu1 ul li: hover> a (background: # EBBD5B; color: # 2B45E0;)

    Este no es el final, sino solo una parte del CSS del menú horizontal principal. A continuación, escribiremos los estilos para el menú desplegable:

    # menu1 ul li ul (posición: absoluta; arriba: 36px; izquierda: 0px; pantalla: ninguna; ancho: 200px; fondo: # EBBD5B;) # menu1 ul li: hover ul (display: block;) / * esta línea implementa mecanismo de caída * / # menu1 ul li ul li (float: none; width: 100%;) # menu1 ul li ul li a (display: block; text-transform: none; height: auto; padding: 7px 25px; width: 100%; tamaño de caja: cuadro de borde; borde superior: 1px sólido #ffffff;) # menu1 ul li ul li: primer hijo a (borde superior: 0px;) # menú1 ul li ul li a: hover ( fondo: # FDDC96; color: # 6572BC;)

    Eso es todo. El mecanismo desplegable en sí se implementa en una línea.

    Ver la piel con este menú:

    Arroz. 2 (menú desplegable horizontal)

    A continuación se muestra una vista de demostración del menú desplegable, así como un enlace para descargar la fuente. (La demostración se abrirá como un menú desplegable en la parte superior de esta página, no es necesario hacer clic en abrir en una nueva ventana 🙂 o la rueda del mouse)

    Menú desplegable horizontal de ancho completo

    La mayoría de ustedes pueden reprocharme, dicen, esos menús, como mostré anteriormente, son saludos del pasado y en parte tienen razón, aunque me he encontrado con diseños nuevos con tales menús.

    Espero que hayas descargado el ejemplo anterior. Html sigue siendo el mismo, pero cambiaremos el CSS por completo. Puede simplemente tomar el código CSS de aquí y pegarlo en el ejemplo descargado, o verlo en modo de demostración.

    #conteiner (ancho: 1000px; alto: automático; margen: 0px auto; padding-top: 10px;) # menu1 (posición: relativa; pantalla: bloque; ancho: 100%; alto: automático; índice z: 10;) # menu1 ul (posición: relativa; pantalla: bloque; margen: 0px; relleno: 0px; ancho: 100%; alto: automático; estilo de lista: ninguno; fondo: # F3A601;) # menú1> ul (alineación de texto: justify; font-size: 1px; line-height: 1px;) # menu1> ul :: after (display: inline-block; width: 100%; height: 0px; content: "";) # menu1 ul li (posición : relativo; display: inline-block; width: auto; height: auto; vertical-align: top; text-align: left;) # menu1 ul li a (display: block; padding: 9px 35px 0px 35px; font-size : 14px; familia de fuentes: Arial, sans-serif; color: #ffffef; altura de línea: 1.3em; decoración de texto: ninguna; peso de fuente: negrita; transformación de texto: mayúsculas; altura: 36px; tamaño de caja : border-box;) # menu1 ul li> a: hover, # menu1 ul li: hover> a (background: # EBBD5B; color: # 2B45E0;) # menu1 ul li ul (position: absolute; top: 36px; left : 0px; pantalla: ninguna; ancho: auto; fondo: # EBBD5B; espacio en blanco: nowrap; ) # menu1 ul li: last-child ul (/ * el último elemento se adjuntará a la derecha * / left: auto; right: 0px;) # menu1 ul li: hover ul (display: block;) / * esta línea implementa el mecanismo de abandonos * / # menu1 ul li ul li (display: block; width: auto;) # menu1 ul li ul li a (display: block; text-transform: none; height: auto; padding: 7px 35px; width : 100%; tamaño de caja: cuadro de borde; borde superior: 1px sólido #ffffff;) # menu1 ul li ul li: primer hijo a (borde superior: 0px;) # menu1 ul li ul li a: hover (fondo: # FDDC96; color: # 6572BC;)

    Además, este ejemplo difiere del primero en que el menú desplegable, el propio menú desplegable, se extiende según el ancho de todos los elementos del menú.

    Para elementos de menú muy largos, esta opción puede no ser muy conveniente, ya que se saldrán de los límites. Para deshabilitar esta propiedad, simplemente busque la propiedad "white-space: nowrap;" en el selector # menu1 ul li ul, y elimínelo.

    A continuación, puede ver una demostración o descargar las fuentes del menú desplegable horizontal:

    Sin separadores, este menú parece regular. Los separadores se pueden agregar a html a mano, pero si tiene un CMS, por ejemplo, WordPress, agregarlo a mano no es muy conveniente allí.

    Menú desplegable horizontal delimitado

    Hay varias docenas de opciones sobre cómo agregar una franja (separador) entre los elementos del menú en CSS puro. Las variantes que usan :: before o :: after, o un borde izquierdo mucho más simple, no duplicaré el borde derecho.

    Hay situaciones en las que el diseño está construido de manera tan maravillosa que no puede prescindir de jquery.

    El código html sigue siendo el mismo, solo incluimos la biblioteca jQuery y el archivo que la usa al principio:

    Justo después de.

    Como comprende, debe crear un archivo script-menu-3.js y pon este pequeño código ahí:

    $ (documento) .ready (function () ($ ("# menu1> ul> li: not (: last-child)"). after ("");));

    Los estilos CSS para dicho menú deben dejarse como están, + arroje esta pieza al final:

    # menu1 ul li.razd (alto: 28px; ancho: 1px; fondo: #ffffff; margen superior: 4px;)

    Este menú desplegable horizontal con delimitadores en jQuery se verá así:

    Puede verlo en modo de demostración o descargar la plantilla de menú horizontal a continuación:

    Las ventajas de esta solución son:

    • el menú se arrastrará dinámicamente;
    • las sangrías del separador al párrafo son las mismas en todas partes;
    • diseño más hermoso y flexible.

    Menú desplegable de capas horizontales CSS + HTML

    Dado que estamos hablando de menús desplegables de varios niveles al pasar el mouse, probablemente valga la pena dividirlos en subgrupos:

    1. con un vipadashka al flotar hacia un lado
    2. con un menú desplegable emergente de tercer nivel

    En mis ejemplos, mostraré un menú CSS multinivel de 3 niveles, luego creo que no será difícil adivinar qué se debe hacer.

    Menú desplegable multinivel con un vipadash a un lado al desplazarse

    Primero, necesitamos corregir ligeramente nuestro html. Se agregarán un par de líneas para el nivel 3:

    #conteiner (ancho: 1000px; alto: automático; margen: 0px auto; padding-top: 10px;) # menu1 (posición: relativa; pantalla: bloque; ancho: 100%; alto: automático; índice z: 10;) # menu1 ul (posición: relativa; pantalla: bloque; margen: 0px; relleno: 0px; ancho: 100%; alto: automático; estilo de lista: ninguno; fondo: # F3A601;) # menú1> ul (alineación de texto: justify; font-size: 1px; line-height: 1px;) # menu1> ul :: after (display: inline-block; width: 100%; height: 0px; content: "";) # menu1 ul li (posición : relativo; pantalla: bloque en línea; ancho: automático; alto: automático; alineación vertical: superior; alineación de texto: izquierda;) # menu1 ul li.razd (alto: 28px; ancho: 1px; fondo: #ffffff; margin-top: 4px;) # menu1 ul li a (display: block; padding: 9px 45px 0px 45px; font-size: 14px; font-family: Arial, sans-serif; color: #ffffef; line-height: 1.3 em; text-decoration: none; font-weight: bold; text-transform: uppercase; height: 36px; box-sizing: border-box;) # menu1 ul li> a: hover, # menu1 ul li: hover> a (antecedentes: # EBBD5B; color: # 2B45E0; ) # menu1 ul li ul (posición: absoluta; arriba: 36px; izquierda: 0px; pantalla: ninguna; ancho: auto; fondo: # EBBD5B; espacio en blanco: nowrap;) # menu1> ul> li: último hijo> ul (/ * el último elemento se adjuntará a la derecha * / left: auto; right: 0px;) # menu1 ul li: hover> ul (display: block;) / * esta línea implementa el mecanismo de abandono * / # menu1 ul li ul li (display: block; width: auto;) # menu1 ul li ul li a (display: block; text-transform: none; height: auto; padding: 7px 45px; width: 100%; box-sizing: border-box; border-top: 1px solid #ffffff;) # menu1 ul li ul li: primer hijo> a (border-top: 0px;) # menu1 ul li ul li a: hover, # menu1 ul li ul li : hover> a (background: # FDDC96; color: # 6572BC;) # menu1 ul li ul li ul (top: 0px; left: 100%; display: none; background: # fddc96;) # menu1> ul> li: último hijo> ul ul (izquierda: auto; derecha: 100%;) # menu1 ul li ul li ul a (color: # F38A01;)

    Copie archivos para jQuery tal como estaban en el ejemplo anterior. Decidí dejar los separadores para que el menú se viera al menos un poco mejor. Puede, por supuesto, sin ellos.

    Así es como sucedió:
    Hice 2 máscaras en una para mostrar cómo se ve el menú desplegable a la derecha y en el medio.

    A continuación, puede ver una demostración y descargar un ejemplo:

    Menú desplegable de varios niveles con un vipadash emergente al pasar el mouse

    Un poco de aceite resultó en el título, pero funcionará, lo principal es el código.

    La esencia de este ejemplo es hacer un menú desplegable horizontal de ancho completo con un menú desplegable de ancho completo + capas.

    No cambiaré el código html, se puede tomar del ejemplo anterior. También mantenemos los separadores de jQuery.

    Solo cambiará el CSS completo:

    #conteiner (ancho: 1000px; alto: auto; margen: 0px auto; padding-top: 10px;) # menu1 (posición: relativa; pantalla: bloque; ancho: 100%; alto: auto; índice z: 10;) # menu1 ul (posición: relativa; pantalla: bloque; margen: 0px; relleno: 0px; ancho: 100%; alto: automático; estilo de lista: ninguno; fondo: # F3A601;) # menú1> ul (alineación de texto: justify; font-size: 1px; line-height: 1px;) # menu1> ul :: after (display: inline-block; width: 100%; height: 0px; content: "";) # menu1 ul li (posición : relativo; pantalla: bloque en línea; ancho: automático; alto: automático; alineación vertical: superior; alineación de texto: izquierda;) # menú1> ul> li (posición: estática;) # menú1 ul li.razd (altura : 28px; ancho: 1px; fondo: #ffffff; margin-top: 4px;) # menu1 ul li a (display: block; padding: 9px 45px 0px 45px; font-size: 14px; font-family: Arial, sans- serif; color: #ffffef; line-height: 1.3em; text-decoration: none; font-weight: bold; text-transform: uppercase; height: 36px; box-sizing: border-box;) # menu1 ul li> a: flotar, # menu1 ul li: hover> a (background: # EBBD5B; color: # 2B45E0; ) # menu1 ul li ul (posición: absoluta; arriba: 36px; izquierda: 0px; pantalla: ninguna; ancho: 100%; fondo: # EBBD5B;) # menu1> ul> li> ul :: after (clear: both; float: none; width: 100%; height: 0px; content: "";) # menu1 ul li: hover> ul (display: block;) / * esta línea implementa el mecanismo de abandono * / # menu1 ul li ul li ( display: block; width: 30%; float: left;) # menu1 ul li ul li a (display: block; text-transform: none; height: auto; padding: 7px 45px; width: 100%; box-sizing: border -box;) # menu1 ul li ul li: first-child> a (border-top: 0px;) # menu1 ul li ul li a: hover, # menu1 ul li ul li: hover> a (background: # FDDC96 ; color: # 6572BC;) # menu1 ul li ul li ul (arriba: 0px; izquierda: 100%; pantalla: ninguna; fondo: # fddc96; z-index: 15;) # menu1 ul li ul li ul li (mostrar : block; float: none; width: 100%;) # menu1 ul li ul li ul a (color: # F38A01; border-top: 1px solid #ffffff;)

    Así se verá el menú: Lo único es que el sitio debe tener suficiente espacio, ya que el elemento extremo de la derecha no tiene lugar para un menú desplegable. Este problema se puede resolver a través de: nth-child, pero no me molesté en cercar el jardín.

    Vea una demostración de un menú desplegable en capas horizontales:

    Como habrás notado: la placa inferior también es de ancho completo. Así es como se realizan las deserciones en varios bloques.

    Eso es todo para mí, espero que al menos uno de mis ejemplos te quede bien. Gracias por la atención.

    nos beneficiará a ellos y a mí 🙂.

    Si ha leído la publicación completa, pero no encontró cómo hacer su menú desplegable horizontal en css, haga una pregunta en los comentarios o use la búsqueda del sitio.

    Además, te aconsejo que visites la página principal. https: // sitio / vypadayushhee-menu /, todos los ejemplos y variedades de menús desplegables se recopilan allí.

    Hola. Durante mucho tiempo no he escrito publicaciones sobre el trabajo de html / css. Recientemente, comencé a crear un nuevo diseño y en el proceso encontré un truco interesante que te permite hacer que el menú sea gomoso (puedes agregarle nuevos elementos y el tamaño no aumentará, pero siempre habrá 100 % del bloque padre). Entonces, hoy implementaremos el menú de goma en css.

    Si eres demasiado vago para leer el artículo, puedes ver este video. El autor también lo explica todo con mucha frialdad:

    Menú CSS Gum - Paso 1

    El primer paso es siempre el marcado html, ¿a dónde podemos ir sin él? Pero en nuestro caso todo será sencillo:

    1. envoltorio de bloque para el menú
    2. el menú en sí, que se muestra a través de una lista con viñetas (etiqueta ul)
    3. Bueno, los elementos del menú están dentro y, en consecuencia, ya hay enlaces

    Todo está claro, aquí está mi código de marcado:



    Todo parece estándar, así:

    Ahora traeremos todo a la forma deseada, el CSS se hará cargo del trabajo.

    Paso 2: estilos básicos

    A continuación, agregaré estilo al bloque contenedor. Es decir, estableceré el ancho máximo en 600 píxeles (solo para que sea conveniente tomar una captura de pantalla para que el menú encaje), y también centraré el bloque.

    Envoltura (
    fondo: #fff;
    ancho máximo: 600px;
    margen: 0 automático;
    }

    Paso 3: implementamos la goma

    Ahora vayamos al menú en sí. Eliminaré los marcadores (en la etiqueta ul), haré el degradado lineal de fondo y, lo más importante, usaré la propiedad display: table-row para hacer que el contenedor del menú se comporte como una fila de tabla. Es importante hacer esto para futuras manipulaciones.

    Menú R (
    fondo: degradado lineal (a la derecha, # b0d4e3 0%, # 88bacf 100%);
    pantalla: tabla-fila;
    estilo de lista: ninguno;
    }

    Como puede ver, el código dado simplemente resolvió todo lo que escribí. Por cierto, es conveniente generar degradados utilizando la herramienta de generación de degradados Ultimate CSS. Escribiré sobre él alguna vez.

    R-menú li (
    alineación vertical: parte inferior;
    pantalla: celda de tabla;
    ancho: auto;
    alineación de texto: centro;
    altura: 50px;
    borde derecho: 1px sólido # 222;
    }

    • vertical-align: bottom: esta propiedad es necesaria para que, si el texto del elemento de menú ocupa 2 líneas, se muestre exactamente. Cuando creamos el menú, puede eliminar esta propiedad, acercar el zoom para que los elementos se reduzcan y el texto se ajuste en dos líneas y verá un problema de visualización. Devuelva la propiedad y todo debería estar bien.
    • display: table-cell: dado que hemos configurado el menú de visualización como una fila de tabla, sería lógico configurar sus elementos para que se muestren como celdas en la tabla. Es necesario.
    • ancho: automático: el ancho se calculará automáticamente, dependiendo de la longitud del texto en el párrafo
    • text-align: center es solo para centrar el texto dentro
    • height: 50px - establezca la altura en 50 píxeles
    • bueno, el borde derecho es solo un borde a la derecha, como un separador de elementos

    Si bien el menú se ve feo, pero nada, es hora de recordarlo.

    Lo último que debe hacer es diseñar los enlaces dentro de los párrafos. Aquí tengo este código:

    R-menú li a (
    decoración de texto: ninguna;
    ancho: 1000px;
    altura: 50px;
    alineación vertical: medio;
    pantalla: celda de tabla;
    color: #fff;
    fuente: Verdana normal de 14px;
    }

    Y así es como se ve el menú ahora:

    Nuevamente, explicaré algunas líneas:

    • la propiedad text-decoration elimina el subrayado predeterminado para los enlaces
    • width: 1000px es probablemente la línea más importante. Es necesario establecer los enlaces aproximadamente del mismo ancho, es posible y menos, pero necesariamente más que el elemento de menú más amplio posible. Los enlaces no tendrán un ancho de 1000 píxeles, ya que el elemento del menú li con el ancho establecido en automático limitará el ancho, pero esto hará que para cualquier número de elementos en el menú, siempre tenga un ancho del 100 por ciento.
    • vertical-align: middle y display: table-cell: el primero alineará el texto verticalmente con el centro y el segundo también hará que los enlaces aparezcan como celdas. Se necesitan ambas propiedades.
    • La fuente es solo un montón de configuraciones de fuente. Lea sobre las propiedades de CSS para fuentes en este artículo.

    Paso 4 (opcional) agregue interactividad

    Por ejemplo, para cambiar el color del elemento del menú al pasar el mouse. Esto se hace de manera bastante simple usando la pseudoclase hover:

    R-menú li: desplazarse (
    color de fondo: # 6bba70;
    }

    Probando el menú para ver si es gomoso

    Genial, los menús están listos, pero no hemos comprobado lo más importante: lo gomoso que es, como te prometí. Bueno, agregaré 2 elementos más al menú:

    El menú sigue siendo de 600 píxeles de ancho. El resto de los artículos se redujo un poco para adaptarse a 2 nuevos.

    Agregaré 1 punto más largo:

    Como puede ver, el menú se redujo un poco más y el elemento largo se mostró con bastante normalidad. Y si no fuera por la propiedad vertical-align: bottom de la que les hablé, el menú se vería peor.

    Reduciré el menú a tres elementos.

    Los elementos se han vuelto mucho más libres, pero el menú en sí no ha cambiado de ancho. ¡Así que hicimos un menú 100% caucho!

    ¿Cómo adaptarlo?

    Básicamente, si le dio al bloque de envoltura un ancho máximo, en lugar de uno fijo, entonces ni siquiera necesita ser adaptado. En mi caso, tengo una propiedad max-width: 600px y cuando el ancho se vuelve inferior a 600 píxeles, el bloque simplemente se encoge siguiendo la pantalla, sin formar un desplazamiento horizontal.

    Bueno, si desea cambiar o corregir de alguna manera el menú en dispositivos móviles o pantallas anchas, ¡las consultas de medios lo ayudarán! ¡Buena suerte en la construcción del sitio!