Menú desplegable de CSS / HTML puro

  1. Menú desplegable de CSS / HTML puro En este tutorial haremos un menú horizontal clásico en CSS puro....
  2. Animamos el menú horizontal mientras apuntamos.
  3. Describe el menú desplegable CSS / HTML.

Menú desplegable de CSS / HTML puro

En este tutorial haremos un menú horizontal clásico en CSS puro. Tiene iconos en las listas. Cuando señala un elemento, cambia suavemente el color del botón y el texto, se agrega una sombra. Las listas desplegables se pueden realizar en varios niveles y lo principal se implementa simplemente en CSS3 puro.

La continuación de esta lección aquí - parte 2 VERSIÓN MÓVIL menú horizontal ".

Ver la pluma POyzbW por Denis ( @ Dwstroy ) en Codepen .

En la lección usa:

  • pantalla: flexión;
  • utilizar la transición
  • Posiciona los elementos con la posición.

Estructura de menú horizontal HTML

Primero, escriba el marcado debajo del menú horizontal. Abrimos nuestro entorno de desarrollo en mi caso, este es PhpStorm, creamos un archivo index.html, prescribimos el cuadro html: 5, reemplazamos lang con ru.

Todos los metadatos se eliminarán, excepto la codificación. Registraré mi título " Menú de Tom ".

Entre el cuerpo escribimos la etiqueta del encabezado, y en ella hay un bloque con la clase .dws-menu que contendrá nuestro menú. A continuación, la estructura será la siguiente, crearemos listas en la cantidad de cinco piezas. En cada lista habrá un enlace con el atributo href = "#". Luego iré al icono con la clase .fa .fa-

<header> <nav class = "dws-menu"> ul> li * 5> a [href = "#"]> i.fa.fa- </ nav> </ header>

Pulsamos para aplicar.

Escribamos el nombre de los elementos del menú ( Inicio, Productos, Servicios, Noticias, Contactos ).

A continuación, seleccione y conecte los iconos. Vaya al sitio, seleccionaremos los iconos para estos elementos del menú:

<i class = "fa fa- home "> </ i> <i class = "fa fa- shopping- cart "> </ i> <i class = "fa fa- cogs "> </ i> <i class = "fa fa -th-list "> </ i> <i class = "fa fa -envelope-open "> </ i>

<i class = fa fa- home > </ i> <i class = fa fa- shopping- cart > </ i> <i class = fa fa- cogs > </ i> <i class = fa fa -th-list > </ i> <i class = fa fa -envelope-open > </ i>

Descargue el archivo desde el sitio con iconos, extraiga su contenido a su computadora, copie la carpeta de fuentes y la carpeta css a su entorno de desarrollo.

La carpeta de fuentes contiene fuentes de iconos, y la carpeta css contiene sus estilos. Los estilos comprimidos pueden eliminarse font-awesome.min, conectamos la fuente descomprimida font-awesome.css.

En index.html conectamos íconos, y registramos cada artículo con su propio estilo de ícono ( inicio , carrito de compras , engranajes , lista de contactos , sobre abierto ).

Hemos creado el marco principal, creamos un submenú después de la descripción del estilo principal, y ahora crearemos un archivo donde describiremos los estilos principales del menú horizontal style.css y lo conectaremos a index.html. Para verificar que los estilos estén conectados, cree una carpeta img, en ella colocaré una imagen arbitraria en el fondo. Vamos a escribir la conexión de la imagen utilizando el fondo.

body {background-image: url ("../ img / ep_naturalwhite.png"); }

Como vemos, todo se ha mostrado y luego procederemos a la descripción de los estilos.

En primer lugar, vamos a restablecer todas las sangrías, que los diferentes navegadores pueden configurar de forma predeterminada:

.dws-menu * {margen: 0; relleno: 0; }

Establecer el encabezado a 200 picos. y asigne los que puede descargar y conectarse por separado a sí mismo en el sitio, por si acaso, escriba fuentes adicionales.

encabezado {margen: 200px; Familia tipográfica: Cuprum, Arial, Helvetica, sans-serif; }

Oculta los marcadores en las listas:

.dws-menu ul, .dws-menu ol {estilo de lista: ninguno; }

Las listas se mostrarán horizontalmente con display: flax, y lo haremos en el centro:

.dws-menu> ul {display: flex; justificar-contenido: centro; }

En el encabezado, solo sangraremos la parte superior, escribiremos un margen superior.

encabezado { margin-top: 200px; Familia tipográfica: Cuprum, Arial, Helvetica, sans-serif; }

Diseñemos nuestro menú, configuremos el color de los botones, la fuente, etc.

Selecciona enlaces nav> ul li, y haz que bloqueen elementos. Establezca el fondo del menú, escriba sangrías, especifique el tamaño, el color, elimine el subrayado y haga los encabezados en mayúsculas.

.dws-menu> ul li a {display: block; fondo: #ececed; relleno: 15px 30px 15px 40px; tamaño de fuente: 14px; color: # 454547; texto-decoración: ninguno; transformar texto: mayúsculas; }

Luego posiciona los iconos, asigna las listas a position: relative; Para una mayor alineación de los iconos:

.dws-menu> ul li {posición: relativo; }

A continuación, seleccionamos los íconos, los posicionamos absolutamente, hacemos sangrado desde arriba a 15 picos, desde los 12 picos de la izquierda, aumentamos el tamaño a 18 picos.

.dws-menu> ul li> a i.fa {posición: absoluta; superior: 15px; izquierda: 12px; tamaño de fuente: 18px; }

Asigne el separador en forma de borde a las listas, seleccione el primer elemento LI, establezca el borde. Seleccionamos el último elemento LI y le asignamos un borde similar.

.dws-menu> ul li: first-child {border-left: 1px solid # b2b3b5; } .dws-menu> ul li: last-child {border-right: 1px solid #babbbd; }

Haciendo delimitadores para listas de LI:

.dws-menu> ul li {posición: relativo; borde derecho: 1px sólido # c7c8ca; }

El menú ha adquirido la apariencia, luego puede proceder a la descripción de los estilos durante la activación.

Animamos el menú horizontal mientras apuntamos.

Seleccione enlaces y asigne un color al bloque, y asigne el color del enlace en sí con el icono a blanco. Vamos a añadir otra sombra oscura. Con la ayuda de la transición en 0.3 segundos haremos una apariencia suave:

.dws-menu li a: hover {background: # 454547; color: #ffffff; caja de sombra: 1px 5px 10px -5px negro; transición: toda la facilidad de 0.3s; }

Y para que este efecto desaparezca sin problemas, agregue este estilo al enlace a gusto:

.dws-menu> ul li a {display: block; fondo: #ececed; relleno: 15px 30px 15px 40px; tamaño de fuente: 14px; color: # 454547; texto-decoración: ninguno; transformar texto: mayúsculas; transición: toda la facilidad de 0.3s; }

El menú principal está terminado y puede continuar con la descripción del submenú y los submenús incluidos en ellos.

Describe el menú desplegable CSS / HTML.

Acerca de nosotros abrimos index.html y agregamos, por ejemplo, un menú adicional a los productos. Inserte el UL entre las listas de LI y coloque cinco listas en él, que contendrán enlaces con el atributo herf = "#".

ul> li * 5> a [href = "#"]

Pulsamos para aplicar, escribimos el nombre de los artículos ( Ropa, Electrónica, Alimentos, Herramientas, Vida, Química ).

<ul> <li> <a href="#"> Ropa </a> </ li> <li> <a href="#"> Electrónica </a> </ li> <li> <a href = "#"> Comida </a> </ li> <li> <a href="#"> Herramientas </a> </ li> <li> <a href="#"> Vida. química </a> </ li> </ ul>

Luego abra style.css y describa los estilos de submenú.

Seleccionamos la segunda lista y le asignamos la posición: absoluta; , vamos a establecer el ancho mínimo a 150 picos.

/ * submenú * / .dws-menu li ul {posición: absoluta; ancho mínimo: 150px; }

Vamos a escribir a las listas de la frontera en 1 pico.

.dws-menu li> ul li {border: 1px solid # c7c8ca; }

Para los enlaces en el submenú, estableceremos sangrías en 10 picos., Eliminar la transformación del texto y hacer que el fondo sea un par de tonos de fondo más oscuro: # e4e4e5; .

.dws-menu li> ul li a {padding: 10px; transformación de texto: ninguna; fondo: # e4e4e5; }

Luego crea otro submenú. Vaya al archivo de marcado y, por ejemplo, en el formulario "Electrónica" por menú de analogía como lo hicimos antes. Describimos los encabezados de los elementos ( Cámaras, Computadoras, Teléfonos ) y los guardamos.

<li> <a href="#"> Electrónica </a> <ul> <li> <a href="#"> Cámaras </a> </ li> <li> <a href="#"> Computadoras </a> </ li> <li> <a href="#"> Teléfonos </a> </ li> </ ul> </ li>

Fueron sacados, pero ocultos bajo el menú principal, ahora posición: absoluto; Anidado UL y moverlo al pico 150. al lado

.dws-menu li> ul li ul {posición: absoluta; derecha: -150px; arriba: 0; }

A continuación, haremos que aparezca el submenú al apuntar a los elementos principales del menú superior, para esto agregamos display: none; y de este modo ocultar todos los puntos internos.

/ * submenú * / .dws-menu li ul {posición: absoluta; ancho mínimo: 150px; pantalla: ninguna; }

Y para su apariencia, seleccionaremos las listas al pasar y las mostraremos con la ayuda de display: block; .

.dws-menu li: hover> ul {display: block; }

Ahora puede agregar menús de varios niveles simplemente copiando el bloque UL, cambiando sus elementos.

<ul> <li> <a href="#"> <i class = "fa fa-home"> </ i> Inicio </a> </ li> <li> <a href="#"> < i class = "fa fa-shopping-cart"> </ i> Productos </a> <ul> <li> <a href="#"> Ropa </a> <ul> <li> <a href = "#"> Zapatos </a> </ li> <li> <a href="#"> Chaquetas </a> </ li> <li> <a href="#"> Pantalones </a> < / li> </ ul> </ li> <li> <a href="#"> Electrónica </a> <ul> <li> <a href="#"> Cámaras </a> </ li> <li> <a href="#"> Computadoras </a> </ li> <li> <a href="#"> Teléfonos </a> <ul> <li> <a href="#"> Samsung </a> </ li> <li> <a href="#"> Flf </a> </ li> <li> <a href="#"> Apple </a> </ li> < / ul> </ li> </ ul> </ li> <li> <a href="#"> Alimentos </a> </ li> <li> <a href="#"> Herramientas </ h a> </ li> <li> <a href="#"> Gen. química </a> </ li> </ ul> </ li> <li> <a href="#"> <i class = "fa fa-cogs"> </ i> Servicios </a> <ul > <li> <a href="#"> Servicio 1 </a> </ li> <li> <a href="#"> Servicio 2 </a> </ li> <li> <a href = "#"> Servicio 3 </a> </ li> </ ul> </ li> <li> <a href="#"> <i class = "fa fa-th-list"> </ i> Noticias </a> </ li> <li> <a href="#"> <i class = "fa fa-envelope-open"> </ i> Contactos </a> </ li> </ ul>

Entonces terminemos los botones con los botones. Yo uso, he creado varios Presets, usted puede crear los suyos propios, en mi caso, solo copio este código y lo coloco en el lugar de fondo que escribí antes.

.dws-menu> ul li a {display: block; / * Enlace permanente - este gradiente: http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98.757577+100;Custom+3 * / background: # c9c9c9 ; / * Navegadores antiguos * / fondo: -moz-linear-gradient (top, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * FF3.6-15 * / background: -webkit-linear-gradient (arriba, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * Chrome10-25, Safari5.1-6 * / background: gradiente lineal (hacia abajo, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * W3C, IE10 +, FF16 +, Chrome26 +, Opera12 +, Safari7 + * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# c9c9c9', endColorstr = '# 757577', GradientType = 0); / * IE6-9 * / padding: 15px 30px 15px 40px; tamaño de fuente: 14px; color: # 454547; texto-decoración: ninguno; transformar texto: mayúsculas; transición: toda la facilidad de 0.3s; } .dws-menu li a: hover {/ * Enlace permanente - este gradiente: http://colorzilla.com/gradient-editor/#e0e1e5+0.454547+2.454547+98,e0e1e5+100 * / background: # e0e1e5; / * Navegadores antiguos * / fondo: -moz-lineal-gradiente (arriba, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * FF3.6-15 * / background: -webkit-linear-gradient (arriba, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * Chrome10-25, Safari5.1-6 * / background: gradiente lineal (hacia abajo, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * W3C, IE10 +, FF16 +, Chrome26 +, Opera12 +, Safari7 + * / filter: progid: DXImageTransform. Microsoft.gradient (startColorstr = '# e0e1e5', endColorstr = '# e0e1e5', GradientType = 0); / * IE6-9 * / color: #ffffff; caja de sombra: 1px 5px 10px -5px negro; transición: toda la facilidad de 0.3s; } dws-menu> ul li a {display: block;  / * Enlace permanente - este gradiente: http://colorzilla

Si lo desea, este menú puede diseñarse para el estilo que mejor nos convenga en el sitio, basta con generar un color y reemplazarlo en el código. Resultó un menú horizontal simple y al mismo tiempo agradable, hecho en CSS puro.

Deja un comentario: