Excelente descripción general de hermosos menús de varios niveles con codepen. Menú centrado horizontalmente usando solo CSS

La tarea de centrar un menú horizontal puede ser complicada, especialmente para aquellos nuevos en CSS. La búsqueda de soluciones conduce a una lista muy limitada de métodos, la mayoría de los cuales se basan en trucos de CSS, JavaScript o el uso de reglas no estándar que no son compatibles con todos los navegadores. En este tutorial, veremos un método para centrar un menú horizontal que utiliza solo reglas CSS estándar y funciona en todos los navegadores.

Ejemplo de menú centrado

A continuación se muestra un menú horizontal centrado en esta columna, en el que se activa la segunda pestaña. Puede intentar cambiar el tamaño de la ventana o página de su navegador para asegurarse de que el menú siempre permanezca centrado y funcional.

En la página de demostración puede ver varias opciones de diseño para un menú centrado horizontalmente. Cualquiera de ellos puede ser utilizado en tus proyectos.

marcado HTML

Todos los menús que se muestran en este tutorial utilizan una estructura simple. Esta es una lista ordinaria desordenada de enlaces colocados en un elemento. div.

Primer marcador
Segundo marcador
Tercera pestaña
Cuarta pestaña

Código CSS del menú centrado

A continuación se muestra el código CSS completo utilizado para centrar el menú. Más adelante en la lección se proporciona una explicación del principio de funcionamiento.

#centeredmenu ( float:izquierda; ancho:100%; fondo:#fff; border-bottom:4px solid #000; overflow:hidden; position:relative; ) #centeredmenu ul ( clear:left; float:left; estilo de lista :ninguno; relleno:0; posición:relativa; alineación de texto:centro; relleno:0 0 0 1px; relleno: 3px 10px; fondo:#ddd; color:#000; decoración de texto: ninguna; altura de línea: 1.3em; ) #centeredmenu ul li a:hover (fondo:#369; color:#fff; ) a.active, #centeredmenu ul li a.active:hover ( color:# fff; fondo:#000;

¿Cómo funciona el método de centrado?

La acción del método se basa en el posicionamiento relativo de los elementos del bloque flotante uno dentro de otro. Primero, veamos cómo cambia el tamaño de los elementos con el desplazamiento.

Elemento div(bloque) sin desplazamiento se estira en todo el ancho disponible para él.

Pero si movemos el div hacia la izquierda, automáticamente se reducirá para ajustarse a su contenido. La compresión es clave para la implementación este método centrando el menú. Le ayuda a mover el menú a la posición correcta.

Menú estándar alineado a la izquierda

Tomemos un menú estándar alineado a la izquierda y rehagámoslo paso a paso. Para mayor claridad, los artículos están coloreados en diferentes colores, por lo que queda inmediatamente claro qué va y dónde.

Tenga en cuenta los siguientes puntos:

Elemento menú centrado div(rectángulo azul) está desplazado hacia la izquierda, pero tiene un ancho del 100%, por lo que permanece extendido por toda la página.
Elemento ul(rectángulo rosa) está dentro del elemento menú centrado div y se mueve hacia la izquierda. Esto significa que se comprimirá al ancho de su contenido, es decir, al ancho total de todos los marcadores.
Todos los elementos li (rectángulos verdes) están dentro del elemento. ul y muévete hacia la izquierda. Por lo tanto, se comprimen al tamaño de los eslabones que contienen y se alinean en una línea horizontal.
Dentro de cada enlace (rectángulos naranjas) se muestra el texto del marcador: Marcador 1, Marcador 2, etc.

Cambiar la posición de una lista desordenada

Luego compensamos el elemento. ul hacia la derecha un 50% usando la posición:relativa; . Cuando un elemento se compensa por porcentaje en estas condiciones, es importante recordar que el ancho total de los elementos que contiene no es su ancho. En nuestro caso, el desplazamiento se produce en la mitad de la ventana del navegador (o el espacio disponible para mostrar). Como resultado, nuestro menú comienza en el medio de la ventana y se extiende parcialmente más allá de sus límites. Y pasemos al siguiente paso.

Cambiar la posición de todos los elementos del menú.

Ya sólo queda mover todos los elementos. li abandonado en un 50%. Esto es el 50% del ancho de nuestro elemento ul (el contenedor que contiene el menú). De este modo, los marcadores se desplazan exactamente al centro de la ventana.

Algunas notas importantes

Al utilizar este método de centrado, hay varios puntos importantes que recordar:

Desde el elemento ul se extiende parcialmente más allá de la ventana, esto da como resultado la visualización de barras de desplazamiento. Por lo tanto, es necesario utilizar la regla overflow:hidden; para elemento menú centrado div. Así, la parte que sobresale del elemento. div será cortado.
Desde el elemento ul no está alineado con los marcadores, no puede utilizar ningún estilo visual para ello. Deje el elemento ul sin color de fondo y sin borde para que se vuelva completamente invisible. Y los estilos para marcadores solo deben usarse para elementos. li.
Si necesita establecer estilos especiales para el primer y último marcador, debe agregar una clase para el primer y último elemento. li, para que puedas diseñarlos individualmente.

Conclusión

La solución propuesta es compatible con todos los navegadores, no utiliza JavaScript y admite texto redimensionable.

La mayoría de sitios web clásicos en Internet utilizan un menú horizontal como elemento principal de navegación. A veces puede contener varias funciones adicionales: estructuras de varios niveles, iconos para subelementos, un bloque de búsqueda, listas complejas, etc. Recientemente hubo una pequeña selección en el blog y hoy veremos 4 ejemplos prácticos de cómo crear un menú desplegable usando CSS + HTML. La información será útil para los desarrolladores novatos y aquellos que quieran cambiar la navegación en su sitio web.

El primer tutorial del menú desplegable CSS3 es el más nuevo de la colección (de abril de 2016). Ventajas de la solución: en este menú desplegable horizontal del sitio, los subelementos contienen iconos, la implementación y el código CSS en sí son bastante simples de entender e implementar.

Paso 1: marcado HTML

El primer paso es crear una lista desordenada en HTML con enlaces de anclaje (#) para sus elementos. Allí, en uno de los elementos, agregamos otra lista anidada, que será la responsable del submenú.

Paso 2: muestra el menú

Eliminamos sangrías innecesarias en CSS para elementos del menú desplegable horizontal del sitio. En la misma etapa, estableceremos un ancho y alto fijos para los elementos del menú y también agregaremos esquinas redondeadas.

.menu, .menu ul, .menu li, .menu a (margen: 0; relleno: 0; borde: ninguno; contorno: ninguno;) .menu (alto: 40px; ancho: 505px; fondo: #4c4e5a; fondo: -webkit-linear-gradient(arriba, #4c4e5a 0%, #2c2d33 100%); fondo: -moz-linear-gradient(arriba, #4c4e5a 0%, #2c2d33 100%); #2c2d33 100%); fondo: -ms-linear-gradient(arriba, #4c4e5a 0%, #2c2d33 100%); radio de borde: 5px; -moz-radio de borde: 5px; .menu li (posición: relativa; estilo de lista: ninguno; flotante: izquierda; pantalla: bloque; altura: 40px;

Menú, .menu ul, .menu li, .menu a (margen: 0; relleno: 0; borde: ninguno; contorno: ninguno;) .menu (alto: 40px; ancho: 505px; fondo: #4c4e5a; fondo: - webkit-linear-gradient(arriba, #4c4e5a 0%,#2c2d33 100%); -moz-linear-gradient(arriba, #4c4e5a 0%,#2c2d33 100%); 100%); fondo: -ms-linear-gradient(arriba, #4c4e5a 0%,#2c2d33 100%); radio: 5px; -moz-border-radius: 5px; border-radius: 5px; menú li (posición: relativa; estilo de lista: ninguno; flotante: izquierda; pantalla: bloque; altura: 40px;

Paso 3: diseño de enlaces

Además de las características básicas de los estilos (fuente, color, altura), utilizamos y creamos una transición suave del color del texto al pasar el cursor. También agregamos separadores al menú, eliminando el borde del primer elemento de la izquierda y del último de la derecha.

.menu li a (pantalla: bloque; relleno: 0 14px; margen: 6px 0; altura de línea: 28px; decoración de texto: ninguna; borde izquierdo: 1px sólido #393942; borde derecho: 1px sólido #4f5058; fuente -familia: Helvetica, sans-serif; peso de fuente: negrita; color: #f3f3f3; sombra de texto: 1px 1px 1px rgba (0, 0, 0, .6) transición: color .2s fácil de entrar y salir; moz-transition: color .2s facilidad de entrada y salida; -o-transition: color .2s facilidad de entrada y salida; -transición: color .2s facilidad de entrada y salida) .menu li: primer hijo a; (borde izquierdo: ninguno;) .menu li: último hijo a (borde derecho: ninguno;) .menu li: cursor > a (color: #8fde62;)

Menú li a ( pantalla: bloque; relleno: 0 14px; margen: 6px 0; altura de línea: 28px; decoración de texto: ninguna; borde izquierdo: 1px sólido #393942; borde derecho: 1px sólido #4f5058; fuente- familia: Helvetica, sans-serif; peso de fuente: tamaño de fuente: 13px; sombra de texto: 1px 1px 1px rgba(0,0,0,.6): color .2s facilidad de entrada-salida; transición: color .2s facilidad de entrada y salida; -o-transición: color .2s facilidad de entrada y salida; transición: color .2s facilidad de entrada y salida) .menu li:primer hijo a (borde-); izquierda: ninguno; ) .menu li: último hijo a (borde derecho: ninguno; ) .menu li: hover > a ( color: #8fde62; )

Paso 4 - submenú

Dado que tenemos un menú de sitio desplegable que usa CSS, también debemos establecer un diseño para la lista anidada. Primero, establezca un margen de 40 px en la parte superior y 0 px en la izquierda + agregue esquinas redondeadas. Para mostrar/ocultar el submenú, inicialmente establezca la propiedad de opacidad en cero y, al pasar el cursor, en uno. Para crear el efecto de aparición de un submenú, establezca el valor de la altura de la lista en cero y con el cursor = 36px.

.menu ul (posición: absoluta; arriba: 40px; izquierda: 0; opacidad: 0; fondo: #1f2024; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; borde -radius: 0 0 5px 5px; -webkit-transition: opacidad .25s facilidad .1s; -moz-transition: opacidad .25s facilidad .1s; transición: opacidad .25s facilidad .1s;) .menu li: hover> ul (opacidad: 1;) .menu ul li (altura: 0; desbordamiento: oculto; relleno: 0; -webkit-transition: altura .25s facilidad. 1s; -moz-transition: altura .25s facilidad .1s ; -ms-transition: altura .25s facilidad .1s ) .menu li: hover > ul li (altura: 36px; desbordamiento: visible; relleno: 0 ; )

Menú ul ( posición: absoluta; arriba: 40px; izquierda: 0; opacidad: 0; fondo: #1f2024; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; borde- radio: 0 0 5px 5px; -webkit-transition: opacidad .25s facilidad .1s; -moz-transition: opacidad .25s facilidad .1s; opacidad .25s facilidad .1s; ) .menu li:hover > ul ( opacidad: 1; ) .menu ul li ( altura: 0; desbordamiento: oculto; relleno: 0; -webkit-transition: altura .25s facilidad .1s; -moz-transition: altura .25s facilidad .1s; -ms-transition: altura .25s facilidad .1s; .menu li:hover > ul li (altura: 36px; desbordamiento: visible; relleno: 0;)

Establecemos el ancho de los enlaces = 100px, se agrega un borde inferior en la parte inferior de todos los elementos excepto el último. Además, si lo deseas, puedes colocar imágenes para los elementos del submenú (¡atención! no olvides cambiar las rutas a las imágenes en el código por las que uses).

.menu ul li a (ancho: 100px; relleno: 4px 0 4px 40px; margen: 0; borde: ninguno; borde inferior: 1px sólido #353539;) .menu ul li: último hijo a (borde: ninguno;) .menu a.documents (fondo: url (../img/docs.png) centro de 6px sin repetición;) .menu a.messages (fondo: url (../img/bubble.png) centro de 6px sin repetición ;) .menu a.signout (fondo: url (../img/arrow.png) centro de 6px sin repetición;)

Menú ul li a ( ancho: 100px; relleno: 4px 0 4px 40px; margen: 0; borde: ninguno; borde inferior: 1px sólido #353539; ) .menu ul li:last-child a ( borde: ninguno; ) . menú a.documents (fondo: url(../img/docs.png) centro de 6px sin repetición;) .menu a.messages (fondo: url(../img/bubble.png) centro de 6px sin repetición; ) .menu a.signout (fondo: url(../img/arrow.png) centro de 6px sin repetición;)

Personalmente me gusta la facilidad de implementación y el uso de íconos. Aquí está el código final de codepen:

La opción de Josh Riser es visualmente similar al menú desplegable HTML y CSS anterior. El código no tiene un selector secundario ">" (útil en diseños de varios niveles), pero el autor hace un buen uso de los efectos CSS3 (transición, sombra de cuadro y sombra de texto) para obtener un resultado más hermoso. El enlace en la fuente no describe el proceso de creación de un menú desplegable horizontal, por lo que proporcionaré inmediatamente el código final:

En este ejemplo, veremos cómo crear un menú desplegable usando CSS que, además de los elementos, contendrá un bloque de búsqueda. A menudo se puede encontrar una implementación similar en los archivos . En términos de tiempo de implementación y complejidad, la solución es un poco más complicada que las anteriores. Se publicó en mayo de 2013, por lo que es posible que tengas que modificar algunas cosas, aunque funcionó bien en nuestras pruebas.

Código HTML

Para la navegación, como siempre, se utiliza una lista desordenada (con la clase nav). Los elementos del menú normal son elementos de lista (li) y contienen enlaces (un href) sin clases ni ID. La excepción son 3 elementos especializados de este menú desplegable horizontal con los siguientes ID:

configuración: vincular imagen;
buscar: un bloque con una búsqueda y el botón correspondiente;
opciones: contiene un submenú (implementado a través de una lista con la clase subnav).

También en el código verá un script sin prefijos para usar propiedades CSS sin prefijos. Final opción HTML para el menú desplegable se ve así:

Solicitud
Junta
Opciones
- Ajustes
- Solicitud
- Junta
- Opciones

Solicitud
Junta
Opciones
- Ajustes
- Solicitud
- Junta
- Opciones

Menú CSS

1. Estilos básicos y elementos de menú.

Primero, especificamos la fuente Montserrat, un fondo gris oscuro y una altura fija para los elementos del menú. Todos los elementos tienen flotador: alineación izquierda y posicionamiento relativo para que luego puedas agregar un submenú con posición: absoluta;

@importar URL (http://fonts.googleapis.com/css?family= Montserrat); * (margen: 0; relleno: 0;) .nav (fondo: #232323; altura: 60px; pantalla: bloque en línea;) .nav li (flotante: izquierda; tipo de estilo de lista: ninguno; posición: relativa; )

@importar URL(http://fonts.googleapis.com/css?family=Montserrat); * ( margen: 0; relleno: 0; ) .nav ( fondo: #232323; altura: 60px; pantalla: bloque en línea; ) .nav li ( flotante: izquierda; tipo de estilo de lista: ninguno; posición: relativa; )

2. Formatear enlaces

Los elementos del menú utilizan el diseño básico +. La altura es la misma que en la clase de navegación. Para #settings el enlace de la imagen al principio del menú, se establece la alineación.

.nav li a (tamaño de fuente: 16px; color: blanco; pantalla: bloque; altura de línea: 60px; relleno: 0 26px; decoración de texto: ninguno; borde izquierdo: 1px sólido #2e2e2e; familia de fuentes: Montserrat , sans-serif; sombra de texto: 0 0 1px rgba (255, 255, 255, 0.5); .nav li a: hover (color de fondo: #2e2e2e;) #settings a (relleno: 18px; altura: 24px; tamaño de fuente: 10px; altura de línea: 24px;

Nav li a (tamaño de fuente: 16px; color: blanco; pantalla: bloque; altura de línea: 60px; relleno: 0 26px; decoración de texto: ninguno; borde izquierdo: 1px sólido #2e2e2e; familia de fuentes: Montserrat, sans-serif; sombra de texto: 0 0 1px rgba(255, 255, 255, 0.5); .nav li a:hover (color de fondo: #2e2e2e; ) #settings a (relleno: 18px; altura: 24px; fuente -tamaño: 10px; altura de línea: 24px)

3. Bloque de búsqueda

Este elemento tiene un ancho fijo y consta de varias partes: un campo de entrada (#search_text) con un fondo verde y un botón de búsqueda (#search_button). En algunos navegadores, el color de fondo puede ser gris.

#search (ancho: 357px; margen: 4px;) #search_text (ancho: 297px; relleno: 15px 0 15px 20px; tamaño de fuente: 16px; familia de fuentes: Montserrat, sans-serif; borde: 0 ninguno; alto: 52px ; margen derecho: 0; color: blanco; fondo: #1f7f5c; flotante: cuadro de borde; transición: todo) :: -webkit-input-placeholder (/* Navegadores WebKit */ color: blanco) : -moz-placeholder ( /* Mozilla Firefox 4 a 18 */ color : blanco ; ) :: -moz-placeholder ( /* Mozilla Firefox 19+ */ color : blanco ; ) : -ms-input-placeholder ( /* explorador de Internet 10+ */color: blanco; ) #search_text: foco (fondo: rgb (64, 151, 119); ) #search_button (borde: 0 ninguno; fondo: #1f7f5c url (search.png) centro sin repetición; ancho: 60px; flotante: izquierda; relleno : 0 ; alineación de texto: centro ;

#search ( ancho: 357px; margen: 4px; ) #search_text( ancho: 297px; relleno: 15px 0 15px 20px; tamaño de fuente: 16px; familia de fuentes: Montserrat, sans-serif; borde: 0 ninguno; alto: 52px ; margen derecho: 0; contorno: ninguno; flotante: izquierdo; cuadro de borde: todos) ::-marcador de posición de entrada web (/* Navegadores WebKit */ color: blanco;) :-marcador de posición de moz (/* Mozilla Firefox 4 a 18 */ color: blanco; ) ::-moz-placeholder ( /* Mozilla Firefox 19+ */ color: blanco; ): -ms-input-placeholder ( /* Internet Explorer 10+ */ color: blanco ; ) #search_text:focus ( fondo: rgb(64, 151, 119); ) #search_button ( borde: 0 ninguno; fondo: #1f7f5c url (search.png) centro sin repetición; flotante: izquierda; alineación de texto: 52 píxeles;

4. Submenú desplegable

El toque final nos permitirá crear un menú desplegable en CSS que se active para el último elemento #opciones.

#options a( border-left : 0 none ; ) #options > a ( background-image : url (triangle.png ); background-position : 85% center ; background-repeat : no-repeat ; padding-right : 42px ; ) .subnav (visibilidad: oculto; posición: absoluta; arriba: 110%; derecha: 0; ancho: 200 px; alto: automático; opacidad: 0; transición: todos 0,1 s; fondo: #232323; ) .subnav li (flotante : ninguno ; ) .subnav li a ( borde inferior : 1px sólido #2e2e2e ; ) #options : hover .subnav (visibilidad : visible ; arriba : 100% ; opacidad : 1 ; )

#options a( border-left: 0 none; ) #options>a ( background-image: url(triangle.png); background-position: 85% center; background-repeat: no-repeat; padding-right: 42px; ) .subnav (visibilidad: oculta; posición: absoluta; arriba: 110%; derecha: 0; ancho: 200px; altura: automático; opacidad: 0; transición: todos 0.1s; fondo: #232323; ) .subnav li ( float : none; ) .subnav li a ( borde inferior: 1px sólido #2e2e2e; ) #options:hover .subnav (visibilidad: visible; superior: 100%; opacidad: 1; )

En los estilos encontrarás la inserción de una imagen de fondo triangular (triangle.png) para indicar el submenú - no olvides indicar la ruta correcta para esta y otras imágenes en el ejemplo. La apariencia de un submenú se implementa utilizando la propiedad de opacidad. Solución final en codepen:

EN esta opción Se utilizan principalmente técnicas CSS2.1, la solución más o menos es nueva, para marzo de 2015. Si le falta un subnivel en el menú desplegable horizontal de un sitio, entonces este ejemplo contiene tres a la vez. Usando la pseudoclase:solo-niño, se agrega un símbolo "+" a los elementos para indicar la presencia de un submenú.

En general, un ejemplo bueno y sencillo. No describiremos el proceso de implementación en detalle, porque... Es similar a los anteriores: primero se crea un marco HTML y luego se le agregan estilos gradualmente. Descargue el código final usando el enlace a la fuente; puede verlo parcialmente en Codepen:

Total

Arriba vimos 4 opciones sobre cómo hacer un menú desplegable usando CSS + HTML, aunque hay muchos más ejemplos similares en Internet. Existen soluciones con jQuery, pero lo más probable es que esto solo sea útil para implementar algunos efectos especiales y tareas no estándar. En la mayoría de los casos, una combinación de CSS + HTML será suficiente, sobre todo porque ahora los principales requisitos para un menú son la comodidad y la rápida velocidad de carga.

Finalmente, dos notas sobre los códigos anteriores. Algunos ejemplos utilizan imágenes en CSS para el menú desplegable, por lo que deberá revisar cuidadosamente las rutas de las imágenes y proporcionar los valores correctos para su sitio. En segundo lugar, algunas de las soluciones tienen entre 2 y 3 años, por lo que conviene volver a comprobar su rendimiento en diferentes navegadores.

Si conoce otras implementaciones modernas interesantes de menús desplegables horizontales para un sitio web, envíe enlaces en los comentarios.

Descripción de la especificación

La etiqueta está destinada a mostrar una lista de elementos del menú. Similar a las etiquetas y

En HTML4 la etiqueta se ha vuelto obsoleta, se recomienda usar la etiqueta en su lugar

HTML	opción del menú opción del menú
HTML5	...

Requerido.

El uso de esta etiqueta está prohibido por la especificación HTML4; el código válido se obtiene solo cuando se utiliza una transición. En HTML5, la etiqueta se utiliza correctamente.

HTML 4.01 IE Cr Op Sa Fx

Etiqueta MENÚ

En este asunto:

Cocina rusa. sopa burlátskaya
Comida ucraniana. Vareniki
Cocina moldava. pimentón
Cocina caucásica. sopa de kharcho
Cocina báltica. Vertinyai

Resultado este ejemplo mostrado en la Fig. 1.

Arroz. 1. Vista de una lista creada usando una etiqueta

HTML5 IE Cr Op Sa Fx

Etiqueta MENÚ

Nuevo... Abrir... Guardar
Copiar Cortar Pegar

Del autor: Hola a todos. Por alguna razón, los webmasters asocian los menús desplegables con scripts, pero durante mucho tiempo dicha navegación se puede realizar de forma absolutamente sencilla utilizando CSS puro. Además, dicho menú no será peor. Hoy te mostraré cómo crear un menú desplegable en CSS. Compartiré, por así decirlo, la receta.

En general, primero decidamos cómo crearemos el menú en sí. en html5 de forma estándar Se considera crearlo en el contenedor de navegación mediante una lista con viñetas. Hagamos precisamente eso. Quitaremos los marcadores más tarde. usando css, no los necesitamos en el menú en absoluto.

En realidad, le escribiré de inmediato a marcado html con listas anidadas. Es decir, nuestra lista será de dos niveles: contendrá otras listas. Es decir, para cada elemento hay 1 lista, que formará un menú desplegable.

Hay un punto importante aquí, y es que es posible que no necesites desplegar todos los elementos, sino solo algunos. No hay problema, entonces en los elementos sin menús desplegables simplemente no creamos listas anidadas.

En realidad, aquí está todo el marcado:

< nav id = "nav" >

< ul >

< li > < a href = "#" >Párrafo 1< / a >

< ul class = "second" >

< li > < a href = "#" >Subcláusula< / a > < / li >

< / ul >

< / li >

< li > < a href = "#" >Punto 2< / a >

< ul class = "second" >

< li > < a href = "#" >Subcláusula< / a > < / li >

< / ul >

< / li >

< li > < a href = "#" >Punto 3< / a >

< ul class = "second" >

< li > < a href = "#" >Subcláusula< / a > < / li >

< / ul >

< / li >

< li > < a href = "#" >Punto 4< / a >

< ul class = "second" >

< li > < a href = "#" >Subcláusula< / a > < / li >

< / ul >

< / li >

< / ul >

< / nav >

Entiendo que es enorme. Este es el problema con las listas anidadas, que necesitas escribir mucho código. Pero tenga en cuenta el hecho de que estamos destacando 4 puntos principales y para cada uno habrá un menú desplegable.

En realidad, le di a toda la navegación un identificador de nav y a todas las listas anidadas una clase de estilo de segundo para entender que están anidadas.

Genial, tenemos el marcado listo, puedes mirar el resultado:

Sí, se ve terrible. Pero ahora habilitaremos css y en unos minutos nuestra navegación se transformará. Vamos a trabajar.

Lo primero que haré es restablecer todo el relleno a los valores predeterminados para todos los elementos. Sólo se interpondrán en nuestro camino; es mejor colocar las sangrías nosotros mismos más tarde, donde sea necesario.

*( margen: 0; relleno: 0; )

margen: 0;

relleno: 0;

#nav( altura: 70px; ) #nav ul( estilo de lista: ninguno; )

#nav(

altura: 70 píxeles;

#navul(

estilo de lista: ninguno;

Ahora tenemos que decidir cuál será nuestro menú. ¿Horizontales o verticales? Sugiero hacer uno horizontal primero y ver todo en su ejemplo. Para hacer esto necesitas escribir los siguientes estilos:

#nav > ul > li( float: izquierda; ancho: 180px; posición: relativa; )

#nav > ul > li(

flotador izquierdo;

ancho: 180px;

posición: relativa;

Tenga en cuenta que al usar el signo > nos referimos a los elementos de la lista que están directamente anidados en ul, que están directamente anidados en nav. Esto es muy importante porque evita que el estilo se aplique a elementos de lista anidados. El hecho es que, según mi idea, los elementos de la lista principal se ubicarán horizontalmente y los anidados, verticalmente.

Pero usted, por supuesto, puede hacerlo de otra manera, de acuerdo con su idea. Puede asegurarse de que todos los puntos estén en una línea.

De todos modos, espero que puedas entender el código anterior. Obliga a que los elementos de la lista principal se empujen hacia la izquierda para que aparezcan todos en la misma línea, aunque sean elementos de bloque. También les di un ancho explícito y un posicionamiento relativo.

¿Por qué posicionar? Es necesario para luego posicionar absolutamente las listas anidadas. Si ha estudiado el posicionamiento en CSS, entonces probablemente sepa que si le da a un bloque un posicionamiento relativo, todos los elementos que contiene se pueden ubicar absolutamente dentro de este bloque en particular, y no en toda la ventana del navegador.

Mientras tanto, esto es lo que tenemos hasta ahora:

A partir de esta captura de pantalla ya puedes imaginar el resultado aproximado. Por supuesto, todavía tenemos que diseñar los elementos de manera hermosa para que los ojos no pidan clemencia al ver la navegación.

#nav li a( pantalla: bloque; fondo: #90DA93; borde: 1px sólido #060A13; color: #060A13; relleno: 8px; alineación de texto: centro; decoración de texto: ninguno; ) #nav li a:hover( fondo: #2F718E)

#navli a(

bloqueo de pantalla;

antecedentes: #90DA93;

borde: 1px sólido #060A13;

color: #060A13;

relleno: 8px;

alineación de texto: centro;

decoración del texto: ninguna;

#nav li a: flotar (

fondo: #2F718E;

En primer lugar, es necesario bloquear los propios enlaces. Esto es necesario para que el relleno funcione y todas las propiedades se apliquen correctamente. A continuación, especifico los colores de fondo, texto, parámetros del marco, relleno interno y alineación del texto al centro. Finalmente, deshago el subrayado de enlaces.

No es necesario especificar todos estos parámetros como lo hice yo. Puedes elegir los colores arbitrariamente, hacer un marco diferente o no usarlo en absoluto, las sangrías se pueden reducir o aumentar.

Tenga en cuenta que en este caso no utilizamos el signo >, por lo que las reglas anteriores se aplicarán a todos los enlaces, incluidos los de párrafos anidados. Entonces ahora tenemos lo siguiente:

Genial, pero entiendes que los subelementos no deberían ser visibles, deberían abrirse cuando pasas el cursor sobre el elemento deseado. Sin esto, nuestro menú parece una mesa. Bueno, es hora de ocultar los elementos anidados.

#nav li .segundo( pantalla: ninguna; posición: absoluta; arriba: 100%; )

#nav li .segundo(

pantalla: ninguna;

posición: absoluta;

Top 100%;

Primero, ocultamos listas completamente anidadas. En segundo lugar, les damos posicionamiento absoluto y coordenada superior: 100%. Esto significa que el menú desplegable aparecerá claramente debajo del elemento principal al que pertenece, claramente al 100% de la altura de ese elemento.

Ahora solo vemos el menú principal de la página web, que es lo que necesitamos.

Lo único que nos queda por hacer es lo más importante: darnos cuenta de la caída misma. No tiene nada de complicado, mira este código:

#nav li:hover .segundo( mostrar: bloquear; )

#nav li:hover .segundo(

bloqueo de pantalla;

Este código funcionará perfectamente. Cuando pasa el cursor sobre un elemento del menú principal, la sublista se hará visible. Además, solo la lista que está anidada en el elemento sobre el que se encuentra el cursor.

Sólo hay un pequeño problema: el ancho de los elementos anidados no coincide con el ancho de los principales. Pero esto se puede solucionar muy fácilmente añadiendo los estilos adecuados:

#nav li li (ancho: 180px;)

#navlili(

ancho: 180px;

Eso es todo, problema resuelto:

Todo funciona perfectamente. Cuando pasa el cursor sobre el elemento principal, aparece un menú desplegable correspondiente. Si mueves el cursor hacia un lado, desaparece. Si mueve el cursor a los elementos anidados, puede hacer clic en ellos e ir a sección requerida sitio. Por lo tanto, hemos creado para usted un menú desplegable muy simple y liviano sin scripts.

Bueno, está bien, hemos descubierto completamente la navegación horizontal, pero además, la navegación vertical es muy común en los sitios y también puede ser desplegable. De hecho, cambiar el menú de horizontal a vertical es muy sencillo sólo tenemos que cambiar un par de líneas de código;

Primero, deberá eliminar el float:left de los elementos de la lista principal. Es esta propiedad la que garantiza que nuestros elementos se muestren en una línea, pero ¿por qué necesitamos esto si la navegación debe ser vertical?

Ahora solo queda cambiar las reglas para el selector #nav li .segundo, es decir, para listas anidadas, es decir, deben ubicarse de manera un poco diferente. Como esto:

#nav li .segundo( pantalla: ninguna; posición: absoluta; izquierda: 100%; arriba: 0; )

#nav li .segundo(

pantalla: ninguna;

posición: absoluta;

izquierda: 100%;

arriba: 0;

Es decir, es necesario registrar dos coordenadas en lugar de una. En primer lugar, en el caso de la navegación horizontal, dije que, según lo previsto, los elementos del submenú deberían mostrarse debajo de los elementos principales. En el caso de un menú vertical, esto no es adecuado: los elementos deben mostrarse en el lateral.

Por lo tanto, cambiamos arriba: 100% a izquierda: 100%. Además, también necesitamos la coordenada superior. Lo ponemos a 0 para que el submenú esté al mismo nivel que el elemento al que corresponde.

Eso es todo, ahora todo funciona como debería. Puedes probarlo. Como puedes ver, no mentí cuando dije que sólo tendría que reescribir unas pocas líneas de código.

Utilizando prácticamente el mismo enfoque, puede crear más niveles de menú si es necesario. Por ejemplo, creemos una lista para el cuarto elemento del menú principal, que estará anidado en uno de los subelementos.

Hola queridos visitantes de mi blog! Hoy hablaremos sobre el menú horizontal principal del sitio, es decir, cómo alinear el menú horizontal en el centro. Sí, a primera vista, ¿qué tiene de complicado? Puse las sangrías necesarias, las ajusté y listo. Pero aquí hay algunos matices. Un sitio, ante todo, es dinámico, es decir. Constantemente aparece nuevo contenido en el sitio, aparecen nuevos bloques de información, etc. Así es como algunos elementos pueden aparecer/desaparecer en el menú principal. Teniendo todo esto en cuenta, debemos asegurarnos de que cuando agregamos o eliminamos un elemento del menú, el menú permanece en el centro. Eso sí, no siempre es necesario centrarlo, todo depende del diseño. Pero si aún desea colocar el menú horizontal en el centro, utilizando algunos trucos simples en CSS podemos lograr el resultado deseado.

Estructura del artículo

Primero, veamos el ejemplo de un menú horizontal que no tiene elementos desplegables.

Párrafo 1
Punto 2
Punto 3
Punto 4
Punto 5

Miremos todo en orden, aquí todo es sencillo. Creamos un contenedor “menú principal” donde colocamos nuestro menú en forma de lista desordenada.

Ahora todo se reduce a los estilos CSS. Primero restablecemos todos los márgenes y el relleno a cero para todos los navegadores. A continuación, usando la propiedad "float:left", desplazamos nuestra lista desordenada hacia la izquierda y luego, usando el posicionamiento relativo, la desplazamos un 50% hacia la derecha. El ancho de la lista "ul" será igual a la suma de las longitudes de todos los elementos "li" que se encuentran dentro de ella. Así, si dividimos mentalmente la ventana del navegador por la mitad, nuestro menú se moverá a la derecha de la línea divisoria. Para alinear, también aplicaremos posicionamiento relativo a los elementos "li" y los moveremos hacia la izquierda un 50%, especificando la propiedad "izquierda:-50%". Y también, casi lo olvido, nuestro contenedor "menú principal" debe especificar la propiedad "overflow:hidden", de lo contrario obtendremos raya horizontal Desplazarse.

Eso es todo, ahora nuestro menú está alineado al centro. Ahora puedes sumar o restar puntos, esto no afectará el posicionamiento. También puede utilizar este menú en sus sitios web simplemente cambiando los estilos para adaptarlos a su diseño.

Ahora veamos los subelementos desplegables. Aquí la situación es algo diferente y algo más complicada, porque en el primer caso, nuestros subelementos no aparecerán porque hemos especificado la propiedad "overflow:hidden" en el bloque "mainmenu". Esto significa que los elementos fuera de este bloque no se mostrarán. Pero hay una salida.

Entonces, modifiqué el código anterior y eliminé la propiedad "overflow:hidden".

Párrafo 1
- subcláusula 1.1
  - subcláusula 1.1.1
  - subcláusula 1.1.2
  - subcláusula 1.1.3
- subcláusula 1.2
  - subcláusula 1.2.1
  - subcláusula 1.2.2
  - subcláusula 1.2.3
- subcláusula 1.3
- subcláusula 1.4
- subcláusula 1.5
Punto 2
- subcláusula 2.1
- subcláusula 2.2
- subcláusula 2.3
  - subcláusula 2.3.1
  - subcláusula 2.3.2
  - subcláusula 2.3.3
- subcláusula 2.4
- Subelemento largo, subelemento largo
Elemento de menú largo 3
- subcláusula 3.1
- subcláusula 3.2
- subcláusula 3.3
- subcláusula 3.4
- subcláusula 3.5
Punto 4
- subcláusula 4.1
- subcláusula 4.2
- subcláusula 4.3
- subcláusula 4.4
- subcláusula 4.5
Punto 5
- subcláusula 5.1
- subcláusula 5.2
- subcláusula 5.3
- subcláusula 5.4
- subcláusula 5.5

Ahora nuestro menú está ubicado en el centro y los subelementos aparecen cuando pasas el cursor sobre él.

También puedes centrar el menú aplicando una nueva regla en css - flexbox. En general, quiero dedicar un post aparte a los trucos con flexbox, vale la pena, simplifica enormemente la vida de un maquetador. En general, no profundizaremos aquí... Aquí solo proporcionaré el código CSS para el menú con elementos desplegables. El código HTML es el mismo que el anterior.

Como puede ver, las reglas han cambiado solo para la lista principal: #mainmenu ul. Lo único fue que tuve que agregar prefijos para Versión anterior navegadores. Observo que la regla flexbox solo se entiende correctamente navegadores modernos. Si su objetivo es navegadores más antiguos, la opción flexible deberá posponerse. Puedes ver qué navegadores entienden bien flexbox