Herrada hamburguesa del menú en CSS. Menú de "hamburguesa" de creación rápida en jQuery

De Vitaly Rubtsova y no pudo resistir a implementarlo.

En esta lección, le diré cómo hacer esto con un CSS, sin ningún uso de JavaScript. Entonces, veremos algunos trucos de CSS (y SCSS), lo que nos permitirá lograr casi la misma animación suave que este GIF animado.

Aquí hay un ejemplo de lo que haremos:

Calificación

Comencemos con la estructura de HTML, que usaremos. Ver comentarios para una mejor comprensión.

Estilos iniciales SCSS

Ahora agregue algunos estilos básicos para obtener la apariencia deseada. El código es bastante simple.

/ * Estilos básicos * / * (Tamaño de la caja: Caja de borde;) HTML, Cuerpo (Margen: 0;) Cuerpo (Fuente-Familia: Sans-Serif; Fondo-color: # F6C390;) A (Decoración de texto: Ninguno;) .Container (Posición: Relativo; Margen: 35px Auto 0; Ancho: 300px; Altura: 534px; Color de fondo: # 533557; Desbordamiento: Oculto;)

Interruptor de trabajo

Antes de comenzar a crear el resto de la interfaz, agregue la operación del interruptor para moverse fácilmente de un estado a otro.

HTML que necesitamos ya está en su lugar. Y el estilo que hace que funcione es aproximadamente ese:

// Ocultar chekbox #toggle (Pantalla: Ninguna;) // Estilos para el estado "Abrir" cuando Chekbox está seleccionado #Toggle: Checked (// Cualquier artículo cuyo estilo debe cambiar cuando se está abriendo el menú, va aquí con el selector ~ // Estilos para abrir el menú de navegación, por ejemplo, & ~ .Nav ())

Creando un estado cerrado

Para hacer un estado cerrado, necesitamos convertir los elementos del menú en la línea para obtener el icono de hamburguesa. Hay varias formas de obtener tal transformación. Decidimos hacer esto de la siguiente manera:

Y aquí está el código que se da cuenta.

$ Transición-Duración: 0.5s; // Visualización de elementos de navegación en forma de líneas que conforman el icono de hamburguesa .Nav-Artículo (Posición: Relativo; Pantalla: Bloqueo en línea; Flotador: Izquierda; Claro: Ambos; Color: Transparente; Fuentes: 14px; Letra-Spacion: - 6.2px; Altura: 7px; Altura de la línea: 7px; Transformación de texto: mayúscula; Espacio blanco: Nowrap; Transforma: CANCEY (0.2); Transición: $ Transición-Duración, Opacidad 1S; // Agregar Ancho para la primera línea y: NTH-hijo (1) (espacio-espacio: -8px;) // Agregar un ancho para la segunda línea &: Nth-Child (2) (Letra-Spacion: -7px;) // Configuraciones para los elementos que comienzan desde el cuarto y: Nth-Child (N + 4) (Letra-Spacion: -8px; Margin-Top: -7px; Opacidad: 0;) // Obtener líneas para Hamburger &: Antes: Absolute; Contenido : "" Top: 50%; izquierda: 0; Ancho: 100%; Altura: 2px; Color de fondo: # EC7263; Transformado: traducido (-50%) Caso (5); Transición: $ Transition-Duración;) )

Tenga en cuenta que aquí hemos colocado solo los estilos principales para los elementos de navegación que son los más importantes. Puedes encontrar un código completo en GitHub.

Creando un menú abierto

Para crear un menú abierto, necesitamos restaurar los elementos de navegación de líneas a los enlaces de texto normales, así como hacer una serie de cambios menores. Veamos cómo hacerlo:

$ Transición-Duración: 0.5s; #Toggle: Comprobado (// Open & ~ .Nav (// Restaurar puntos de navegación desde las líneas en el icono del menú .Nav-Artículo (Color: # EC7263; Espacio de letras: 0; Altura: 40px; Altura de la línea: 40px; margen-top: 0; opacidad: 1; transformada: CANCIALIA (1); Transición: $ Transition-Duración, Opacidad 0.1s; // Ocultar líneas y: Antes (Opacidad: 0;)))))))

Magia en cosas pequeñas

Si nos fijamos en el GIF, veremos que todos los elementos del menú se mueven al mismo tiempo, pero en un orden de verificación. ¡Podemos hacerlo en CSS! En principio, debemos seleccionar cada elemento (usando: Nth-Child) y establezca un aumento gradual en el valor del retraso en la transición. Este es definitivamente un trabajo recurrente. ¿Y si tenemos más artículos? No se preocupe, podemos hacerlo todo mejor, usando una pequeña magia SCSS:

$ Artículos: 4; $ Transition-Delay: 0.05s; .nav-item (// Establezca el retraso para los elementos de navegación al cerrar @for $ i de 1 a $ ítems (&: nth-niño (# ($ i)) ($ demora: ($ I - 1) * $ transición Retraso; retardo de transición: $ demora; &: antes: $ demora;))))

Tenga en cuenta que con la ayuda de este Código obtendremos el comportamiento paso a paso deseado para la animación de cierre. Necesitamos calcular $ demora, un poco diferente a la animación de apertura para obtener una transición de paso de vuelta. Como esto:

$ Demora: ($ artículos - $ i) * $ Transition-Deatch;

Producción

¡Así que terminamos con nuestro magnífico menú! También incluimos algunos elementos ficticios como en un GIF animado, y usted puede ver.

Por lo tanto, hemos creado un menú simple y funcional solo en CSS. Sin embargo, si no desea utilizar el sistema de conmutación CSS, puede reemplazarse perfectamente con varias líneas de JavaScript sin mucho esfuerzo.

¡Esperamos que esta lección sea como tú y lo encontraste útil!

Hemos hecho solo un diseño.

5. Descarga la biblioteca jquery-3.3.1.min.js

Conectarse a nuestro Html Documento antes de la etiqueta de cierre. cuerpo. Dos archivos, uno de ellos todavía está vacío.

6. Crea un evento en JS.

Escribimos el siguiente código al archivo. script.js.

$ (Función () (
$ (". Menuburger"). En ("clic", función () () (
$ (". Menú"). SlideToggle (200, Función () (
Si ($ (esto) .css ("pantalla") \u003d\u003d\u003d "ninguno") (
$ (esto) .RemovEattr ("estilo");
}
});
});
});

No nos desarmaremos en detalle. Js. Código, limite solo a los comentarios compartidos. Puedo aconsejar, para aquellos que están interesados \u200b\u200ben programar en Js.

Esta línea $ (". Menuburger"). En ("clic", función () () ( rastrea un evento en el clic en el elemento con la clase .Menuburger.

$ (". Menú"). SlideToggle (200, Función () ( Aquí la función se aplica al menú. slidetoggle ()que se desarrolla alternativamente o pliegues, elementos seleccionados en la página de 200 milisegundos.

$ (esto) .RemovEattr ("estilo"); - elimina en línea estilos pantalla: Ninguno;

Ahora haz clic menú de hamburguesa El despliegue y los pliegues, pero hay un problema, cuando enciende el menú, cambia el contenido principal del sitio y correctamente, si está en la parte superior del contenido. Al mismo tiempo, sufre la velocidad de la carga de la página, especialmente en el Internet móvil.

6. Implementación del menú en la parte superior del contenido.

Este problema se resuelve posicionando el menú.

Principalmente CSS. Agregar código

Menú (
Posición: Relativo;
}

En una solicitud de medios: .Menu (
Fondo: #eee;
Posición: Absoluto;
}

Después de eso, menú de hamburguesa Se desarrollará sobre el contenido principal. Así debería ser.

Menú de hamburguesa en CSS

1. Desconecte y elimine todos los scripts.

2. Inserte B. Html Archivo entre etiquetas div y ul Codigo bloqueado

3. Reemplace la etiqueta div Clase C .Menuburger sobre el etiqueta

4. atar entrada de ID. Con atributo para etiqueta mediante #Menucss.

Como resultado, al hacer clic en el icono menú de hamburguesaAparece una marca de verificación en Chekbox.

5. Agregar una pseudo-clase en la solicitud de medios comprobado

#Menucss: comprobado (
Pantalla: Ninguno;
}

Esto significa que al hacer clic en el icono, la marca de verificación se coloca en la casilla de verificación, pero en la pantalla está oculta, solo el icono es visible. La idea es que si la casilla de verificación no está marcada, el menú está cerrado y, si está marcado con una marca de verificación, se implementa el menú. Evento con abrir y cerrar el menú, suspendido en qué estado es una casilla de verificación.

6. cuadrado aporte en CSS.

#Menucss (
Pantalla: Ninguno;
}

7. Cambie el código en el párrafo 5, vea arriba en el artículo en el siguiente

#Menucss: chequeado + .menu (
Bloqueo de pantalla;
}

Si el enlace entre etiqueta y entrada #menucss. Notado por marca de verificación (Comprobado)El menú se implementa. Eso es toda la magia menú de hamburguesa Trabaja en puro CSS. Y si le agregas una animación suave, entonces no hay diferencia con el menú en Js.No te sentirás.

Intenta reducir el navegador y verás claramente cómo funciona. menú de hamburguesa en CSS

Producción

Ambas opciones de operación. Menú en Js., digamos que es correcto, en términos de usar el código. Menú en CSS. - Esta es la "muleta", una especie de "manifestación del ingenio", adecuado para aquellos que no quieren entender. Js. Y lo va a aplicar solo en sus proyectos. Para que los sitios soliciten "muletas", recomiendo encarecidamente hacer un diseño, afilado para su uso. Js., otros especialistas.

Probablemente ya haya estado cansado de leer artículos y escuchar constantemente las diferentes discusiones sobre las tres líneas cortas del menú de hamburguesas. ¿Es una mala recepción en el diseño de la interfaz? O no está mal? Este post no es así: no juzgará, bueno o malo este menú. La conclusión es que no lo considero la mejor solución de diseño, de una forma u otra. Pero el menú de hamburguesa tiene sus fortalezas, especialmente cuando se usa en el diseño móvil, en condiciones de espacio limitado. Entonces, ¿qué podemos hacer? Simplemente tome un menú de hamburguesa que sea lo que es, a pesar de todas las fallas, y vivir en? Muchos sitios y aplicaciones parecen aceptar esto. Y creo que es capaz de mejorar.

Y luego hubo dos cosas que me hicieron cambiar de opinión. Primero, me encontré. Este es un artículo que realmente ayuda a comprender los efectos de usar un menú de hamburguesa. En particular, los sitios con un menú de este tipo toleran una disminución grave en la participación de los usuarios. Una visión general de tales estadísticas solo comenzó a cambiar mi opinión.

El siguiente incidente ocurrió cuando vi a un colega tratando de usar una nueva aplicación web en la que era un menú de ese tipo. Fue un desarrollador que está muy familiarizado con la interfaz del menú de hamburguesas, pero cuando se convirtió en el uso de la solicitud de sus necesidades, le preguntó en voz alta en voz alta: "¿Cómo puedo llegar allí?". Considere, esta es una de las personas más famosas que conozco, y ni siquiera pensó en tocar el icono del menú de hamburguesas. Si alguien tiene problemas tan inteligentes con la navegación, ¿qué habla sobre un usuario típico? Mi opinión finalmente adquirió una sólida justificación.

Buscar soluciones

Todo es suficiente sobre las causas de mi incredulidad debido a un menú de hamburguesa, es hora de hablar sobre la decisión. Para empezar, estudié las ventajas especiales de usar un menú de hamburguesa:

• Escalabilidad: Esta es probablemente la principal ventaja y la razón principal por la que tantos sitios y aplicaciones lo eligen. Puede poner muchos artículos de navegación para un pequeño icono.
• Precisión: Va en un par de escalabilidad, pero aún así, no lo mismo. Los diseñadores quieren crear diseños lacónicos y limpios, dejando suficiente espacio para el contenido principal. El uso de un menú de hamburguesa da una sensación de simplicidad visual, atractiva para cualquier diseñador.

Y si crea una alternativa a un menú de hamburguesa, de alguna manera debe resolver problemas relacionados con él:

• Constabilidad: Debería ser posible encontrar fácilmente elementos de navegación, especialmente aquellos que usan el producto por primera vez.
• Intervención: La interfaz debe proporcionar solicitudes y Fidbeck, explicando que el usuario puede hacer con el producto, y cuando sea apropiado usar ciertas oportunidades.

Complejo: Móvil

Decidí comenzar con el problema más difícil y verificar si mi decisión era adecuada para diseños móviles. Después de pensar en una masa de ideas, llegué a la conclusión de que el menú del Panel de la pestaña de iOS es una de las mejores soluciones para las interfaces móviles. La masa de personas intentó hacer que el panel de la pestaña se desplazó (para que más de cinco opciones) o agregue "más" a la navegación, algo así como una pelusa, que tiene una habitación adicional que rápidamente llenará la basura. Además, ambas opciones aún no cumplen con el requisito principal, una claridad, la visibilidad de todas las posibilidades está ausente. Entonces, ¿qué se puede crear con el menú de la pestaña para solucionarlo?

Mi decisión es combinar un panel de hamburguesas y pestañas a un solo enfoque. El resultado es el panel TAB, que abre el conjunto de opciones para cada elemento del menú.

Creé una solicitud de prueba para evaluar la productividad del equipo para ilustrar su enfoque en los negocios. Usando este método, el usuario puede ver claramente las funciones básicas y los métodos de uso del producto. Y en lugar de quedarse dormido con una lista completa de elementos del menú oculta detrás del ícono de la hamburguesa, el usuario se muestra varias opciones que pertenecen a la pestaña a la que hizo clic. Por lo tanto, la navegación es más fácil de entender y digerir, todo lo que necesita está siempre a la mano, le permite al usuario ver la jerarquía de la aplicación.

Otra ventaja de tal diseño es la capacidad de usar notificaciones contextuales. En el caso de un menú de hamburguesa, solo tiene un solo lugar para mostrar dichas notificaciones. Si se adhiere al diseño con el panel TAB, puede producir consejos para el usuario en cualquiera de los elementos del menú seleccionados.

Por supuesto, la mayor victoria de este enfoque es la escalabilidad. Sí, todavía estás limitado a cinco categorías, pero es bueno. Honestamente, creo que cualquier sitio puede acomodar sus opciones en cinco categorías si el diseñador con la mente piensa en la navegación. Después de todo, en cada una de estas categorías, puede haber cinco o seis subpárrafos.
Resulta 30 posibles opciones de navegación sin la sensación de sobrecarga para el usuario y sin la ocupación de todo el espacio de la pantalla.

Aplicación a tabletas

La integración de dicho panel de pestañas en tabletas, como lo es, parecía extraño. Las tabletas son mucho más anchas, y el uso de la misma UI, en cuanto a dispositivos móviles, también se veía ridículo como adolescente en la ropa, de la cual había crecido durante mucho tiempo. Así que fui a otra manera. En lugar de colocar el panel de la pestaña en la parte inferior, lo coloqué en el lado. Así que resultó más conveniente en términos de usar el espacio de pantalla y se veía muy natural. Además, muchos usuarios sostienen la tableta a la cara, por lo que esto es solo un área objetivo para tocar los dedos.

¿Qué pasa con el escritorio?

Prepárate ... Menú retráctil. Todo es cierto: intente este enfoque a la interfaz de escritorio y se encontrará con una realidad indiscutible: esta opción no es en absoluto. El menú retráctil se usó durante años, y casi cualquier usuario (incluso a su madre) sabe cómo funciona. En esto, hay un encanto de este enfoque, nada nuevo.

La divulgación completa

No sé cómo llamar a esto. Depósito Raptor? O taburero (pestaña "pestaña" + hamburguesa)? Además, no sé si alguien creó una solución similar antes. Dada la simplicidad de dicho menú, no puedo permitir la idea de que fue el primero. Sé que varias aplicaciones utilizan menús retráctiles en algunos botones de una pestaña (por ejemplo, tweetbot), pero generalmente se implementan como acceso rápido a las funciones para usuarios avanzados, y no para construir la jerarquía de navegación. Si tiene un ejemplo, hágamelo saber en los comentarios.
No importa si dicho menú es nuevo o largo inventado. Es importante si es la mejor solución más creativa para la navegación en comparación con el menú de hamburguesa. Deja de hablar contigo mismo "Hay un menú de este tipo en este sitio genial, significa que debería ser el mejor" o "todo el mundo, eso significa que es correcto". El diseño merece un enfoque mejor, más atento.
Actualizaciones
Colleen Ebergardt señaló en Twitter que la misma UI se implementa en Windows Phone. Soy el propio usuario de Windows, y él tiene razón. Aunque este tipo de interacción se usa en Windows Phone solo para la opción "Más" en el panel TAB.

James Peich llevó otro ejemplo en Twitter. Mire el AhtabBarController creado por Arthur Chemmer.

Sencillo, funcional, intuitivo y memorable, como cualquier señal de tráfico, el icono de Hamburger se ha convertido en una verdadera tendencia el año pasado y un elemento integral de cualquier sitio web moderno y diseño de aplicaciones móviles.

Este simple icono simula la apariencia de la lista de menús, es ideal para dispositivos con pantallas pequeñas y sitios web, donde el lado visual es importante, y la navegación debe pararse a un lado. Esta es una solución muy eficiente y viable que cumple con los requisitos del mundo moderno.

Al igual que cualquier otro elemento de la interfaz, un icono de hamburguesa puede tener algunas desviaciones de la opción original en función de las necesidades de cada proyecto individual.

Dependiendo del proyecto y el tema, el icono de hamburguesa puede tomar varias formas que complementen el diseño o pueden convertirse en su característica independiente y distintiva.

La colección de hoy incluye 20 variaciones diferentes de los iconos de hamburguesa.

El icono de hamburguesa del diseñador Dave Games inmediatamente da mucha energía cálida. El estilo de dibujos animados agrega la alegre, y crea solo las emociones más positivas. Puede usar dicho icono en la mayoría de las interfaces ilustradas modernas.

Y Mat Walker desarrolló este icono con olas del océano. Excelentemente se sentirá en varios proyectos dedicados al mar. Azul como el color primario y el marco alrededor de este icono exclusivo.

La implementación limpia, brillante e ingeniosa permitirá que este diseño funcione como un icono de menú en los sitios culinarios. En este caso, la interfaz recibirá un resaltado de arte agradable.

El diseñador ofrece 10 versiones interesantes de los iconos de hamburguesa, que se hacen con un alma. La serie cubre varios tipos de hamburguesas: uno con queso, el otro con tocino, el tercero con Turquía y muchos otros. Si tiene un sitio web o una aplicación móvil dedicada al restaurante de comida rápida, ciertamente serán útiles. Son tan visualmente interesantes que puedan encontrar un lugar en casi cualquier tema.

Y este proyecto representa una hamburguesa realista en el vector. El botón de cierre se realiza en forma de una papa frita que toma la forma "X", con o sin salsa. Esta es una solución creativa que puede agregar exótica en el diseño de la página.

El sitio web oficial de Star Wars incluye un icono de hamburguesa interesante, que gira. Cada línea se divide en dos partes para obtener un vector de reflejo de espadas láser ligeras. La solución fortalece la impresión general del sitio y fortalece la marca.

El menú de hamburguesa de Peter Tauri es una versión perfectamente ilustrada del icono. La característica clave de esta placa es elegir los colores que imitan los chuletas de la carne cortada y la carne.

La serie tiene varias versiones de hamburguesas que se implementan utilizando estilo de línea. Aquí encontrará una doble hamburguesa, una hamburguesa con queso y ensalada, un sándwich al aire libre y otros. Encuentre la solución perfecta para su interfaz plana limpia para agregar una picante y "gusto".

El artista demuestra tres versiones divertidas del botón: hamburguesa clásica, hamburguesa con queso y hot dog. La base de cada una o dos colores, lo que lo hace adecuado para varias interfaces pequeñas. Aquí el color crea la apariencia correcta del sándwich.

El artista ofrece una pequeña animación que incluye solo un icono de menú y varias transiciones suaves que acompañan la conversión al "X" habitual (botón de cierre). Hay efectos especiales que surgen al flotar ratón o presionando.

A diferencia de la mayoría de los ejemplos anteriores, esta muestra demuestra manipulaciones hábiles con peso, no color. Las líneas superiores e inferiores de los más audálicas que el promedio, y crean la vista correcta de la "hamburguesa". El artista se enfrentó con éxito con la tarea.

La animación del menú del ícono Ninja de Andrew Kowardakova difiere de la mayoría de los botones-hamburguesas, y ofrece una solución interesante y sobresaliente, con un suboxt misterioso y atractivo. Aquí cada línea es un ninja en vector.

Y este icono es una ilustración de una hamburguesa con ensalada y queso. Esto puede agregar un resaltado a cualquier interfaz aburrida. Excelente solución para el sitio del restaurante o cafetería.

Este es un artículo donde puede encontrar argumentos interesantes sobre el icono de menú de moda. Está marcado con una imagen que muestra las tres opciones del botón de hamburguesa. La primera es una ilustración plana de primera clase, el segundo es el icono pintado de tres líneas, y la tercera es la versión monocromática de la segunda muestra es la opción más popular entre los diseñadores.

GIF muestra transiciones suaves entre el estado inicial de este icono minimalista y elegante, y su estado final. Dado que la animación comienza desde la línea de fondo, es más corta que otras.

El menú de hamburguesa de Liam Spratlin parece un conjunto de marcadores escolares para libros. Esta implementación es audaz y algo ástima. Sin embargo, este icono es inmediatamente notable, puede ser difícil encontrar un ambiente adecuado para ello.

Hasta ahora, hemos considerado los iconos por separado, pero funcionan bien con las palabras, especialmente cuando esta palabra "Menú". Aunque puede parecer innecesario, juntos se ven exquisitos. Las líneas ultra delgadas de 1px de ancho, que se utilizan en este caso, se combinan como parte del rompecabezas.

El proyecto demuestra que el icono de hamburguesa puede parecer más brillante y atractivo cuando está encarcelado. Esta es una excelente opción para dispositivos pequeños, donde un icono de este tipo será conveniente para la navegación sensorial.

El diseñador muestra un icono simple y suave de tres líneas, que se somete a varios metamorfosis, girando en una cruz o flecha. La animación incluye varias soluciones que pueden ser útiles para cualquier proyecto.

Resultados

A primera vista, puede parecer que tales nítulos como el icono del menú no deben prestar mucha atención. Pero si muestra un poco de fantasía, puede convertirlo en un tipo de punto culminante de su interfaz. Especialmente si los desarrolladores comienzan a jugar con su significado, y usan técnicas artísticas para que sea más no convencional y atrae la atención.