¿Cómo hacer un menú responsivo de goma usando CSS? Menú desplegable horizontal de bricolaje usando CSS y HTML Menú adaptable con logotipo a la izquierda

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

Le ofrecemos un ejemplo de implementación de un menú elástico 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 este 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 un problema determinado. 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. Me apresuro a decepcionar a aquellos que sugerirían usar la propiedad de visualización con la tabla de valores o la celda de la tabla. Este método no es suficientemente compatible con todos los navegadores.

Nuestra solución

Nuestra oferta se basará en una base sólida de conocimientos de HTML5 y CSS3.

La esencia del proceso se basa en la propiedad de alineación de texto con el valor de justificación. Para aquellos que lo hayan olvidado, les recuerdo: esta propiedad orienta la alineación del texto en todo el ancho del contenedor.

Al utilizar nuestra solución, se deben observar dos reglas obligatorias. La primera es que el ancho del contenedor de elementos del 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ú elástico:

HTML

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

ul ( text- align: justificar; overflow: oculto; /* elimina los efectos secundarios del método */ altura: 20px; /* también elimina innecesarios */ cursor: predeterminado ; /* establece la forma inicial del cursor */ margen : 50px 100px 0 100px; fondo: #eee; padding: 5px; ) li ( display: inline; /* convierte los elementos del menú en texto */ ) li a ( display: inline- block; /* elimina saltos de palabras en el menú */ color: #444; ) a : hover ( color: #ff0000; ) ul: after ( /* formando la segunda línea para calcular el método */ content: "1" ; margin- left: 100 %; height: 1px; desbordamiento: oculto; visualización: bloque en línea;)

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

ul ( z- index: expresión(runtimeStyle. zIndex = 1 , insertAdjacentHTML("beforeEnd&apos, "< li class = "last" >")); ) ul .last ( margen izquierdo: 100%; ) * html ul ( /* solo necesita ie6 */ altura: 30px; )

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

Desventajas del método.

código de volumen

Incapacidad para determinar el estado activo de un elemento a través de un selector de clase. Esto ocurre debido a la ruptura de palabras en los párrafos (si los hay). La solución a este problema es agregar otro contenedor dentro de los elementos de la lista.

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+	-	-

Un menú horizontal es una lista de secciones de un sitio web, por lo que es más lógico colocarlo dentro del elemento.

De forma predeterminada, todos los elementos de la lista están dispuestos verticalmente, ocupando todo el ancho del elemento contenedor, que a su vez ocupa todo el ancho de su bloque contenedor.

Marcado HTML para navegación horizontal

Opción del menú
Opción del menú
Opción del menú

Un menú horizontal ubicado dentro de una etiqueta también se puede colocar dentro del elemento ... y/o .... Gracias a esto, el marcado html adquiere un significado semántico y también brinda una oportunidad adicional para formatear el bloque de menú.

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

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

Poner los elementos de la lista en minúsculas. Como resultado, se colocan horizontalmente, con un espacio de 0,4 em agregado en el lado derecho entre ellos (calculado en relación con el tamaño de fuente). Para eliminarlo, agregue un margen derecho negativo para li li (margin-right: -4px;) . A continuación, diseñamos los enlaces como deseamos.

Hacer que los elementos de la lista floten. Como resultado, se colocan horizontalmente. La altura del bloque contenedor ul se vuelve cero. Para resolver este problema, agregamos (overflow: hide;) a ul, extendiéndolo y permitiéndole contener elementos flotantes. Para enlaces, agregue un (display: block;) y diseñelos como desee.

Hacer elementos de lista en bloque en línea. Se ubican horizontalmente, se forma un espacio en el lado derecho, como en el primer caso. Para enlaces, agregue un (display: block;) y diseñelos como desee.

Hacer que ul enumere un contenedor flexible usando . Como resultado, los elementos de la lista están dispuestos horizontalmente. Agregamos un (display: block;) para los enlaces y les damos el estilo deseado.

Buenas tardes

A menudo es necesario crear un menú horizontal que se extienda a lo largo de todo el ancho del bloque principal, independientemente de cuántos elementos contenga.

Hoy me gustaría mostrarles cómo crear un menú de este tipo.

Así nuestro menú quedará de la siguiente manera:

Se estira en todo su ancho y se destaca cuando se pasa el cursor sobre él. El menú está redondeado por los lados.

MARCADO HTML

hogar

Noticias interesantes

¡Otro elemento del menú!

Para que el menú tuviera todo el ancho, utilicé tablas con un ancho del 100%. Cada tabla tiene un contenedor div de elemento de menú. Dependiendo de si el primer, último o intermedio elemento del menú es un div, se asigna la clase correspondiente.

Cada contenedor div tiene 2 bordes laterales con posicionamiento absoluto, que son necesarios para una correcta visualización. Si usa bordes estándar, cuando cambie los elementos del menú, el texto saltará de 1 a 2 píxeles, lo cual es bueno.

La clase activa es responsable del elemento del menú seleccionado y lo resalta.

En cada artículo tenemos una imagen y un texto. Para que todo esto esté alineado estrictamente en el medio verticalmente, utilizamos una mesa. Gracias a la propiedad de alineación vertical, los elementos de nuestro menú siempre se mostrarán sin problemas y no se moverán.

REGLAS CSS

Primero, configuremos estilos para la visualización general del menú:

Menu_container ( padding-top: 40px; ancho: 100%; alto: 47px; border-spacing: 0px; ) .menu_container td ( vertical-align: middle; /* alineación vertical */ ) .last_point_menu, .first_point_menu, .middle_point_menu ( ancho: 100%; alto: 47px; borde: 1px sólido #dadbda; índice z: 1000; posición: relativa; borde izquierdo: ninguno; ) .inner_table ( ancho: 100%; alto: 100%; ) .inner_table td ( relleno: 0px; alineación vertical: medio; borde: ninguno; alineación de texto: izquierda; ancho: 150px; relleno-izquierda: 4px; ) .td.inner_table_title ( padding-top: 4px; peso de fuente: negrita; ) .td.inner_table_img (ancho: 40px!importante;) .inner_table_menu (alto: 100%; relleno: 0px; alineación vertical: medio; borde: ninguno; alineación de texto: izquierda;) .inner_table_title (relleno-izquierda: 10px; relleno-derecha: 10px; transformación de texto: mayúsculas; altura de línea: 13px; ) .inner_table_menu td.inner_table_img (ancho: 30px!importante; alto: 30px!importante; relleno-izquierda: 15px; )

Por belleza, redondeemos las esquinas a los lados del menú:

First_point_menu ( -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; borde-arriba-radio-izquierda: 5px; borde-abajo-radio-izquierda: 5px; borde-derecha: 1px sólido #dadbda; ) .last_point_menu ( -webkit-border-arriba-derecha-radius: 5px; -webkit-border -radio-inferior-derecha: 5px; -radio-de-borde-de-moz-arriba: 5px; -radio-de-borde-de-moz-abajo-derecha: 5px; radio-de-borde-arriba-derecha: 5px; radio-de-borde-inferior-derecha: 5px ; )

Ahora nuestro menú tiene un aspecto más bonito:

Hasta el momento, el primer punto no tiene borde izquierdo. Lo arreglaremos un poco más tarde.

Ahora agreguemos efectos de desplazamiento para el menú.

Middle_point_menu:hover, .last_point_menu:hover, .first_point_menu:hover, .middle_point_menu.active, .last_point_menu.active, .first_point_menu.active, .middle_point_menu.active (color de fondo: #CAE285; imagen de fondo: -moz-linear- gradiente (arriba, #CAE285, #9FCB56); imagen de fondo: -webkit-gradient (lineal, 0 0, 0 100%, desde (#CAE285), hasta (#9FCB56)); imagen de fondo: -webkit-linear -gradient(arriba, #CAE285, #9FCB56); imagen de fondo: -o-linear-gradient(arriba, #CAE285, #9FCB56); imagen de fondo: gradiente lineal (hacia abajo, #CAE285, #9FCB56); borde: 1px sólido #9FCB56; color del borde: #aec671 #9fbb62 #87ac4a; borde izquierdo: ninguno; índice z: 5000; ) /* resolverá los bordes al pasar el mouse */ .first_point_menu ( borde: 1px sólido #dadbda ; ) .first_point_menu:hover, .first_point_menu.active ( borde: 1px sólido #9FCB56; color del borde: #aec671 #9fbb62 #87ac4a; ) .last_point_menu ( borde: 1px sólido #dadbda; borde izquierdo: ninguno; ) .last_point_menu :hover (borde: 1px sólido #9FCB56; borde izquierdo: ninguno; color del borde: #aec671 #9fbb62 #87ac4a; ) .last_point_menu.active ( borde izquierdo: ninguno; )

Ahora nuestro menú se ve mucho mejor, pero por ahora no tenemos bordes para los elementos del menú resaltados. ¡Arreglemos esto!

/* estilos para bordes laterales */ .borderLeftSecond, .borderRightSecond ( display: none; posición: absoluta; ancho: 1px; alto: 47px; color de fondo: #9fbb62; top: 0px; índice z: 1000; ) /* desplazamientos absolutos para bordes */ .borderLeftSecond ( left: 0px; ). , .middle_point_menu:hover > .borderRightSecond, .last_point_menu:hover > .borderLeftSecond .first_point_menu:hover > .borderRightSecond ( display: block; ) /* maneja los casos de el primer y último elemento */ .first_point_menu.active .borderLeftSecond ( mostrar: ninguno; ) .last_point_menu.active .borderRightSecond ( mostrar: ninguno; ) .last_point_menu:hover .borderLeftSecond ( mostrar: bloquear; )

¡Eso es todo!

¡Tenemos un menú excelente que se extiende a lo largo de todo el ancho del bloque principal! Los elementos no se superponen entre sí cuando pasa el mouse y el diseño no salta.

Hola. Hace mucho tiempo que no escribo publicaciones sobre el tema del trabajo html/css. Recientemente comencé a armar un nuevo diseño y en el proceso encontré un truco interesante que te permite hacer que el menú sea flexible (puedes agregarle nuevos elementos y el tamaño no aumentará, pero siempre será el 100% del tamaño). bloque principal). Entonces, hoy implementaremos un menú elástico usando CSS.

Si eres demasiado vago para leer el artículo, puedes ver este vídeo. El autor además lo explica todo muy bien:

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

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

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

Todo parece estándar, así:

Ahora pondremos todo en la forma deseada, CSS se pondrá a trabajar.

A continuación, agregaré estilos al bloque contenedor. Es decir, estableceré el ancho máximo en 600 píxeles (solo para que sea más fácil 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;
}

Ahora analicemos el menú en sí. Le quitaré los marcadores (la etiqueta ul), crearé un 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 una tabla. Es importante hacer esto para futuras manipulaciones.

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

Como puede ver, el código anterior resolvió todo lo que escribí. Por cierto, es conveniente generar degradados utilizando la herramienta generadora de degradados Ultimate CSS. Algún día volveré a escribir sobre él.

Menú R(
alineación vertical: abajo;
mostrar: celda de tabla;
ancho: automático;
alineación de texto: centro;
altura: 50 píxeles;
borde derecho: 1px sólido #222;
}

alineación vertical: parte inferior: esta propiedad es necesaria para que si el texto de un elemento del menú ocupa 2 líneas, se muestre de manera uniforme. Cuando creamos el menú, puede eliminar esta propiedad, hacer zoom para que los elementos se compriman y el texto se mueva a dos líneas y verá un problema de visualización. Devuelva la propiedad y todo estará bien.
display: table-cell: dado que configuramos el menú de visualización en sí para que sea una fila de la tabla, sería lógico configurar sus elementos para que se muestren como celdas en una tabla. Es necesario.
ancho: auto — el ancho se calculará automáticamente, dependiendo de la longitud del texto en el párrafo
text-align: center - esto es solo para centrar el texto dentro
altura: 50px: establezca la altura en 50 píxeles
bueno, el borde derecho es solo un borde a la derecha, un separador de elementos

Hasta ahora el menú parece desagradable, pero está bien, es hora de recordarlo.

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

Menú R li a(
decoración de texto: ninguna;
ancho: 1000px;
altura: 50 píxeles;
alineación vertical: medio;
mostrar: celda de tabla;
color: #fff;
fuente: normal 14px Verdana;
}

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

De nuevo, déjame explicarte algunas líneas:

la propiedad de decoración de texto anula el subrayado predeterminado para los enlaces
ancho: 1000px es quizás la línea más importante. Debe configurar los enlaces a aproximadamente este ancho, tal vez menos, pero definitivamente más grande que el elemento de menú más ancho posible. Los enlaces no tendrán 1000 píxeles de ancho, ya que el ancho estará limitado por el elemento del menú li, cuyo ancho está configurado en automático, pero esto permitirá garantizar que para cualquier número de elementos del menú siempre será 100 por ciento del ancho.
vertical-align: middle y display: table-cell: el primero alineará el texto verticalmente con el centro y el segundo también mostrará los enlaces como celdas. Se necesitan ambas propiedades.
fuente: bueno, esto es solo un conjunto de configuraciones para la fuente. Lea sobre las propiedades CSS de las fuentes en este artículo.

Por ejemplo, para que el color de un elemento del menú cambie al pasar el cursor sobre él. Esto se puede implementar de forma bastante sencilla, utilizando la pseudoclase de desplazamiento:

Menú R li: pasar el cursor (
color de fondo: #6bba70;
}

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

El menú sigue teniendo 600 píxeles de ancho. Los elementos restantes simplemente se redujeron un poco para dar cabida a 2 nuevos.

Agregaré un punto más largo:

Como puede ver, el menú se ha reducido un poco más y el elemento largo se muestra 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!

En principio, si configura el bloque de envoltura con un ancho máximo en lugar de uno fijo, ni siquiera será necesario adaptarlo. En mi caso, tengo la propiedad max-width: 600px y cuando el ancho sea inferior a 600 píxeles, el bloque simplemente se reducirá junto con 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 creación de sitios web!

Continuamos la serie con una lección sobre menús desplegables. El siguiente es un menú desplegable horizontal que puedes hacer tú mismo usando CSS.

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

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

Navegación de página:

Entonces, nuestra tarea:

hacer un menú horizontal con una lista desplegable css (en listas ul li) sin usar jQuery y Javascript, y también sin usar tablas

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

Debido al hecho de que estamos creando un menú universal, quiero hacerlo lo más similar posible al resultado 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:

hogar
Sobre nosotros
Nuestros servicios
- Nuestro servicio nº1
- Nuestro servicio nº2
- Nuestro servicio nº3
- Nuestro servicio nº4
- Servicio 5
Noticias
Contactos

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

Seamos realistas, parece feo, como una lista normal. A continuación necesitamos decorar este menú usando estilos CSS.

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

Para un menú desplegable horizontal necesitamos los siguientes estilos:

#menu1( posición:relativa; visualización:bloque; ancho:100%; altura:auto; índice z:10; ) #menu1 ul( posición:relativa; visualización:bloque; margen:0px; relleno:0px; ancho:100 %; altura:auto; estilo de lista:ninguno; fondo:#F3A601; ) #menu1 > ul::after( display:block; ancho:100%; altura:0px; clear:both; contenido:" "; ) # menu1 ul li( posición:relativa; pantalla:bloque; flotante:izquierda; ancho:auto; altura:auto; ) #menu1 ul li a( pantalla:bloque; relleno:9px 25px 0px 25px; tamaño de fuente:14px; fuente- familia: Arial, sans-serif; color:#ffffef; altura de línea: 1,3 em; decoración de texto: ninguna; peso de fuente: negrita; transformación de texto: mayúscula; altura: 36 px; tamaño de caja: caja de borde; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a( fondo:#EBBD5B; color:#2B45E0; )

Esto aún no es el final, solo parte del CSS para el menú horizontal principal. A continuación escribiremos estilos para la lista desplegable del menú:

#menu1 ul li ul( posición:absoluta; arriba:36px; izquierda:0px; pantalla:ninguno; ancho:200px; fondo:#EBBD5B; ) #menu1 ul li:hover ul(display:block;)/*esta línea implementa mecanismo de abandono*/ #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; ancho: 100%; tamaño del cuadro: borde-cuadro; borde superior: 1px sólido #ffffff; ) #menu1 ul li ul li:primer hijo a(border-top:0px;) #menu1 ul li ul li a: flotar( fondo:#FDDC96; color:#6572BC; )

Eso es todo ahora. El mecanismo de abandono 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 demostración de cómo funciona el menú desplegable, así como un enlace para descargar las fuentes. (La demostración se abrirá con un menú desplegable en la parte superior de esta página, no es necesario hacer clic en Abrir en una nueva ventana 🙂 ni la rueda del mouse)

La mayoría de ustedes pueden reprocharme decir que los menús que mostré arriba son un saludo del pasado y en parte tienen razón, aunque he visto diseños recientes con dichos menús.

Espero que hayas descargado el ejemplo anterior. Nuestro Html sigue siendo el mismo, pero cambiaremos el CSS por completo. Simplemente puede tomar el código CSS desde aquí y pegarlo en el ejemplo descargado, o ver en modo de demostración cómo funciona.

#container( ancho:1000px; alto:auto; margen:0px auto; padding-top:10px; ) #menu1( posición:relativa; visualización:bloque; ancho:100%; alto:auto; índice z:10; ) #menu1 ul( posición:relativa; display:bloque; margen:0px; padding:0px; ancho:100%; altura:auto; estilo de lista:ninguno; fondo:#F3A601; ) #menu1 > ul( text-align: justificar; tamaño de fuente:1px; altura de línea:1px; ) #menu1 > ul::after( display:inline-block; ancho:100%; altura:0px; contenido:" "; ) #menu1 ul li( posición :relativo; display:bloque en línea; ancho:auto; alto:auto; vertical-align:top; text-align:left; ) #menu1 ul li a( display:block; padding:9px 35px 0px 35px; tamaño de fuente :14px; familia de fuentes: Arial, sans-serif; color:#ffffef; altura de línea: 1,3 em; decoración de texto: ninguna; peso de fuente: negrita; transformación de texto: mayúscula; altura: 36 px; tamaño de caja :border-box; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a( fondo:#EBBD5B; color:#2B45E0; ) #menu1 ul li ul( posición:absoluta; arriba:36px; izquierda :0px; pantalla: ninguna; ancho:automático; antecedentes:#EBBD5B; espacio en blanco:nowrap; ) #menu1 ul li:last-child ul(/*el último elemento se adjuntará al borde derecho*/ left:auto; right:0px; ) #menu1 ul li:hover ul(display:block;)/*this line implementa el mecanismo 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; ancho:100%; tamaño de la caja:border-box; borde-superior:1px sólido #ffffff; ) #menu1 ul li ul li:first-child a(border-top:0px;) #menu1 ul li ul li a: pasar el cursor (fondo: #FDDC96; color:#6572BC; )

Este ejemplo también se diferencia del primero en que el menú desplegable, el menú desplegable en sí, se extiende según el ancho de todos los elementos del menú.

Para elementos de menú muy largos, esta opción puede no resultar muy conveniente, ya que irán más allá 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 manualmente, pero si tiene un CMS, como WordPress, agregarlos manualmente no es muy conveniente.

Hay varias docenas de opciones para agregar una franja (separador) entre los elementos del menú usando CSS puro. No duplicaré las opciones que usan::before o::after , o mucho más simples border-left, border-right.

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

Nuestro código HTML sigue siendo el mismo, solo incluimos la biblioteca jQuery y el archivo que la usa desde el principio:

Justo después de .

Como entiendes, necesitas crear un archivo. script-menú-3.js y agrega este pequeño código allí:

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

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

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

Un 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 dibujará dinámicamente;
las sangrías desde el separador hasta el párrafo son las mismas en todas partes;
Diseño más hermoso y flexible.

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

con una plataforma vip cuando apunta hacia un lado
con un menú desplegable emergente del tercer nivel

En mis ejemplos mostraré un menú CSS multinivel con 3 niveles, entonces creo que no será difícil adivinar lo que hay que hacer.

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

hogar
Sobre nosotros
Nuestros servicios
- Nuestro servicio nº1
  - Adición al servicio 1
  - Adición al servicio 2
- Nuestro servicio nº2
  - Adición al servicio 3
  - Adición al servicio 4
- Nuestro servicio nº3
- Nuestro servicio nº4
- Servicio 5
Noticias
Contactos
- Mapa vial
  - Complemento de mapa
  - Adición para el mapa 2
- Formulario de comentarios

#container( ancho:1000px; alto:auto; margen:0px auto; padding-top:10px; ) #menu1( posición:relativa; visualización:bloque; ancho:100%; alto:auto; índice z:10; ) #menu1 ul( posición:relativa; display:bloque; margen:0px; padding:0px; ancho:100%; altura:auto; estilo de lista:ninguno; fondo:#F3A601; ) #menu1 > ul( text-align: justificar; tamaño de fuente:1px; altura de línea:1px; ) #menu1 > ul::after( display:inline-block; ancho:100%; altura:0px; contenido:" "; ) #menu1 ul li( posición :relativo; display:bloque en línea; ancho:auto; alto:auto; vertical-align:top; text-align:left; ) #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; decoración de texto: ninguna; peso de fuente: negrita; transformación de texto: mayúscula; altura: 36 px; tamaño de caja: cuadro de borde; ) #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:last-child > ul(/*el último elemento se adjuntará al borde derecho*/ 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:first-child > a(border-top:0px;) #menu1 ul li ul li a:hover, #menu1 ul li ul li:hover > a( fondo:#FDDC96; color:#6572BC; ) #menu1 ul li ul li ul( arriba:0px; izquierda:100%; display:none; fondo:#fddc96; ) #menu1 > ul > li:último hijo > ul ul(izquierda:auto; derecha:100%;) #menu1 ul li ul li ul a(color:#F38A01;)

Copiamos los archivos para jQuery tal como estaban en el ejemplo anterior. Decidí dejar los divisores para que el menú se viera al menos un poco mejor. Por supuesto que puedes hacerlo sin ellos.

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

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

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

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

No cambiaré el código HTML, se puede tomar del ejemplo anterior. También dejamos separadores en jQuery.

Sólo el CSS cambiará por completo:

#container( ancho:1000px; alto:auto; margen:0px auto; padding-top:10px; ) #menu1( posición:relativa; visualización:bloque; ancho:100%; alto:auto; índice z:10; ) #menu1 ul( posición:relativa; display:bloque; margen:0px; padding:0px; ancho:100%; altura:auto; estilo de lista:ninguno; fondo:#F3A601; ) #menu1 > ul( text-align: justificar; tamaño de fuente:1px; altura de línea:1px; ) #menu1 > ul::after( display:inline-block; ancho:100%; altura:0px; contenido:" "; ) #menu1 ul li( posición :relativo; display:bloque en línea; ancho:auto; alto:auto; vertical-align:top; text-align:left; ) #menu1 > ul > li(position:static;) #menu1 ul li.razd( height :28px; ancho:1px; fondo:#ffffff; margen superior:4px; ) #menu1 ul li a( display:block; padding:9px 45px 0px 45px; tamaño de fuente:14px; familia de fuentes:Arial, sans- serif; color:#ffffef; altura de línea: 1,3 em; decoración de texto: ninguna; peso de fuente: negrita; transformación de texto: mayúscula; altura: 36 px; tamaño de caja: caja de borde; ) #menu1 ul li > a:desplazar el cursor, #menu1 ul li:desplazar el cursor > a( fondo:#EBBD5B; color:#2B45E0; ) #menu1 ul li ul( posición:absoluta; arriba:36px; izquierda:0px; pantalla:ninguna; ancho:100%; fondo:#EBBD5B; ) #menu1 > ul > li > ul::después( clear:both; float:none; ancho:100%; alto:0px; contenido:" "; ) #menu1 ul li:hover > ul(display:block;)/*esta línea implementa el mecanismo de abandono*/ #menu1 ul li ul li( pantalla :bloque; ancho:30%; float:izquierda; ) #menu1 ul li ul li a( pantalla:bloque; transformación de texto: ninguna; altura:auto; relleno:7px 45px; ancho:100%; cuadro- tamaño: borde -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( fondo: #FDDC96; color:#6572BC; ) #menu1 ul li ul li ul( arriba:0px; izquierda:100%; display:none; fondo:#fddc96; z-index:15; ) #menu1 ul li ul li ul li (pantalla: bloque; flotante: ninguno; ancho: 100%;) #menu1 ul li ul li ul a( color:#F38A01; borde superior:1px sólido #ffffff; )

Así es como se verá el menú: El único punto es que el sitio debe tener suficiente espacio, ya que el último elemento de la derecha no tiene espacio para un menú desplegable. Este problema se puede resolver usando:nth-child, pero no me molesté.

Vea una demostración del menú desplegable horizontal de varios niveles:

Como habrás notado: el troquel inferior también tiene el ancho completo. Así se hacen las gotas en varios bloques.

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

Si leyó la publicación completa, pero no encontró cómo crear su propio menú desplegable horizontal en CSS, haga una pregunta en los comentarios o utilice la búsqueda del sitio.

Además, le aconsejo que visite la página principal https://site/vypadayushhee-menu/, allí se recopilan todos los ejemplos y tipos de menús desplegables.

Todo sobre la tecnología móvil

ARTÍCULOS RELACIONADOS