hogar /
Programas/ Bootstrap 4 amplía el menú a todo lo ancho. Menú desplegable horizontal de bricolaje en css y html
Bootstrap 4 amplía el menú a todo lo ancho. Menú desplegable horizontal de bricolaje en css y html
Hola. Durante mucho tiempo no escribí publicaciones sobre el tema de cómo funciona 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 elástico (puedes agregarle nuevos elementos y el tamaño no aumentará, pero siempre será 100 % del bloque principal). Entonces, hoy estamos implementando un menú de goma en css.
Si te da pereza leer el artículo, puedes ver este video. El autor también explica todo muy bien:
Menú fluido CSS Paso 1
El primer paso es siempre el marcado html, donde sin él. Pero en nuestro caso, todo será simple:
bloque contenedor de menú
el menú en sí, presentado a través de una lista con viñetas (etiqueta ul)
bueno, los elementos del menú dentro, y en ellos, respectivamente, ya hay enlaces
Ahora pondremos todo en la forma deseada, CSS se pone a trabajar.
Paso 2 - Estilos básicos
A continuación, agregaré estilos 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ú se ajuste), y también centraré el bloque.
Ahora retomamos el menú en sí. Eliminaré los marcadores (de la etiqueta ul), haré que el fondo sea un degradado lineal y, lo que es más importante, con la propiedad display: table-row, haré que el contenedor del menú se comporte como una fila de tabla. Esto es importante para futuras manipulaciones.
R-menú( fondo: gradiente lineal (a la derecha, #b0d4e3 0%, #88bacf 100%); pantalla: tabla-fila; estilo de lista: ninguno;
}
Como puede ver, el código anterior acaba de resolver todo lo que escribí. Por cierto, es conveniente generar degradados utilizando la herramienta generadora de degradados Ultimate CSS. Escribiré sobre eso alguna vez.
vertical-align: bottom: esta propiedad es necesaria para que, si el texto en el elemento del menú ocupa 2 líneas, se muestre exactamente. Cuando creamos el menú, puede eliminar esta propiedad, hacer zoom para que los elementos se reduzcan y el texto se ajuste 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í mismo para que sea una fila de 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 es solo para alinear el texto dentro en el centro
altura: 50px - establezca la altura en 50 píxeles
bueno, border-right es solo un borde a la derecha, como un separador de elementos
Si bien el menú se ve feo, pero está bien, es hora de recordarlo. Lo último que debe hacer es diseñar los enlaces dentro de los párrafos. Aquí tengo este código:
la propiedad de decoración de texto elimina el subrayado predeterminado de los enlaces
ancho: 1000px es quizás la línea más importante. Debe configurar los enlaces con aproximadamente el mismo ancho, tal vez menos, pero siempre más que el elemento de menú más ancho. Los enlaces no tendrán 1000 píxeles de ancho, porque el ancho estará limitado por el elemento del menú li, que tiene un ancho establecido en automático, pero hará que para cualquier número de elementos en el menú, siempre será 100 por ciento de ancho.
vertical-align: middle y display: table-cell: el primero alineará el texto verticalmente al centro y el segundo también mostrará los enlaces como celdas. Se requieren ambas propiedades.
fuente: bueno, es solo un conjunto de configuraciones para la fuente. Lea acerca de las propiedades css para fuentes en este artículo.
Paso 4 (opcional) puedes agregar interactividad
Por ejemplo, para cambiar el color de un elemento de menú al pasar el mouse. Esto se implementa de manera bastante simple, utilizando la pseudoclase flotante:
R-menú li: hover ( color de fondo: #6bba70;
}
Probando el menú para la gomosidad
Estupendo, los menús están listos, pero no hemos comprobado lo más importante: lo gomoso que está, como os 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 solo se encogen un poco para que quepan 2 nuevos.
Agregaré un párrafo 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 te hablé, el menú se vería peor.
Voy a 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?
En principio, si configura el bloque de envoltorio no a un ancho fijo, sino a un ancho máximo, entonces ni siquiera necesita ser adaptado. En mi caso, tengo la propiedad max-width: 600px, y cuando el ancho sea menor a 600px, el bloque simplemente disminuirá siguiendo la pantalla, sin formar un desplazamiento horizontal.
Bueno, si de alguna manera desea cambiar o arreglar el menú en dispositivos móviles o pantallas anchas, ¡las consultas de medios lo ayudarán! ¡Buena suerte en la construcción de sitios web!
Buenas tardes
A menudo sucede que necesita crear un menú horizontal que se extienda a todo el ancho del bloque principal, independientemente de cuántos elementos contenga.
Hoy me gustaría mostrarles cómo crear ese menú.
Así que nuestro menú será el siguiente:
Se estira a todo lo ancho, cuando se desplaza se resalta. El menú es redondeado en los lados.
MARCADO HTML
hogar
Noticias interesantes
...
Otro elemento del menú!
Para hacer el menú de ancho completo, usé tablas con 100% de ancho. Cada tabla tiene un elemento de menú contenedor div. Dependiendo de si el elemento de menú primero, último o intermedio, se asigna la clase apropiada a div.
Cada contenedor div tiene 2 barras laterales absolutamente posicionadas que son necesarias para mostrarse correctamente. 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 de menú seleccionado y lo resalta.
Cada artículo tiene una imagen y un texto. Para que todo esto se alinee estrictamente en el medio verticalmente, usamos una tabla. 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, estableceremos estilos para la visualización general del menú:
Ahora nuestro menú ha adquirido un aspecto más hermoso:
Hasta ahora, el primer párrafo no tiene borde izquierdo. Lo arreglaremos más tarde.
Ahora agreguemos efectos de desplazamiento al 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- degradado (superior, #CAE285, #9FCB56); imagen de fondo: -webkit-gradient (lineal, 0 0, 0 100 %, desde (#CAE285), hasta (#9FCB56)); imagen de fondo: -webkit-lineal -gradiente (arriba, #CAE285, #9FCB56); imagen de fondo: -o-linear-gradient (arriba, #CAE285, #9FCB56); imagen de fondo: gradiente lineal (hacia abajo, #CAE285, #9FCB56); border: 1px solid #9FCB56; border-color: #aec671 #9fbb62 #87ac4a; border-left: none; z-index: 5000; ) /* trabaja los bordes al pasar el mouse*/ .first_point_menu (borde: 1px solid #dadbda; ) .first_point_menu:hover, .first_point_menu.active ( borde: 1px sólido #9FCB56; border-color: #aec671 #9fbb62 #87ac4a; ) .last_point_menu (borde: 1px sólido #dadbda; border-left: none; ) .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 de menú seleccionados. ¡Arreglemoslo!
/* estilos para bordes laterales */ .borderLeftSecond, .borderRightSecond ( pantalla: ninguno; posición: absoluta; ancho: 1px; alto: 47px; color de fondo: #9fbb62; superior: 0px; índice z: 1000; ) /* compensaciones absolutas para los bordes */ .borderLeftSecond ( izquierda: 0px; ) .borderRightSecond ( derecha: -1px; ) /* muestra los bordes de los objetos activos y sobre los que pasa el cursor */ .active .borderLeftSecond, .active .borderRightSecond, .middle_point_menu:hover > . borderLeftSecond. none; ) .last_point_menu.active .borderRightSecond ( mostrar: ninguno; ) .last_point_menu:hover .borderLeftSecond ( mostrar: bloque; )
¡Eso es todo!
¡Tenemos un gran menú extendido a todo el ancho del bloque principal! Los puntos entre sí al pasar el mouse no se superponen y el diseño no salta.
Continuamos la serie con una lección sobre los menús desplegables. El siguiente en la línea es un menú desplegable horizontal de hágalo usted mismo en 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á el menú desplegable horizontal en CSS y HTML.
Navegación de la página:
Entonces, nuestra tarea:
haga un menú desplegable css horizontal (en listas ul li) sin usar jQuery y Javascript y también sin usar tablas
en codigo. menú desplegable horizontal html
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 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:
hogar
Sobre nosotros
Nuestros servicios
Nuestro servicio #1
Nuestro servicio #2
Nuestro servicio #3
Nuestro servicio #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 estilo CSS:
Digamos que se ve feo, como una lista regular. A continuación, debemos decorar este menú con estilos CSS.
Menú desplegable horizontal CSS
Los estilos CSS para menús desplegables y más son imprescindibles. Después de todo, la pestaña desplegable se crea sobre la base de la pseudoclase:hover.
Para el menú desplegable horizontal, necesitamos los siguientes estilos:
#menu1( position:relative; display:block; width:100%; height:auto; z-index:10; ) #menu1 ul( position:relative; display:block; margin:0px; padding:0px; width:100 %; alto:automático; estilo de lista:ninguno; fondo:#F3A601; ) #menu1 > ul::después( pantalla:bloque; ancho:100%; alto:0px; claro:ambos; contenido:" "; ) # menu1 ul li( posición:relativa; pantalla:bloque; flotante:izquierda; ancho:automático; altura:automático; ) #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.3em; decoración de texto: ninguna; peso de fuente: negrita; transformación de texto: mayúsculas; altura: 36px; tamaño de cuadro: cuadro de borde; ) #menu1 ul li > a: pasar el mouse, #menu1 ul li: pasar el mouse > a( fondo:#EBBD5B; color:#2B45E0; )
Este no es el final todavía, solo parte del CSS para el menú horizontal principal. A continuación, escribiremos los estilos para el menú desplegable:
#menu1 ul li ul( posición:absoluta; parte superior:36px; izquierda:0px; pantalla:ninguna; ancho:200px; fondo:#EBBD5B; ) #menu1 ul li:hover ul(pantalla:bloquear;)/*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; width: 100%; tamaño de cuadro: cuadro de borde; borde superior: 1px sólido #ffffff; ) #menu1 ul li ul li: primer hijo a (border-top: 0px;) #menu1 ul li ul li a: hover ( fondo:#FDDC96; color:#6572BC; )
Ahora 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 demostración del funcionamiento del menú desplegable, así como un enlace para descargar el código fuente. (La demostración se abrirá en un menú desplegable sobre esta página, no es necesario hacer clic en abrir en una nueva ventana 🙂 o usar la rueda del mouse)
Menú desplegable horizontal de ancho completo
La mayoría de ustedes pueden reprocharme, diciendo que tales menús, como mostré anteriormente, son saludos del pasado y en parte tienen razón, aunque he encontrado diseños nuevos con dichos menús.
Espero que hayas descargado el ejemplo anterior. Html sigue siendo el mismo con nosotros, pero cambiaremos el CSS por completo. Simplemente puede tomar el código CSS de aquí y pegarlo en el ejemplo descargado, o ver cómo funciona en modo de demostración.
#contenedor( ancho:1000px; alto:auto; margen:0px auto; padding-top:10px; ) #menu1( posición:relativa; pantalla:bloque; ancho:100%; alto:automático; z-index:10; ) #menu1 ul( posición:relativa; pantalla:bloque; margen:0px; relleno:0px; ancho:100%; altura:automático; estilo de lista:ninguno; fondo:#F3A601; ) #menu1 > ul(text-align: justificar; tamaño de fuente: 1 px; altura de línea: 1 px; ) #menu1 > ul :: después (pantalla: bloque en línea; ancho: 100 %; altura: 0 px; contenido: ""; ) #menu1 ul li (posición :relativo; pantalla:bloque en línea; ancho:automático; altura:automático; alineación vertical:superior; alineación de texto:izquierda; ) #menu1 ul li a( pantalla:bloque; relleno:9px 35px 0px 35px; tamaño de fuente :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( fondo:#EBBD5B; color:#2B45E0; ) #menu1 ul li ul( posición:absoluta; arriba:36px; izquierda :0px; pantalla: ninguno; ancho: automático; fondo:#EBBD5B; espacio en blanco: nowrap; ) #menu1 ul li:last-child ul(/*el último elemento se anclará a la derecha*/ izquierda:automático; derecha:0px; ) #menu1 ul li:hover ul(display:block;)/*esta línea implementa el mecanismo dropouts*/ #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% ; 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 (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;" el selector #menu1 ul li ul y quitarlo.
A continuación puede ver una demostración o descargar la fuente del menú desplegable horizontal:
Sin separadores, este menú se ve regular. Los separadores se pueden agregar al html manualmente, pero si tiene un CMS, como WordPress, agregarlo manualmente no es muy conveniente.
Menú desplegable horizontal con separadores
Hay docenas de opciones sobre cómo agregar una barra (separador) entre los elementos del menú usando CSS puro. Las opciones que usan::before or::after , o mucho más simple border-left, border-right, no las duplicaré.
Hay situaciones en las que el diseño se construye tan maravillosamente que jquery es indispensable.
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 usted entiende, necesita crear un archivo script-menú-3.js y poner 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, + tirar esta pieza al final:
#menu1 ul li.razd( alto:28px; ancho:1px; fondo:#ffffff; margen superior:4px; )
Dicho menú desplegable horizontal con separadores en jQuery se verá así:
Puede ver la demostración o descargar la plantilla de menú horizontal a continuación:
Las ventajas de tal solución son:
el menú se arrastrará 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.
Menú desplegable en 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:
con vipadashka cuando apunta hacia un lado
con una estocada emergente de tercer nivel
En mis ejemplos, mostraré un menú CSS de varios niveles para 3 niveles, luego creo que no será difícil adivinar qué se debe hacer.
Menú desplegable multinivel con vipad al costado al pasar el mouse
Para empezar, necesitamos corregir ligeramente nuestro html. Se agregarán un par de líneas para el nivel 3 allí:
hogar
Sobre nosotros
Nuestros servicios
Nuestro servicio #1
Adición al servicio 1
Adición al servicio 2
Nuestro servicio #2
Adición al servicio 3
Adición al servicio 4
Nuestro servicio #3
Nuestro servicio #4
Servicio 5
Noticias
Contactos
Mapa vial
Complemento de mapa
Adición para el mapa 2
Formulario de comentarios
#contenedor( ancho:1000px; alto:auto; margen:0px auto; padding-top:10px; ) #menu1( posición:relativa; pantalla:bloque; ancho:100%; alto:automático; z-index:10; ) #menu1 ul( posición:relativa; pantalla:bloque; margen:0px; relleno:0px; ancho:100%; altura:automático; estilo de lista:ninguno; fondo:#F3A601; ) #menu1 > ul(text-align: justificar; tamaño de fuente: 1 px; altura de línea: 1 px; ) #menu1 > ul :: después (pantalla: bloque en línea; ancho: 100 %; altura: 0 px; contenido: ""; ) #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( 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.3 em; decoración de texto: ninguno; peso de fuente: negrita; transformación de texto: mayúsculas; altura: 36 px; tamaño de cuadro: cuadro de borde; ) #menu1 ul li > a: pasar el mouse, #menu1 ul li: pasar el mouse > a (fondo:#EBBD5B; color:#2B45E0; ) #menu1 ul li ul( position:absolute; top:36px; left:0px; display:none; width:auto; background:#EBBD5B; white-space:nowrap; ) #menu1 > ul > li:last-child > ul(/*el último elemento estará anclado 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( pantalla: bloque; ancho: automático; ) #menu1 ul li ul li a( pantalla: bloque; transformación de texto: ninguna; altura: automático; relleno: 7px 45px; ancho: 100%; tamaño de caja: borde -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: pasar el mouse > a( fondo:#FDDC96; color:#6572BC; ) #menu1 ul li ul li ul( arriba:0px; izquierda:100%; pantalla:ninguna; fondo:#fddc96; ) #menu1 > ul > li:último -child > ul ul(izquierda:auto; derecha:100%;) #menu1 ul li ul li ul a(color:#F38A01;)
Los archivos para jQuery se copian como estaban en el ejemplo anterior. Decidí dejar los separadores, para que el menú se viera al menos un poco mejor. Es posible, por supuesto, sin ellos.
Así sucedió: Hice 2 máscaras en una para mostrar cómo se ve la estocada a la derecha y en el medio.
A continuación puede ver una demostración y descargar un ejemplo:
Menú desplegable en capas con menú desplegable 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 crear un menú desplegable horizontal de ancho completo con un menú desplegable de ancho completo + varios niveles.
No cambiaré el código HTML, se puede tomar del ejemplo anterior. También se dejan separadores en jQuery.
Solo el CSS cambiará por completo:
#contenedor( ancho:1000px; alto:auto; margen:0px auto; padding-top:10px; ) #menu1( posición:relativa; pantalla:bloque; ancho:100%; alto:automático; z-index:10; ) #menu1 ul( posición:relativa; pantalla:bloque; margen:0px; relleno:0px; ancho:100%; altura:automático; estilo de lista:ninguno; fondo:#F3A601; ) #menu1 > ul(text-align: justificar; tamaño de fuente: 1 px; altura de línea: 1 px; ) #menu1 > ul :: después (pantalla: bloque en línea; ancho: 100 %; altura: 0 px; contenido: ""; ) #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(posición:estática;) #menu1 ul li.razd( altura :28px; ancho:1px; fondo:#ffffff; margen superior:4px; ) #menu1 ul li a( pantalla:bloque; relleno:9px 45px 0px 45px; tamaño de fuente:14px; familia de fuentes:Arial, sans- serif; color:#ffffef; altura de línea:1.3em; decoración de texto:ninguno; peso de fuente:negrita; transformación de texto:mayúsculas; altura:36px; tamaño de cuadro:cuadro de borde; ) #menu1 ul li > a: pasar el mouse, #menu1 ul li: pasar el mouse > a( fondo:#EBBD5B; color:#2B45E0; ) #menu1 ul li ul( position:absolute; top:36px; left:0px; display:none; width:100%; background:#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( mostrar: bloque; ancho: 30%; flotante: izquierda; ) #menu1 ul li ul li a ( mostrar: bloque; transformación de texto: ninguno; altura: automático; relleno: 7px 45px; ancho: 100%; tamaño de caja: 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(pantalla : bloque; float:ninguno; ancho:100%;) #menu1 ul li ul li ul a( color:#F38A01; border-top:1px solid #ffffff; )
Así es como se verá el menú: El único punto es que el sitio debe tener suficiente espacio, ya que el último elemento a la derecha no tiene espacio para abandonar. Este problema se puede resolver a través de: nth-child pero no me molesté en cercar el jardín.
Vea la demostración del menú desplegable horizontal de varios niveles:
Como habrás notado: la placa inferior también es de ancho completo. Así se hacen estocadas en varios bloques.
Eso es todo para mí, espero que al menos uno de mis ejemplos se adapte a ti. Gracias por su atención.
beneficiará tanto a ellos como a mí 🙂 .
Si leyó la publicación completa, pero no encontró cómo hacer su propio menú desplegable horizontal en css, haga una pregunta en los comentarios o use la búsqueda en el sitio.
Además, le aconsejo que visite la página principal https://website/vypadayushhee-menu/, donde se recopilan todos los ejemplos y variedades de menús desplegables.
El 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: marcado y ejemplos de diseño Marcado HTML y estilos básicos para el menú horizontal
De forma predeterminada, todos los elementos de la lista se apilan verticalmente, ocupando todo el ancho del elemento contenedor, que a su vez ocupa todo el ancho de su bloque contenedor.
Un menú horizontal dentro de una etiqueta se puede colocar opcionalmente dentro de un elemento ... y/o .... Este marcado html da significado semántico, 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 (list-style: none; /*eliminar los marcadores de lista*/ margin: 0; /*eliminar los márgenes superior e inferior de 1em*/ padding-left: 0; /*eliminar el relleno izquierdo de 40px*/ ) a (text-decoration: none; /*quitar el subrayado del texto del enlace*/)
Método 1. li (pantalla: en línea;)
Hacer elementos de la lista en línea. Como resultado, están dispuestos horizontalmente, en el lado derecho, se agrega un espacio entre ellos igual a 0.4em (calculado en relación con el tamaño de la fuente). Para eliminarlo, agregue un margen derecho negativo a li li (margin-right: -4px;) . A continuación, diseñe los enlaces como desee.
Método 2. li (flotante: izquierda;)
Hacemos que los elementos de la lista sean flotantes. Como resultado, están dispuestos horizontalmente. La altura del bloque contenedor ul se convierte en cero. Para resolver este problema, agregamos (overflow: hidden;) a ul, expandiéndolo y permitiendo que contenga elementos flotantes. Para los enlaces, agrega un (display: block;) y dales el estilo que desees.
Método 3. li (pantalla: bloque en línea;)
Hacer elementos de lista en bloque en línea. Están dispuestos horizontalmente, se forma un espacio en el lado derecho, como en el primer caso. Para los enlaces, agrega un (display: block;) y dales el estilo que desees.
Método 4. ul (pantalla: flex;)
Convertir la lista ul en un contenedor flexible mediante el uso de . Como resultado, los elementos de la lista se disponen horizontalmente. Agrega un (display: block;) para los enlaces y dales el estilo que desees.
1. Menú receptivo con efecto de subrayado al pasar el mouse sobre un enlace
Entrada
Arroz. 2 (menú desplegable horizontal)
Hice 2 máscaras en una para mostrar cómo se ve la estocada a la derecha y en el medio.
