con una ID de "fundido" que será nuestra cubierta negra que oscurece el contenido cuando se hace clic en el icono del menú.
Finalmente llamamos a jQuery de Google y nuestro propio archivo de script, que es donde vamos a trabajar un poco. Pero primero veamos los estilos.
Estilo con CSS
Así que no revisaremos todos los estilos CSS (si lo desea, puede inspeccionar o 'ver fuente' en la demostración) ya que en su mayor parte se utilizan para el diseño general de la página, que no es el objetivo de este articulo Lo dividiremos y miraremos algunos trozos de código que son importantes para el efecto. Entonces, antes que nada:
html.no-js #fallback-nav { display: block; }html.no-js .fade { display: none; }html.no-js #navicon { display: none; }html.js #fallback-nav { display: none; }
Lanzaremos cosas asegurándonos de que si el navegador del usuario no tiene JavaScript disponible (ese es el nombre de clase en el elemento HTML que vimos anteriormente usando Modernizr) entonces mostraremos el # fallback-nav en el encabezado, y Ocultaremos el DIV de #fade así como el ícono de navegación. Esta es nuestra solución alternativa, por lo que el menú alternativo debe diseñarse de forma más tradicional. También estamos ocultando esta solución si JavaScript está disponible, como puede ver en la última línea.
#navicon {float: right;font-size: 2em;text-decoration: none;position: relative;z-index: 9; }#navicon.open { color: white; }#navicon.open:hover { color: #e6e6e6; }#fade {position: fixed;top: 0;right: 0;bottom: 0;left: 0;background: #000;opacity: 0.5; }
Así que en esta sección estamos diseñando nuestro ícono de menú en el encabezado, es bastante simple, simplemente dándole una posición relativa y un alto índice z (que será útil más adelante cuando el resto del contenido se desvanezca, permanecerá activo parte superior). También estamos cambiando el color a blanco cuando tiene una clase de "abrir" que agregaremos y quitaremos usando jQuery. También podemos ver que el div individual con una identificación de "fade" se extiende para llenar toda la pantalla y se llena con un negro sólido con una transparencia del 50%. Si el usuario no tiene JavaScript, este filtro negro estará oculto, de lo contrario lo ocultaremos con jQuery. Ahora veamos el menú en sí:
#main-nav {position: fixed;height: 100%;top: 0;right: -250px;background: #222;max-width: 250px;width: 100%;z-index: 5;text-align: center;display: flex;flex-direction: column; }#main-nav a {flex: 1;color: white;border-top: 1px solid #555;text-decoration: none;display: flex;flex-direction: column;justify-content: center; }#main-nav a:hover, #main-nav a.current { background: #3c3c3c; }
Por último, pero no menos importante, el menú principal. Debo añadir, en primer lugar, que este es el código simplificado que necesitaría bastantes prefijos de proveedor antes de ser compatible con varios navegadores. Para lograr esto, recomiendo usar una herramienta increíble como Autoprefixer para agregar todos los prefijos correctos.
Entonces, dicho esto, veamos lo que implica: primero, tiene un posicionamiento fijo en la parte superior de la página y negativo de 250 píxeles a la derecha. Esto significa que está ahí, pero solo "fuera de la pantalla" (ya que tiene un ancho máximo de 250 píxeles). La altura también es del 100%, por lo que llena toda la ventana de arriba a abajo. El menú también necesita un índice z entre 0 y 9 (por encima del filtro negro). Entonces, aquí es cuando sucede la magia, tiene una pantalla: flexión; propiedad, así como otra propiedad vinculada de 'flex-direction' (que hemos establecido en "columna" aquí en lugar de su "fila" predeterminada, lo que significa que los elementos de elementos flexibles -los enlaces en el menú- ocuparán toda la altura de su padre en partes iguales).
Así que todo esto se ha dirigido al portador del menú # main-nav, luego, al diseñar los enlaces, les damos un valor flexible de 1. Esto es lo que hace que los enlaces llenen toda la altura por igual. Luego, a estos enlaces también se les otorga un valor de visualización de 'flex', lo que significa que cualquier elemento dentro de los enlaces se verá afectado. Nos aseguramos de que la dirección de flexión siga siendo 'columna' y luego agregamos una propiedad de "justify-content: center;". Esto hace que el texto mismo dentro de los enlaces también se centre verticalmente (es por eso que hay divs dentro del ![]()
etiquetas del # main-nav, que no es exactamente semántica, pero es una manera muy rápida y fácil de centrar verticalmente los elementos).
Ahora que aún no podemos ver nada de lo que acabamos de hacer, ahora necesitamos agregar nuestra funcionalidad con nuestro propio archivo scripts.js que llamamos anteriormente.
Agregar la funcionalidad con jQuery
La secuencia de comandos para este efecto es muy pequeña y simple, pero lo pondré aquí primero y luego explicaré lo que está sucediendo:
$(document).ready(function() {$('#fade').hide();$('#navicon').click(function() {if($('#navicon').hasClass('closed')) {$('body').animate({left: "-250px"} , 400) .css ({"overflow": "hidden"}); $ ('# main-nav'). Animate ({right: "0"}, 400); $ (this) .removeClass ('closed' ) .addClass ('open'). html ('x'); $ ('# fade'). fadeIn (); } else if ($ ('# navicon'). hasClass ('abierto')) {$('body').animate({left: "0"} , 400) .css ({"overflow": "scroll"}); $ ('# main-nav'). Animate ({derecha: "-250px"}, 400); $ (this) .removeClass ('open ') .addClass (' closed '). html (' ☰ '); $ (' # fade '). fadeOut (); }});});
Entonces, antes que nada, escondemos el filtro negro. Luego, todo lo que hacemos estará contenido dentro de una función asociada a un evento de clic que está vinculado al enlace del icono del menú. Cuando se hace clic en eso, tenemos dos casos o situaciones diferentes; uno es cuando el menú ya está oculto (como el estado predeterminado) o uno cuando se muestra el menú. Entonces el enlace del ícono de menú tiene un nombre de clase de cerrado que agregamos, y también diseñamos para abierto. Nuestra primera declaración "si" es que si el enlace está cerrado (por lo tanto, por defecto). Si ese es el caso, entonces el conjunto
el elemento está animado 250px a la izquierda y detiene el desplazamiento de la página. El div # main-nav también está siendo animado en su lugar, estamos cambiando su valor correcto de -250px a 0. Luego estamos eliminando la clase de 'cerrado' del enlace y agregando uno de 'abierto' así como también cambiando el html del carácter especial de tres líneas a una "x". Finalmente nos estamos desvaneciendo en nuestro filtro negro para oscurecer el resto del contenido. ¡Y eso es! Eso nos da el estado abierto del menú.
Ahora la instrucción "else if" se dirige a la clase abierta en el enlace del menú. Cuando lo haga, haremos el proceso inverso a todo lo que hicimos antes, moviendo el cuerpo de nuevo a su posición, y moviendo el menú fuera de la pantalla otra vez. Eliminando la clase de 'abrir' del ícono de menú, agregando 'cerrado' y cambiando el contenido al ícono, así como también desvaneciendo nuestro #fade div. Si todo va según lo planeado, así es como debería ser la funcionalidad:
Conclusión
¡Así que ahí lo tenemos! Esa es una forma de hacer este efecto genial que estamos viendo cada vez más con el estilo del diseño web moderno, especialmente en diseños móviles. Este efecto es una solución agradable y simple que no requiere ningún complemento y puede personalizarse completamente según las necesidades de cada proyecto. También ha sido una oportunidad de usar flexbox así como algunas otras herramientas útiles. ¡Déjame saber en los comentarios si hay algo que hubieras hecho de manera diferente o solo lo que pensabas!
Imagen / miniatura destacada, imagen de puerta corredera a través de Shutterstock.
