hogar › Ajustes › Cómo hacer un bonito menú en la parte superior en html. Menú horizontal en CSS

Cómo hacer un bonito menú en la parte superior en html. Menú horizontal en CSS

Del autor: Te doy la bienvenida a nuestro blog sobre creación de sitios web. Esta es una serie de artículos dedicados a la nueva especificación y hoy me gustaría contarles cómo crear un menú en HTML5 y en qué se diferencia este proceso del mismo en versiones anteriores del lenguaje.

Cuáles son las diferencias

En primer lugar, me gustaría decir que la especificación no es tan nueva: comenzó su desarrollo en 2009. En realidad, desde entonces ha habido un desarrollo constante: aparecen nuevas funciones en HTML5, los navegadores modernos admiten cada vez más estas mismas funciones, por lo que pronto será posible hablar de soporte total para esta tecnología, aunque no es un todo. es más bien un conjunto de nuevas posibilidades, cada una de las cuales es independiente.

Bueno, está bien, pero cuál es la diferencia en la creación de la navegación principal (menú), ya que estás leyendo un artículo sobre este tema, definitivamente debería haber algunas diferencias. Bueno, ¿cómo se creaba el menú antes? Por lo general, para esto se usaba una lista con viñetas, que se colocaba en un contenedor adicional para toda la navegación: un div normal.

Entonces, con la llegada de nuevas etiquetas, ahora puede hacer algo más correcto: en lugar de una etiqueta div, envuelva el menú en nav, un nuevo elemento semántico que se creó específicamente para recopilar los enlaces más importantes y agruparlos.

Puede poner una lista o simplemente un conjunto de enlaces en la navegación. Me parece que esta es una solución aún más sencilla y correcta, aunque en muchas plantillas todavía se puede ver la implementación del menú mediante las etiquetas ul, li, a.

Curiosamente, el contenedor de navegación se creó específicamente para enlaces prioritarios en la página. De hecho, puede haber más de un contenedor de este tipo en una página, pero solo deben colocarse en ellos aquellos enlaces que realmente forman la navegación principal (por ejemplo, el menú principal superior y su duplicado en el pie de página).

Cómo hacer un menú horizontal usando html5

hogar Servicios Contactos Reseñas

Ni siquiera necesitas ningún marco en la lista; inicialmente todo se mostrará en una línea, ya que los enlaces son elementos en línea.

Otra cosa es que tienen un diseño muy limitado debido a sus propiedades en línea. Sólo podrá operar con propiedades tales como: color, tamaño de fuente, márgenes. Si desea establecer un color de fondo específico, crear separadores y agregar relleno (o determinar el tamaño de cada elemento del menú), entonces no podrá hacerlo con una línea.

Aquí tendremos que convertir nuestros elementos en elementos de bloque. Para ello, necesitan escribir la propiedad:

bloqueo de pantalla;

Ahora van de arriba a abajo, es decir, nuestra navegación se ha vuelto vertical. Para volver a convertirlo en horizontal, debe agregar ciertas propiedades. Por ejemplo, en lugar de un tipo de bloque, defina un tipo de línea de bloque para ellos o proporcióneles (flotante: izquierda). Lea más sobre estos métodos.

Navegación vertical

Por lo general, para hacer un menú vertical en html5, usan una lista, pero el marcado que les di arriba también es adecuado para nosotros. Como vio, si convierte enlaces en enlaces de bloques, se alinearán automáticamente uno tras otro de arriba a abajo, porque dos bloques no pueden estar en la misma línea.

Ahora puede aplicarles las reglas de diseño necesarias. Los bloques tienen muchas más propiedades que un elemento en línea, por lo que tienes muchas más opciones. Por ejemplo, agregué estos:

a( decoración de texto: ninguna; color: #fff; relleno: 5px; tamaño de fuente: 22px; pantalla: bloque; fondo: gradiente lineal (a la derecha, rgba(96,108,136,1) 0%,rgba(63,76,107 ,1) 100%); ancho: 200px; alineación de texto: centro)

decoración del texto: ninguna;

color: #fff;

relleno: 5px;

tamaño de fuente: 22px;

bloqueo de pantalla;

fondo: lineal - degradado (a la derecha, rgba (96, 108, 136, 1) 0%, rgba (63, 76, 107, 1) 100%);

ancho: 200px;

texto - alinear: centro

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; 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: vinculación

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. El HTML final 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- marcador de posición ( /* Mozilla Firefox 4 a 18 */ color : blanco ; ) :: -moz-placeholder ( /* Mozilla Firefox 19+ */ color : blanco ; ) : -ms-input-placeholder ( /* Internet Explorer 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; flotante: izquierda ; alineación de texto: centro; cursor: puntero;

#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; esquema: ninguno; flotante: izquierdo; cuadro de borde: todo) ::-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:

Esta opción utiliza 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:only-child, 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. Descarga el código final usando el enlace a la fuente; puedes 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.

En este tutorial crearemos un menú horizontal usando CSS. Por supuesto, puede utilizar soluciones ya preparadas, por ejemplo, contratar programadores para CMS Made Simple. Sin embargo, no buscas caminos fáciles, ¿verdad? :matón:

Paso 1: marcado HTML

Primero, necesitamos crear elementos de lista con una etiqueta para cada elemento en nuestro menú horizontal. Para crear un submenú, debe agregar otra lista secundaria dentro de la principal.

Paso 2: crea estilos CSS para el menú horizontal

Inicialmente, el menú se ve vertical, para solucionar esto escribiremos algunos estilos, editaremos las sangrías, los bordes, el color de fondo y redondearemos las esquinas. Fijemos el ancho y el alto. Alinearemos los elementos del menú a la izquierda usando float:left (para que la navegación adquiera una estructura horizontal).

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, #5c5e6a 0%,#3c3d44 100%); -moz-linear-gradient(arriba, #5c5e6a 0%,#3c3d44 100%); 100%); fondo: -ms-linear-gradient(arriba, #5c5e6a 0%,#3c3d44 100%); radio: 4px; -moz-border-radius: 4px; .menu li (posición: relativa; estilo de lista: ninguno; flotante: izquierda; visualización: bloque; altura: 40px)

Escribamos el siguiente estilo por un tiempo, ocultando la lista desplegable. Esto facilitará la edición.

Paso 3: estilo del menú de enlace

A continuación, escribiremos estilos que agreguen algunas propiedades CSS básicas como tipo de fuente, colores, relleno, etc. Luego agregaremos una sombra para el texto y las transiciones de color para crear un efecto suave donde el color cambia no instantáneamente, sino con algún intervalo. Para crear un separador de enlaces, agreguemos un borde a la izquierda y a la derecha, y luego eliminemos el borde izquierdo del primer enlace y el borde derecho del último enlace. Cuando pasas el cursor sobre el menú, solo cambiará el color.

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 #494942; 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 .3s facilidad de entrada-salida; transición: color .3s facilidad de entrada y salida; -o-transición: color .3s facilidad de entrada y salida; transición: color .3s 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: #9fde63; )

Paso 4 - Menú desplegable

En primer lugar, eliminemos esta línea de código que agregamos en el segundo paso.

Menú ul (pantalla: ninguno;)

Ahora editaremos el estilo del submenú. Agreguemos una posición de submenú de 40 px en la parte superior y 0 px a la izquierda del elemento del menú y agreguemos esquinas redondeadas en la parte inferior. Establezcamos la opacidad en cero y cambiémosla a 1 al pasar el mouse para crear un efecto de aparición/desaparición gradual. Para el efecto de deslizamiento hacia arriba/abajo, debemos establecer la altura de la lista en 0px cuando el menú desplegable está oculto y en 36px cuando se coloca el cursor sobre el menú desplegable.

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

Establezca el ancho del menú desplegable en el que se puede hacer clic en 100 px. Después de cada enlace agregué un borde para separarlos. Eliminaremos el borde en el último enlace.

Menú ul li a ( ancho: 100px; relleno: 4px 0 4px 40px; margen: 0; borde: ninguno; borde inferior: 1px sólido #464649; ) .menu ul li:last-child a ( borde: ninguno; )

Para completar un menú CSS horizontal, debe agregar un ícono para cada submenú desplegable. Para hacer esto, crearemos una clase personalizada para cada uno de los submenús y agregaremos una imagen de fondo.

Menú a.d (fondo: url(docs.png) centro de 6px sin repetición;) .menu a.m (fondo: url(bubble.png) centro de 6px sin repetición;) .menu a.s (fondo: url(arrow.png) no -repetir 6px en el centro)

Conclusión

Hemos creado con éxito un menú desplegable horizontal usando estilos CSS3 y sin usarlo, aunque también era posible. Si tienes alguna pregunta, házmelo saber en los comentarios.

(descargas: 395)

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.

Plan de lección y diseño de nuestro menú.

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

De hecho, escribiré inmediatamente marcado con listas anidadas en html. 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.

Escribir estilos CSS

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 primero el horizontal 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 todos aparezcan 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 del fondo, el texto, los parámetros del marco, el relleno interno y la alineación del texto centrado. 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.

Implementemos la deserción

Lo 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(pantalla: 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 la sección deseada del sitio. Por lo tanto, hemos creado para usted un menú desplegable muy simple y liviano sin scripts.

Convertir el menú a vertical

Bueno, está bien, hemos descubierto completamente la navegación horizontal, pero además, la navegación vertical se encuentra muy a menudo en los sitios web 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.

Menú horizontal con varios niveles.

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.

1. Menú jQuery vertical brillante 2. Efecto genial. Menú bailable.

4. Lista desplegable usando jQuery

Excelente estilo del elemento de la interfaz en forma de lista desplegable.

Cuando pasa el mouse sobre el botón, aparece un panel en la parte superior.

6. Complemento jQuery “MobilyBlocks” para mostrar un menú radial

7. Menú usando sprites

Menú javascript animado con efecto de brillo.

Menú fresco y agradable usando jQuery.

9. Menú jQuery “GarageDoor” 10. Menú de desplazamiento vertical de jQuery

Implementación de un menú con una gran cantidad de elementos. Se desplaza cuando mueve el cursor del mouse hacia arriba o hacia abajo.

11. Diseño de lista desplegable jQuery

12. Complemento de navegación de página

Desplazamiento suave hasta la sección deseada de la página. Complemento jQuery de navegación de una página.

13. Complemento “Menú de contenido animado”

Nuevo complemento jQuery. Excelente implementación de navegación animada del sitio. Cuando recorre los elementos del menú, aparece un bloque con una descripción y posibles enlaces y, según el elemento seleccionado, cambia el fondo de la página, que se extiende hasta llenar toda la pantalla independientemente del tamaño de la ventana del navegador. Asegúrese de consultar la página de demostración.

14. Complemento de menú jQuery “Menú dulce”

Menú animado con elementos emergentes.

15. Menú jQuery fijo

Cuando se desplaza hacia abajo en la página, el menú permanece fijo en la parte superior de la pantalla.

16. Menús de desplazamiento del kit deslizante

Implementar un menú vertical con una gran cantidad de elementos. El desplazamiento por los elementos se realiza utilizando la rueda del ratón o utilizando los enlaces "Anteriores" y "Siguiente".

17. Menú CSS3 con estilo

18. Nuevo menú CSS3 al estilo Apple

Nuevo menú al estilo Apple. Parece más oscuro que antes, pero no menos lindo.

19. Menú jQuery original

Menú desplegable con efecto de fondo. Los subelementos del menú se expanden hacia arriba. Cuando pasa el cursor sobre un elemento del menú, la imagen de fondo cambia.

20. Menú animado con jQuery

Menú animado. Los elementos del menú se presentan en forma de iconos y descripciones. Varios efectos excelentes al pasar el mouse sobre un elemento del menú. Hay 8 efectos, para verlos todos, siga los enlaces Ejemplo1-Ejemplo8 en la página de demostración.

21. Menú XML “Menú de desplazamiento” con desplazamiento

Menú de desplazamiento vertical y horizontal. Una buena solución si hay una gran cantidad de elementos en el menú.

22. Menú contextual en un sitio web usando jQuery

Aparece un menú cuando hace clic derecho en un área específica.

23. Menú circular de dos niveles para el sitio.

Cuando selecciona un elemento del menú, los elementos del submenú se muestran a la derecha.

24. Menú jQuery CSS3 con efecto de desenfoque “Blur Menu” CSS3

El menú original de jQuery CSS3 viene en 7 estilos diferentes. Cuando pasas el mouse sobre uno de los elementos del menú, el resto parece desenfocarse.

25. Algunos menús animados jQuery CSS3 espectaculares

10 menús animados creativos. Menús CSS3 horizontales y verticales con varios efectos y transiciones.

El archivo también incluye el archivo PSD del menú original.

27. Menú MagicLine

El fondo o subrayado de un elemento de menú sigue al mouse con un ligero retraso, mientras que el fondo cambia suavemente de color a medida que se mueve de un elemento a otro. Efecto muy bonito, parece inusual. Atención: el efecto no funciona en ópera.

28. Burbujas de imágenes

Un efecto excelente cuando pasas el mouse sobre una de las imágenes. El efecto recuerda algo al jQDock descrito anteriormente.

31. Menús jQuery interesantes con varios efectos.

Menú horizontal, vertical. Efectos interesantes.

32. Gran menú jQuery al estilo Apple

34. Menú jQuery con un efecto interesante.

36. Menú nuevo con un efecto interesante usando jQuery

Un efecto muy interesante. Perfecto para diseñar sitios web de cartera.

Interesante efecto de las miniaturas que aparecen al pasar el mouse.

40. Lista desplegable con desplazamiento automático

Bonito efecto de transición entre elementos.

42. Gran menú jQuery

43. Hermoso menú jQuery grande

44. Menús desplazables de jQuery

Los elementos del menú se presentan en forma de miniaturas.

46. Menú de navegación radial de jQuery

47. Menú CSS y jQuery

Una barra de navegación con un cuadro de búsqueda que se vuelve translúcido a medida que se desplaza hacia abajo en la página.

48. Menú jQuery horizontal

49. Menú jQuery vertical

Gran menú vertical. Cuando pasa el cursor, aparece un elemento de menú.

50. Menú jQuery horizontal

Un efecto interesante al pasar el cursor sobre un elemento del menú.

52. Menú desplegable de jQuery

Cuando pasa el mouse sobre el menú, aparecerán sus elementos. Los elementos que aparecen se muestran en forma de arco, cuyo radio puede establecer al configurar el complemento. En algunos navegadores no verá una visualización en arco, el menú se mostrará directamente, pero esto no arruinará la impresión general de esta implementación del menú jQuery.

53. Barra de navegación CSS y jQuery

Un efecto interesante al pasar el mouse sobre un elemento del menú.

54. panel emergente jQuery

Menú animado fresco en tonos grises.

58. Navegación del sitio por columnas usando jQuery

Una solución interesante para la navegación, que se presenta en forma de franjas verticales. Cuando pasa el mouse sobre estas barras, aparece una imagen del elemento y una lista de submenús. Cuando hace clic en un elemento del submenú, aparece una página con una descripción. Esta implementación es perfecta para sitios promocionales o presentaciones. Asegúrese de consultar la demostración del complemento.

59. Navegación del sitio jQuery