Share
En este tutorial, creará un menú de navegación lateral expandible con JavaScript y CSS. El producto final aparecerá como se muestra a continuación:
Para comenzar, agreguemos un poco de marca para nuestro menú lateral:
× Acerca de las características Contáctenos
Aquí puedes ver que creamos un menú lateral div con la clase. sidenav. A continuación, agregamos la barra de navegación superior real a través de y estamos usando un SVG para nuestro ícono de menú lateral.
los al hacer clic El atributo del icono y el botón de cierre activarán algunos JavaScript, que agregaremos a continuación..
Recuerde poner todo el contenido de su sitio web dentro de la div Contenedor para que se deslice hacia la derecha..
A continuación, vamos a agregar el JavaScript para hacer la OpenNav y cerrarNav funciones.
Finalmente, tendremos que diseñar nuestra página con algunos CSS para el menú lateral y nuestros enlaces:
/ * El menú de navegación lateral * / .sidenav altura: 100%; / * 100% de altura completa * / ancho: 0; / * 0 ancho - cambiar esto con JavaScript * / posición: fijo; / * Permanecer en el lugar * / z-index: 1; / * Mantente arriba * / arriba: 0; izquierda: 0; color de fondo: # 111; / * Negro * / overflow-x: oculto; / * Desactivar desplazamiento horizontal * / padding-top: 60px; / * Coloque el contenido 60px desde arriba * / transición: 0.5s; / * Efecto de transición de 0,5 segundos para deslizarse en el sidenav * / / * El menú de navegación enlaza * / .sidenav a padding: 8px 8px 8px 32px; texto-decoración: ninguno; tamaño de fuente: 25px; color: # 818181; bloqueo de pantalla; transición: 0.3s / * Cuando pasas el mouse sobre los enlaces de navegación, cambia su color * / .sidenav a: hover, .offcanvas a: focus color: # f1f1f1; / * Coloque y estilice el botón de cierre (esquina superior derecha) * / .sidenav .closebtn posición: absoluta; arriba: 0; derecha: 25px; tamaño de fuente: 36px; margen izquierdo: 50px; / * Estilo de contenido de la página: utilícelo si desea empujar el contenido de la página hacia la derecha al abrir la navegación lateral * / #main transition: margin-left .5s; relleno: 20px; desbordamiento: oculto; ancho: 100%; cuerpo overflow-x: oculto; / * Agrega un color de fondo negro a la navegación superior * / .topnav background-color: # 333; desbordamiento: oculto; / * Estilo de los enlaces dentro de la barra de navegación * / .topnav a float: left; bloqueo de pantalla; color: # f2f2f2; text-align: center; relleno: 14px 16px; texto-decoración: ninguno; tamaño de fuente: 17px; / * Cambia el color de los enlaces en hover * / .topnav a: hover background-color: #ddd; de color negro; / * Agrega un color al enlace activo / actual * / .topnav a.active background-color: # 4CAF50; color blanco; / * En pantallas más pequeñas, donde la altura es menor que 450 px, cambia el estilo del sidenav (menos relleno y un tamaño de fuente más pequeño) * / @media screen y (max-height: 450px) .sidenav padding-top: 15px; .sidenav a font-size: 18px; a svg transición: toda la facilidad de .5s; &: hover #transform: rotate (180deg); #ico mostrar: ninguno; .menu background: # 000; pantalla: ninguna; relleno: 5px; ancho: 320px; @include radio-borde (5px); #transición: toda la facilidad de 0.5s; a display: block; color: #fff; text-align: center; relleno: 10px 2px; margen: 3px 0; texto-decoración: ninguno; fondo: # 444; &: nth-child (1) margin-top: 0; @include radio-borde (3px 3px 0 0); &: nth-child (5) margin-bottom: 0; @include radio-borde (0 0 3px 3px); &: hover background: # 555;
Nota: Los cuerpo overflow-x: oculto; es necesario para garantizar que no aparezca un desplazamiento horizontal al usar esto con su CSS existente.
Ahora puede echar un vistazo a su menú y probarlo en su navegador..
Si desea crear el JavaScript del menú lateral usando jQuery, puede hacerlo reemplazando el JavaScript que proporcioné anteriormente con la siguiente sección:
Accentsconagua
$ ('. topnav a'). click (function () $ ('# sideNavigation'). style.width = "250px"; $ ("# main"). style.marginLeft = "250px";); $ ('. closebtn'). clic (función () $ ('# sideNavigation'). style.width = "0"; $ ("# main"). style.marginLeft = "0";);Para hacer que el menú aparezca sin animación de diapositivas, simplemente realice cambios en la propiedad CSS transición, como se muestra en una forma abreviada a continuación:
.sidenav transición: 0s; #main transición: margen izquierdo 0s;
Esto hará que el cambio aparezca instantáneamente ya que no hay un retraso especificado en el transición. El valor predeterminado que utilizamos es 0.5s.
Crear un menú lateral solo toma unas pocas líneas de código y no necesita usar muchos recursos. Además, si jQuery ya está en la página para otras tareas, el trabajo se puede hacer con un poco menos de líneas de código y se puede personalizar aún más..
Hacer que el código responda para trabajar con diferentes resoluciones de pantalla de dispositivos es simplemente un caso de modificación del CSS agregando consultas de medios para casos específicos.
Para llevar esto más lejos, es posible que desee estilizar su menú con un marco CSS como Bootstrap o Bulma.
