hogar /
Firmware/ Menú vertical con iconos en css puro. Menú horizontal receptivo con CSS3 puro
Menú vertical con iconos en css puro. Menú horizontal receptivo con CSS3 puro
Menú vertical se realiza sobre la base de una lista numerada o con viñetas. De forma predeterminada, todos los elementos de la lista se organizan verticalmente, llenando todo el ancho del elemento contenedor, que a su vez ocupa todo el ancho de su bloque contenedor.
Los elementos de la lista pueden contener no solo enlaces, sino también títulos, iconos e imágenes. Usando el menú vertical, puede hacer comentarios en el sitio, una lista de categorías, etc.
1. Menú vertical con título
Una opción de diseño simple y elegante. Adecuado para categorías de estilo en el sitio. Al pasar el mouse, el elemento de la lista cambia el color del enlace.
* (tamaño del cuadro: borde-cuadro; margen: 0;) .widget (relleno: 20px 30px; fondo: blanco; familia de fuentes: "Roboto", sans-serif;). título-widget (transformación de texto: mayúsculas ; espacio entre letras: 2px; color: # 222; tamaño de fuente: 16px; padding-left: 15px; margin-bottom: 15px; border-left: 2px solid # b99d61;) .widget-list (padding: 0; list -style: none;) .widget-list a: before (content: "\ 2014"; margin-right: 14px;) .widget-list a (text-decoration: none; outline: none; display: block; padding: 6px 0; espaciado entre letras: 1px; peso de fuente: 300; color: # 444; transición: .3s lineal;). Lista de widgets a: hover (color: # b99d61;)
2. Menú vertical en el estilo de "mapa de metro"
Se proporciona una solución interesante para el diseño de un menú vertical, la adición de menús anidados. "Subway branch": el borde izquierdo de la lista, los marcadores se generan antes de cada enlace.
.metro (estilo de lista: ninguno; relleno: 0; margen: 30px 0 0 50px; borde izquierdo: 5px sólido # DAE4F1;) .metro li (altura de línea: 2em;) .metro ul (margen: 20px 0 20px 15px; padding: 0; border: none; list-style: none;) .metro ul: before, .metro ul: after (content: ""; ancho: 5px; alto: 28px; fondo: # DAE4F1; posición: relativa ; display: block; left: -9px;) .metro ul: before (transform: rotate (-45deg); margin-top: -15px;) .metro ul: after (transform: rotate (45deg); bottom: -20px ;) .metro ul li (borde izquierdo: 5px sólido # DAE4F1;) .metro ul li: primer hijo (margen superior: -5px; padding-top: 5px;) .metro ul li: último hijo (padding -bottom: 9px; margin-bottom: -25px;) .metro a (text-decoration: none; display: block; font-family: "Noto Sans", sans-serif; color: # 4A4B4D;) .metro a: antes (contenido: ""; display: inline-block; fondo: # CA682D; ancho: 12px; alto: 12px; izquierda: -9px; posición: relativa; radio del borde: 50%; margen-derecho: .5em;)
3. Menú vertical con efectos de desplazamiento
El ícono y el relleno de fondo que aparece cuando pasa el mouse sobre un elemento de la lista ayudará a diversificar el diseño de los elementos del menú vertical.
Los iconos del menú proporcionan un ancla visual que complementa la descripción verbal de cada categoría. Para mostrar iconos, debe conectarse. También puede utilizar cualquier otra fuente de icono o icono de imagen.
En este tutorial haremos un menú horizontal clásico en CSS puro. Tiene iconos en listas. Cuando pasa el cursor sobre un elemento, cambia suavemente el color del botón y el texto, y se agrega una sombra. Las listas desplegables pueden ser de varios niveles y, lo más importante, todo es bastante simple implementado en CSS3 puro.
En la lección usaremos:
pantalla: flex;
usando transición;
posicionaremos los elementos usando position.
Estructura HTML de un menú horizontal
El primer paso es escribir el marcado para el menú horizontal. Abrimos nuestro entorno de desarrollo, en mi caso es PhpStorm, creamos un archivo index.html, escribimos el framework html: 5, reemplazamos lang por ru.
Eliminaré todos los metadatos excepto la codificación, escribiré mi título " Menú Tom».
Entre el cuerpo escribimos la etiqueta de cabecera, y en ella un bloque con la clase .dws-menu en el que se ubicará nuestro menú. Además, la estructura será la siguiente, crearemos listas en la cantidad de cinco piezas. Cada lista contendrá un enlace con el atributo href = "#". Luego habrá un ícono I con la clase .fa .fa-
Pulsamos para aplicar.
Anotemos el nombre de los elementos del menú ( Inicio, Productos, Servicios, Noticias, Contactos).
A continuación, seleccione y conecte los iconos. Vaya al sitio web de Font Awesome, seleccione los iconos de estos elementos del menú:
Descargamos el archivo del sitio con iconos, extraemos su contenido a nuestra computadora, copiamos la carpeta de fuentes y la carpeta css en nuestro entorno de desarrollo.
La carpeta de fuentes contiene fuentes de iconos y la carpeta css contiene sus estilos. Los estilos comprimidos se pueden eliminar de font-awesome.min, y se puede incluir font-awesome.css sin comprimir.
En index.html, conecte los iconos y asigne a cada elemento su propio estilo de icono ( hogar, carrito de compras, engranajes, lista-th, sobre abierto).
Hemos hecho el marco principal, formaremos 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 comprobar que los estilos están incluidos, creemos una carpeta img, en ella colocaré una imagen arbitraria en el fondo. Registremos la conexión de la imagen usando background.
Cuerpo (imagen de fondo: url ("../ img / ep_naturalwhite.png");)
Describir el estilo CSS para un menú horizontal
En primer lugar, restablezcamos toda la sangría que los diferentes navegadores pueden establecer de forma predeterminada:
Menú Dws * (margen: 0; relleno: 0;)
Establezcamos el encabezado en 200 picos. y asignar la fuente Cuprum, que se puede descargar y conectar por separado a nuestro sitio web, por si acaso añadimos fuentes adicionales.
Encabezado (margen: 200px; familia de fuentes: Cuprum, Arial, Helvetica, sans-serif;)
Ocultemos las viñetas de las listas:
Dws-menu ul, .dws-menu ol (estilo de lista: ninguno;)
Mostramos las listas horizontalmente con display: flax, y las centramos:
Menú Dws> ul (pantalla: flex; justificar-contenido: centro;)
En el encabezado solo sangraremos la parte superior, escriba margin-top.
Encabezado ( margen superior: 200px; familia de fuentes: Cuprum, Arial, Helvetica, sans-serif; )
Diseñemos nuestro menú, establezcamos el color del botón, la fuente, etc.
Dws-menu> ul li a (display: block; background: #ececed; padding: 15px 30px 15px 40px; font-size: 14px; color: # 454547; text-decoration: none; text-transform: mayúsculas;)
Luego posicionamos los iconos, asignamos posición a las listas: relativo; para centrar aún más los iconos:
Menú Dws> ul li (posición: relativa;)
Menú Dws> ul li> a i.fa (posición: absoluta; arriba: 15px; izquierda: 12px; tamaño de fuente: 18px;)
Asigne un separador de borde a las listas, seleccione el primer elemento LI, establezca el borde. Seleccione el último elemento LI y asígnele un borde similar.
Menú dws> ul li: último hijo (borde derecho: 1px sólido #babbbd;)
Hacemos separadores para las listas LI:
.dws-menu> ul li (posición: relativa;borde derecho: 1px sólido # c7c8ca;
}
El menú ha adquirido la apariencia, entonces puede comenzar a describir los estilos al pasar el mouse.
Animando un menú horizontal al pasar el mouse
Dws-menu li a: hover (background: # 454547; color: #ffffff; box-shadow: 1px 5px 10px -5px black; transición: todos los 0.3s facilidad;)
Y para hacer que este efecto se desvanezca, agreguemos este estilo solo al enlace:
.dws-menu> ul li a (display: block; background: #ececed; padding: 15px 30px 15px 40px; font-size: 14px; color: # 454547; text-decoration: none; text-transform: mayúsculas; transición: todos los 0.3s facilidad; )
Hemos terminado el menú principal y puede proceder a la descripción de los submenús y los menús adjuntos a ellos.
Describir un menú desplegable CSS / HTML
Abra index.html y agregue, por ejemplo, un menú adicional a los productos. Insertar UL entre las listas LI, en él colocaremos cinco listas, que contendrán enlaces con el atributo herf = ”#”.
ul> li * 5> a
Haga clic para aplicar, escriba el nombre de los elementos ( Ropa, Electrónica, Alimentos, Herramientas, Hogar. química).
ropa
Electrónica
Comida
Instrumentos
Vida. química
Luego abra style.css y describa los estilos del submenú.
Seleccione la segunda lista y asígnele la posición: absoluta; , establezcamos el ancho mínimo en 150 píxeles.
/ * submenú * / .dws-menu li ul (posición: absoluta; ancho mínimo: 150px;)
Agreguemos un borde de 1 pico a las listas.
Menú Dws li> ul li (borde: 1px sólido # c7c8ca;)
Para los enlaces en el submenú, establezca las sangrías en 10 píxeles, elimine la transformación de texto y haga que el fondo sea un par de tonos más oscuro: # e4e4e5; ...
Menú Dws li> ul li a (relleno: 10px; transformación de texto: ninguna; fondo: # e4e4e5;)
Luego crearemos otro submenú. Vayamos al archivo de marcado y, por ejemplo, en "Electrónica" formamos el menú por analogía, como hicimos antes. Describimos los títulos de los párrafos ( Cámaras, Computadoras, Teléfonos) y guardar.
Electrónica
Cámaras
Ordenadores
Telefonos
Fueron mostrados, pero ocultos bajo el menú principal, ahora posición: absoluta; UL anidado y moverlo 150 picos. por el lado:
Dws-menu li> ul li ul (posición: absoluta; derecha: -150px; arriba: 0;)
/ * submenú * / .dws-menu li ul (posición: absoluta; ancho mínimo: 150px; pantalla: ninguna; )
Y para su apariencia, seleccionamos las listas al pasar el mouse y las mostramos usando 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.
hogar
Productos
ropa
Zapatos
Chaquetas
Pantalones
Electrónica
Cámaras
Ordenadores
Telefonos
Samsung
Flf
manzana
Comida
Instrumentos
Vida. química
Servicios
Servicio 1
Servicio 2
Servicio 3
Noticias
Contactos
A continuación, agreguemos el ingrediente a los pasos finales. Yo uso un generador de CSS, he creado varios Presets, puedes crear el tuyo propio, en mi caso solo copio este código y lo coloco en segundo plano que escribí antes.
Si lo desea, este menú se puede diseñar de acuerdo con el estilo que más le convenga en el sitio, solo necesita generar un color y reemplazarlo en el código. El resultado es un menú horizontal simple y al mismo tiempo agradable, hecho en CSS puro.
Buen día, queridos lectores. Hoy analizaremos el tema “ cómo hacer un menú horizontal usando HTML y CSS". El menú, por regla general, se encuentra en el encabezado del sitio y es una lista de enlaces a las páginas más importantes, también se llama menú principal... Los usuarios harán clic constantemente en estos enlaces. La forma en que los organice y el diseño que le dé al menú afectará el comportamiento del usuario, la conversión, su experiencia general en su sitio y, por supuesto, en.
Código HTML para menú horizontal
Érase una vez el menú principal de un sitio se creaba en imágenes, tablas, flash y posiblemente en algo más, pero hoy en día existe el método más popular y correcto de crear un menú usando etiquetas de "lista".
Un ejemplo del uso de etiquetas html para crear un menú en el siguiente código:
hogar
Servicios
Precios
Contactos
Estilos CSS estándar para menús horizontales
ul (list-style: none; / * eliminar marcadores de lista * / margin: 0; / * eliminar márgenes * / padding-left: 0; / * eliminar márgenes * /) a (text-decoration: none; / * eliminar subrayado link text * /) li (float: left; / * Coloca la lista horizontalmente para implementar el menú * / margin-right: 5px; / * Agrega sangría a los elementos del menú * /)
Obtenemos un menú superior listo para usar en el encabezado, sin estilos especiales y campanas y silbidos, esto se puede llamar el marco de su futuro hermoso menú. Si copia e instala el html y css dados, se verá así.
Un ejemplo del marco (plantilla) de su futuro menú
Todo resultó bastante simple, usted, por supuesto, desea un hermoso menú principal de inmediato, pero sin comprender los conceptos básicos, simplemente no podrá crear un buen menú sin errores en html y css.
También hay varios otros métodos CSS que se utilizan para hacer que los menús sean horizontales además de float: left; por ejemplo display: inline-block; o pantalla: flex; , pero se recomienda utilizar el método descrito anteriormente.
Llenemos nuestra plantilla de menú con diferentes estilos y hagámosla hermosa.
Ejemplos de un hermoso menú horizontal para un sitio web
Ahora daré varios ejemplos listos para usar con un diseño listo para usar de un menú horizontal.
Puede crear todas las "sutilezas" para su sitio usted mismo y no buscar en Internet. La forma más sencilla de hacerlo se basa en uno de los ejemplos siguientes.
Menú azul simple con elementos separados
Estilos CSS para el menú "superior"
A continuación se muestran los estilos de este menú. El HTML sigue siendo el mismo que en el esqueleto del menú.
Ul (list-style: none; / * eliminar los marcadores de la lista * / margin: 0; / * eliminar el relleno * / padding-left: 0; / * eliminar el relleno * / margin-top: 25px; / * sangrar el top * /) a (text-decoration: none; / * eliminar el subrayado del texto del enlace * / background: # 30A8E6; / * agregar un fondo al elemento del menú * / color: #fff; / * cambiar el color de los enlaces * / padding: 10px; / * agregar sangría * / font-family: arial; / * cambiar la fuente * / border-radius: 4px; / * agregar redondeo * / -moz-transición: todos los 0.3s 0.01s facilidad ; / * hacer una transición suave * / -o-transición: todo 0.3s 0.01s facilidad; -webkit-transición: todo 0.3s 0.01s facilidad;) a: hover (background: # 1C85BB; / * agregar efecto de desplazamiento * / ) li (float: left; / * Coloca la lista horizontalmente para implementar el menú * / margin-right: 5px; / * Agrega sangría a los elementos del menú * /)
Menú principal ubicado en una línea de color con fondo rojo
Estilos de menú CSS en la línea de color
ul (list-style: none; / * eliminar los marcadores de la lista * / margin: 0; / * eliminar el relleno * / padding-left: 0; / * eliminar el relleno * / margin-top: 25px; / * sangrar el top * / background: # FF4444; / * agregar un fondo a todo el menú (al reemplazar este parámetro, cambiará el color de todo el menú) * / height: 50px; / * establecer la altura * /) a (texto -decoration: none; / * eliminar el subrayado del texto del enlace * / background: # FF4444; / * agregar un fondo al elemento del menú (al reemplazar este parámetro, cambiará el color de todos los elementos del menú) * / color: #fff; / * cambiar el color de los enlaces * / padding: 0px 15px; / * agregar sangría * / font-family: arial; / * cambiar la fuente * / line-height: 50px; / * alinear el menú verticalmente * / display: block; border-right: 1px solid # F36262; / * agregar un borde a la derecha * / -moz-transición: todos los 0.3s 0.01s facilitan; / * hacer una transición suave * / -o-transición: todos 0.3 s 0.01s facilidad; -webkit-transición: todos los 0.3s 0.01s facilidad;) a: hover (background: # D43737; / * agregar efecto de hover * /) li (float: left; / * Colocar la lista horizontalmente de verdad opciones de menú * /)
Menú desplegable en HTML + CSS
Para la implementación menú desplegable adicional (desplegable) en el sitio para cualquier elemento del menú, necesitamos agregar una lista adicional de elementos al código HTML para cualquier enlace del menú horizontal y cambiar los estilos CSS. En los estilos, aplicaremos un truco simple: cambiar la visualización del menú desplegable colocando el cursor sobre el elemento que necesitamos en el menú superior. Tomemos el elemento "servicios" como ejemplo.
Un ejemplo de creación de un menú desplegable simple
Código HTML desplegable
hogar
Servicios
Servicio 1
Servicio prolongado 2
Servicio 3
Precios
Contactos
Estilos CSS desplegables
ul (list-style: none; / * eliminar los marcadores de la lista * / margin: 0; / * eliminar el relleno * / padding-left: 0; / * eliminar el relleno * / margin-top: 25px; / * sangrar el top * / background: # 819A32; / * agrega un fondo a todo el menú * / height: 50px; / * establece la altura * /) a (text-decoration: none; / * elimina el subrayado del texto del enlace * / background: # 819A32; / * agregar un fondo al elemento del menú * / color: #fff; / * cambiar el color de los enlaces * / padding: 0px 15px; / * agregar sangría * / font-family: arial; / * cambiar la fuente * / line-height: 50px; / * alinea las verticales del menú * / display: block; border-right: 1px solid # 677B27; / * agrega un borde a la derecha * / -moz-transition: all 0.3s 0.01 s facilidad; / * hacer una transición suave * / -o-transición: todos los 0,3 s 0,01 s facilidad; -webkit-transición: todos los 0,3 s 0,01 s facilidad;) a: hover (background: # D43737; / * agregar efecto de desplazamiento * /) li (float: left; / * Coloca la lista horizontalmente para implementar el menú * / posición: relativa; / * establece la posición para el posicionamiento * /) / * Estilos para el menú desplegable oculto * / li> ul (posición: absoluta; superior: 25px; pantalla: ninguna; ) / * Hacer visible la parte oculta * / li: hover> ul (display: block; width: 250px; / * Establecer el ancho del menú desplegable * /) li: hover> ul> li (float: none; / * Eliminar posicionamiento horizontal * /)
Y para comprender exactamente qué servicios y categorías debe tener, le recomiendo que se familiarice con el material :.
Traté de contarte lo más brevemente posible sobre cómo crear un menú horizontal principal, hacer varias plantillas, cómo agregarle estilos simples y hacerlo más bonito, cómo hacer un menú desplegable para tu sitio. Para mayor comodidad, he recopilado todos los menús presentados anteriormente en un archivo html, que puede descargar a continuación. Se parece a la captura de pantalla:
Gracias por su atención.
La buena navegación del sitio es muy importante para los blogueros. Con su ayuda, el visitante encuentra rápidamente la página de blog deseada. Aprecie la claridad del sitio y los motores de búsqueda. En este artículo, aprenderá a crear un menú de Blogger horizontal con iconos emergentes. Menú con botones de iconos emergentes creados con CSS. Para ver el menú, haga clic en el botón de abajo:
Cómo insertar un menú CSS horizontal con iconos en Blogger
Vaya a la pestaña "Plantilla", coloque el cursor en el editor (en cualquier lugar),
Presione Ctrl + F para buscar el código y encontrar el fragmento de código ]]>
Inserte el siguiente código antes de este código: ..
/ * El código CSS para el menú comienza aquí bloggertrix.com * / # btrix-nav (margin: 100px auto; list-style: none; width: 632px; height: 87px; overflow-y: hidden;) # btrix-nav li (flotador: izquierda;) # btrix-nav li a (display: block; color: white; width: 120px; height: 61px; margin-top: 24px; text-decoration: none; text-align: center; border-top: 1px solid #bbb; borde inferior: 1px sólido # 555;) # btrix-nav li a span.aname (fuente: negrita 17px / 61px "Arial"; color: #fff; transformación de texto: mayúsculas; cursor: puntero; posición: relativa; arriba: 0; transición: arriba .5s facilidad; sombra de texto: 1px 1px 1px rgba (0, 0, 0, 0.5);) # btrix-nav li a img (posición: relativa; arriba: 0; transición: arriba .5s facilidad;) # btrix-nav li a: hover (cursor: pointer;) # btrix-nav li a: hover img (arriba: -85px;) # btrix-nav li a: hover .aname (arriba: 85px;) # btrix-nav li: nth-child (1) a (fondo: # 3eb006; radio del borde: 5px 0 0 5px; borde-izquierdo: 1px sólido #bbb;) # btrix-nav li: nth-child (2) a (fondo: # 9bc704;) # btrix-nav li: nth-child (3) a (fondo: # 0dc3ff;) # btrix-nav li: nth-child (4) a (fondo: # 51a2ec;) # btrix-nav li: nth-child (5) a (fondo: # 6e3cab; radio del borde: 0 5px 5px 0; borde-derecho: 1px sólido # 555;)
Ahora ve a la pestaña "Diseño",
Agregue un nuevo elemento HTML / JavaScript y agregue el código:
Realice los cambios necesarios en el código que agregó al gadget HTML / JavaScript:
Cambie el icono # por un enlace a la página de blog deseada (por ejemplo, la página de etiquetas, la página de contacto, la página de inicio del blog, etc.)
enlace a la imagen resaltada en naranja, reemplácelo con un enlace directo a la imagen del icono del elemento correspondiente.
Elemento resaltado en azul, este es el título de la página del menú CSS.
¿Mover el elemento HTML? JavaScript en el lugar correcto en la pestaña "Diseño" del blog.
Para su menú, puede usar iconos, logotipos y otras imágenes png con fondo transparente. Para encontrar las imágenes necesarias, es mejor utilizar la búsqueda por iconos. Por ejemplo, iconsearch.ru
Hay muchas soluciones listas para crear dichos paneles usando jQuery, complementos y módulos separados para varios sistemas de administración de contenido. Todo esto está muy bien, pero ¿es posible hacerlo con CSS solo para implementar paneles deslizantes laterales? ¡Seguro! Pero tenga cuidado))), teniendo en cuenta que no todos los navegadores admiten las propiedades modernas de CSS3 igualmente bien.
No hace mucho, di una solución y un ejemplo de trabajo. Uno de los primeros comentarios fue: "vamos a moverlo hacia un lado ...". ¿Por qué no? Vamos)).
Hoy les diré y les mostraré con un ejemplo cómo con la ayuda de la "magia de CSS" puede zababakha, bastante funcional, menú, haciendo clic. Para empezar, de acuerdo con la tradición establecida, miramos un ejemplo vivo del trabajo del panel, luego, junto con quienes lo necesitan, consideraremos toda la alineación, qué, cómo y por qué. Anticipándome a las preguntas, preparé opciones para la ubicación del menú, tanto a la izquierda como a la derecha:
Marcado HTML
Comencemos con el interruptor del panel, para el cual usamos la casilla de verificación estándar ():
Coloque la casilla de verificación en la parte superior del documento, preferiblemente justo después de la etiqueta.
... Registramos el atributo oculto, indicando directamente el estado "oculto" de este elemento, y también asignamos un identificador único, id = "nav-toggle", por ejemplo, para enlazar con el atributo for de la etiqueta
La descarga comenzará ahora ... No olvides compartir material en las redes sociales con tu colegas
Entrada
https://2.bp.blogspot.com/-vcR6lUGsroY/Ug5ATZk8oZI/AAAAAAAAA00/XENkFMaBgv0/s1600/btrix-home.png" />