Menú desplegable HTML CSS. Menú horizontal simple para varios navegadores. Cómo hacer un menú horizontal usando html5

Menú li( flotante:izquierda; )

Todo nuestro menú ahora se ha vuelto horizontal.

Si no entiendes qué pasó exactamente y qué hace propiedad flotante Recomiendo buscar en Google información sobre esta propiedad y estudiarlo a fondo, porque
Ni una sola página de diseño puede prescindir de él, te lo aseguro. Bueno, está bien, ¡continuemos!

Menú li a( display:block;/* Convertir el enlace en un elemento de bloque*/ padding:12px 20px;/* Establecer el relleno */ text-decoration: none; /* eliminar el subrayado */ color:#fff;/* establezca los enlaces de color en blanco */ background:#444;/* oscurezca el color de fondo */ font:14px Verdana, sans-serif;/* establezca el tamaño y el nombre de la fuente */ )

He aquí uno de los más reglas importantes- bloqueo de pantalla;. El hecho es que, por defecto, los enlaces son elementos en línea y, para elementos en línea sangría en diferentes navegadores se utilizan de diferentes maneras, por lo que es recomendable hacer del enlace un elemento de bloque y solo entonces aplicarle las propiedades asociadas con sangrías externas o internas. No quiero agobiarte ahora información innecesaria con el tiempo ejemplos reales Usted mismo comprenderá por qué se pone aquí tanto énfasis.

¡Veamos qué tenemos, actualizamos la página del navegador y listo!:

Como veis no tiene mala pinta, podemos decir que, en principio, nuestro menú está listo. Lo único que queda por hacer es configurar la luz de los enlaces al pasar el cursor, y me parece que el menú se verá mejor con separadores entre los elementos.

Empecemos con los delimitadores:

Menú li (borde izquierdo: 1px sólido #666;). menú li: primer hijo (borde izquierdo: ninguno;)

¿Qué hemos hecho aquí? Sí, todo es muy sencillo, ponemos nuestros puntos (

Veamos qué tenemos de nuevo:

En mi opinión, es mucho mejor con delimitadores.

Menú li a:hover( fondo:#888; )

Nuevamente usando una pseudoclase especial, esta vez al pasar el cursor, configuramos el color del enlace al pasar el cursor sobre él, mira:

Creo que es genial :) Espero que termines con el mismo menú que el mío.

terminaré aquí Esta lección, realmente espero que te haya sido útil y ahora sepas cómo crear un menú horizontal simple en HTML puro y css. Por supuesto, creamos un menú de un nivel; será un poco más complicado con un menú de dos niveles (con una lista anidada), pero este es un tema para otra lección, eso es todo para mí. ¡Ven de nuevo, me alegraré!

Hace tiempo que quería escribir un artículo sobre cómo crear un submenú usando CSS. Mucha gente lo hace en JQuery y les sale bastante bien, sin embargo, todo el principio básico Aquí describiré cómo crear submenús usando CSS. Y luego, partiendo de esta base, podrás mejorar aún más el submenú.

Aquí está el código CSS de inmediato:

* html ulli (
flotador izquierdo;
}
* html ulli a (
altura: 1%;
}
ul (
borde inferior: 1px sólido #000;
estilo de lista: ninguno;
margen: 0;
relleno: 0;
ancho: 100px;
}
ulli (
posición: relativa;
}
ulli a (
bloqueo de pantalla;
borde: 1px sólido #000;
borde inferior: 1px;
relleno: 5px;
decoración de texto: ninguna;
}
li-ul (
pantalla: ninguna;
izquierda: 99px;
posición: absoluta;
arriba: 0;
}
li: pase el cursor por ul (
bloqueo de pantalla;
}

Lo más importante aquí es el selector "li:hover ul". De hecho, muestra el contenido del menú. De forma predeterminada, es "mostrar: ninguno", y cuando pasa el cursor sobre un elemento del menú, el submenú se vuelve: "mostrar: bloquear", es decir, visible. Es lo más importante. Además, en los dos primeros selectores (aquellos con * ) hay un truco de CSS para IE; de lo contrario, nada funcionará en este navegador sin él. Todo lo demás es apariencia, que, por supuesto, se puede cambiar.

Aquí está el código HTML:

• 
  hogar


• 
  Menú 1
  
  
  
  • 
    Submenú 1
    
  
  
  • 
    Submenú 2
    
  
  
  • 
    Submenú 3
    
  
  
  
  


• 
  Menú 2
  
  
  
  • 
    Submenú4
    
  
  
  • 
    Submenú 5
    
  
  
  • 
    Submenú 6
    
  
  
  • 
    Submenú7
    
  
  
  • 
    Submenú 8
    
  
  
  
  

Si piensas detenidamente en esta estructura, todo queda muy claro. La etiqueta ul crea un menú. Si la ul está dentro de otra ul, entonces ya es un submenú. Y la etiqueta li es responsable de un elemento de menú específico.

Por supuesto, el menú es el más sencillo, tanto en lógica y estructura como en diseño. Por supuesto que puedes con usando jQuery hacer una apertura suave. También puedes cambiar el diseño, pero todo el principio seguirá siendo el mismo que en este submenú escrito en CSS y HTML.

Creemos un menú de navegación horizontal simple para el sitio. Para esto usaremos técnicas simples, lo que redundará en la correcta visualización de nuestro menú en todos los navegadores.

Vamos a empezar. Creemos una lista con los nombres de nuestro menú. Deje que los nombres de los elementos sean: "Inicio", "Noticias", "Productos", "Servicios", "Socios", "Contactos". Nosotros creamos archivo nuevo llamado menu.html, por ejemplo, usando Dreamweawer o usando un bloc de notas normal. En él, entre las etiquetas del cuerpo colocamos nuestro menú. Esta es una lista con viñetas normal de ul con elementos li. Por supuesto, hacemos que cada elemento del menú sea un enlace, donde en lugar de la URL insertamos el hash #. Usando programa photoshop crea una imagen de 3x30 px de tamaño, con relleno degradado como se muestra en la imagen de abajo. El archivo se guardará en formato gif. Llamémoslo bg.gif. Este dibujo actuará como imagen de fondo de nuestro menú.

Aquí está el contenido del archivo menu.html:

Menú horizontal simple para varios navegadores

• hogar
• Noticias
• Productos
• Servicios
• Socios
• Contactos

Ahora creemos por separado un archivo de estilo llamado main.css. Su listado se muestra completo a continuación.

Ul ( margin:0; /*zero padding*/ padding:0; /*zero padding*/ float:left; /*alinear la lista a la izquierda*/ width:auto;/*establecer el ancho del auto según el tipo y contenido de la lista */ background-image: url(bg.gif /*set); imagen de fondo*/ repetición de fondo: repetición-x; /*repetir nuestra imagen horizontalmente*/ list-style:none; /*eliminar marcadores de lista*/ background-color:#4778c3; /*establecer el color de fondo de la imagen*/ font-size:13px; /*establecer el tamaño de fuente*/ font-family:Arial, Helvetica, sans-serif; /*establecer la fuente*/ ) ul li ( float:left; /*alinear los elementos de la lista a la izquierda*/ ) ul a ( display:block; /*representar enlaces de menú como elementos de bloque*/ width:100px; /* establezca el tamaño del bloque*/ height:30px /*y la altura del bloque*/ text-align:center /*centered text*/ line-height: 2.1em; Espaciado entre líneas*/ decoración de texto: ninguna; /*eliminar el subrayado de los enlaces*/ color:#fff; /*color del texto del enlace: blanco*/ border-right:#fff solid 1px; /*borde lado derecho bloque (línea blanca de 1 px)*/ ) ul a:hover ( color:#ccc; /*el enlace cambia de color cuando se coloca el cursor sobre*/ )

Creo que no debería haber preguntas sobre el contenido del archivo main.css; escribí los consejos en los comentarios con suficiente detalle y claridad, así que no me repetiré. No olvides conectarlo a nuestra página menu.html usando

Resumir. Como resultado, obtuvimos un menú horizontal completamente para todos los navegadores que se ve igual no solo en todos navegadores modernos, pero también en rarezas como IE 5.5 e IE 6.0. Todos los elementos del menú se presentan como elementos de bloque y tienen las mismas dimensiones de 100 px de ancho y 30 px de alto. El diseño de un elemento de bloque utilizando el borde derecho se utiliza como separador de elementos del menú. blanco 1 px de espesor. Esta es prácticamente la forma más sencilla de implementar un menú horizontal. Por supuesto, si lo deseas, puedes modificarlo, hacerlo más bonito y funcional usando tu imaginación, propiedades css y adicional elementos graficos. Bueno, nuestro menú horizontal se parece a esto:

Ventajas de esta solución:
Fácil de hacer
código sencillo
Sin tablas ni javascript
Compatibilidad entre navegadores: el menú tiene el mismo aspecto en todos los navegadores
Sólo se utiliza un dibujo.
Código mínimo en la página menu.html
Código mínimo para implementar estilos en main.css

Archivos utilizados en en este ejemplo, se puede descargar en el archivo

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 segura en 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 usando 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 punto importante, es decir, 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:

• Párrafo 1
  • Subcláusula
  • Subcláusula
  • Subcláusula
• Punto 2
  • Subcláusula
  • Subcláusula
  • Subcláusula
• Punto 3
  • Subcláusula
  • Subcláusula
  • Subcláusula
• Punto 4
  • Subcláusula
  • Subcláusula
  • Subcláusula

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, configuré el identificador de navegación para toda la navegación y para todas las listas anidadas. clase de estilo segundo entender que están anidados.

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

Sí, se ve terrible. Pero ahora incluiremos en trabajo css y en tan solo 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; )

#nav( altura: 70px; ) #nav ul( 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; )

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 estén elementos de bloque. También les di un ancho explícito y posicionamiento relativo.

¿Por qué posicionar? Es necesario para luego posicionar absolutamente las listas anidadas. Si ha estudiado el posicionamiento en CSS, 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)

En primer lugar, es necesario bloquear los propios enlaces. Esto es necesario para que funcione. relleno y todas las propiedades se aplicaron 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 en este caso No utilizamos el signo >, por lo que las reglas especificadas se aplicarán a todos los enlaces, incluidos los ubicados en 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 artículo 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%; )

Primero, ocultamos listas completamente anidadas. En segundo lugar les pedimos 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 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; )

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;)

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 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; )

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.

Todo aquel que decide crear su propio sitio web se enfrenta a la necesidad de crear un bonito menú para tu sitio web. En este artículo, le diré cómo, utilizando código HTML normal y reglas CSS simples, puede crear un excelente menú desplegable que sea fácil de cambiar y expandir. ¡Y no necesitamos ningún código JavaScript para esto!

El primero y el más etapa importante Al crear un menú desplegable, el primer paso es crear su estructura. Esto se hace mejor utilizando listas sin numerar. Creemos un menú simple como este:

• hogar
• Artículos
  • HTML
  • CSS
  • PHP
  • mysql
• Libros
  • Promoción y promoción.
  • Negocio electrónico
  • Diseño web
  • Sistemas de pago
• Sobre nosotros

El código html resultó ser bastante simple y nada complicado. Esta lista se verá así.

En siguiente etapa llevaremos nuestro menú a más hermosa vista. Esto se puede hacer fácilmente usando CSS.
Primero que nada, quitemos los marcadores en lista sin numerar, sangrías y también establecer el ancho de nuestro menú.

#nav ul (margen: 0px; relleno: 0px; estilo de lista: ninguno; ancho: 200px;)

Ahora necesitamos establecer la posición de los elementos de la lista. Dado que nuestro menú será vertical, esto facilita nuestro trabajo. Sin embargo, necesitamos establecer un valor para la propiedad. "posición", Cómo "relativo". Esto es necesario para posicionar absolutamente el submenú en relación con el menú principal. También estableceremos el guión bajo para los elementos del menú.

#nav ul li ( posición: relativa; borde inferior: 1px sólido #ccc; )

Ahora necesitamos corregir nuestra submenú. Como queremos que nuestro menú aparezca a la derecha del menú principal en el momento en que el cursor está sobre este elemento, necesitamos una propiedad de lista anidada. "posición" valor ajustado "absoluto". También necesitamos fijar su posición. Esto se hace de la siguiente manera

#nav li ul (posición: absoluta; izquierda: 200px; arriba: 0; pantalla: ninguna;)

Usando atributos izquierda Y arriba establecemos el posicionamiento absoluto de nuestro submenú en relación con el elemento del menú principal. También le asigné el atributo "mostrar" significado "ninguno", ya que no queremos ver el submenú al abrir la página.

Así que ahora nuestro menú se ve así.

Ahora echemos un vistazo a nuestros enlaces. En primer lugar, para que cada enlace ocupe todo el espacio asignado para él dentro del elemento de la lista que lo contiene, le asignamos el atributo "mostrar" significado "bloquear". También eliminaremos el guión bajo y estableceremos el color de fondo y el color del texto de los enlaces.

#nav ul li a (pantalla: bloque; decoración de texto: ninguna; color: #777; fondo: #fff; relleno: 5px;)

#nav li:hover ul (pantalla: bloquear;)

Ahora nuestro menú ya está funcionando y se ve así.

Ya sólo queda darle un aspecto más atractivo.

Primero, asegurémonos de que cuando pase el cursor sobre los elementos de nuestro menú, el fondo y el color del texto cambien. Para hacer esto, agregue el siguiente código

#nav li: pase el cursor sobre ( color: #FFFFFF; fondo: url (img/fone-tr.png); )

Aquí uso esta imagen como fondo, pero puedes usar el relleno con cualquier otro color (por ejemplo: color de fondo:#0000ff; ).

#nav li:hover ul a:hover ( color de fondo:#cccccc; imagen de fondo:none; color:#FFFFFF; )

OK, ¡todo terminó ahora! Es nuestro menú desplegable en html y css listo. Puedes ver lo que se nos ocurrió.

Parecería que este podría ser el final, pero no. Desafortunadamente primeras versiones explorador de Internet entender pseudoclase :flotar solo para etiqueta - Entonces li: flotar, que es responsable de la aparición de submenús y de cambiar el color de fondo, no significa nada para él.