Los mejores sitios web siempre seguirán las mejores tendencias y estándares.
Una cosa que suele darse hoy en dÃa es la capacidad de respuesta: hacer que el sitio web funcione en cualquier dispositivo y tamaño de pantalla.
Un elemento de diseño de un sitio web receptivo es un menú móvil, y estos menús móviles pueden tener muchas formas.
Una opción popular es usar un menú deslizable que generalmente se activa con un botón de menú de hamburguesas.
Un menú deslizante es un menú que generalmente está oculto fuera de la pantalla y se activa para abrirse y cerrarse a través de un disparador. Este activador suele ser un botón, generalmente denominado menú de hamburguesas.
Los menús deslizantes son una excelente manera de agrupar todos los enlaces en un solo lugar y optimizar el contenido para una pantalla más pequeña.
Vienen en todas las formas y tamaños, puedes conseguir menús deslizables hacia abajo y pueden crearse utilizando CSS puro o puede obtener menús de diapositivas en JavaScript.
Aunque los menús de diapositivas se usan principalmente para convertir la navegación del encabezado de un sitio web en un formulario receptivo, también se pueden usar como menús normales para sitios web de pantalla completa.
13 menús de diapositivas con CSS y JavaScript
Los menús deslizantes se pueden crear usando solo CSS, pero cuando agrega un poco de JavaScript, se pueden crear menús más avanzados, asà que espere una variedad de soluciones diferentes en este artÃculo.
ver la pluma
en CódigoPen.
Como dije en la introducción, no todos los menús de diapositivas solo deben usarse para crear un diseño receptivo, este menú se puede usar como el menú principal de cualquier sitio web, ahorra espacio y el diseño se ve limpio y minimalista.
El menú real que se desliza hacia afuera usa una animación suave para aparecer desde el lado izquierdo, cada elemento del menú tiene su propio efecto de desplazamiento que es sutil y no abrumador, al igual que los elementos del menú principal, tienen un icono y un efecto de desplazamiento.
Si está buscando tener un menú como este, le permite aprovechar al máximo la pantalla para otros elementos y ahorrar espacio, pero aún asà mantener un acceso rápido a la navegación.
ver la pluma
en CódigoPen.
Un ejemplo puro de HTML y CSS de cómo puede crear menús deslizantes sin necesidad de JavaScript.
La animación es simple y suave, ocupa toda la pantalla con un fondo transparente, sin embargo, puede cambiarlo fácilmente a un color sólido. Cada elemento del menú tiene un sutil efecto de desplazamiento y el menú se puede expandir infinitamente para agregar más elementos de menú.
3. Menú desplegable desplegable
ver la pluma
en CódigoPen.
Los menús deslizables hacia abajo son una excelente manera de mostrar una lista de enlaces, en este ejemplo, el menú se desliza suavemente hacia abajo desde la parte superior y nos presenta enlaces de navegación.
Este tipo de vista funciona muy bien para dispositivos móviles, ya que ocupan toda la pantalla y se escalan bien sin importar el tamaño de la pantalla.
ver la pluma
en CódigoPen.
Un menú estilo cajón fuera de la pantalla con un fondo transparente y efectos de desplazamiento sobre los enlaces del menú.
La animación es simple, funciona bien y no es abrumadora. El menú en sà se ve moderno y elegante con su fondo transparente, pero puede cambiarlo fácilmente a un color sólido si lo necesita. Y todo el menú es simple ya que solo usa HTML y CSS, no JavaScript en este.
ver la pluma
en CódigoPen.
Otra forma de hacer que un menú deslizable no móvil forme parte de la interfaz de usuario principal es agregar un disparador de desplazamiento para que un usuario pueda acceder al menú deslizable sin tener que hacer clic en él.
El disparador de desplazamiento es rápido y ágil, lo que facilita el acceso para la navegación del sitio web, y es muy fácil de usar.
ver la pluma
en CódigoPen.
Aquà tenemos un menú del lado izquierdo moderno y minimalista en el que el menú deslizable se activa al hacer clic en el Ãcono de la hamburguesa usando algún javascript.
El menú se aleja desde la parte inferior a la vista y cada elemento tiene su propio efecto de desplazamiento. Solo un menú simple y efectivo que se ve genial.
ver la pluma
en CódigoPen.
Los menús deslizantes activados por Javascript pueden tener muchos efectos, este utiliza un efecto de plegado 3D para mostrar y cerrar el menú, muy llamativo y la animación es fluida.
Se siente muy elegante y el menú se mantiene moderno y minimalista, cada elemento del menú tiene un efecto de desplazamiento y un indicador en el lado derecho para mostrar en qué página se encuentra actualmente.
ver la pluma
en CódigoPen.
Aquà tenemos un gran ejemplo de un menú deslizable simple pero extremadamente funcional, la animación es sutil y no abrumadora. El menú en sà se distribuye uniformemente entre cada enlace/botón del menú.
El ejemplo está usando una pantalla de degradado, pero el menú podrÃa modificarse para usar un color sólido. El Ãcono de la hamburguesa está animado para formar una cruz cuando el menú está abierto, lo cual es un buen toque.
ver la pluma
en CódigoPen.
Otro menú genial de deslizamiento automático basado en un disparador de desplazamiento, el menú usa Ãconos para mantener el espacio al mÃnimo, pero aún es súper accesible una vez que pasa el mouse sobre ellos.
El menú se desliza rápidamente y toda la animación es muy ágil. Revela un menú de múltiples capas con subcategorÃas e incluso se desplaza hacia abajo para mostrar más enlaces, por lo que el menú puede acomodar muchos enlaces e Ãconos.
ver la pluma
en CódigoPen.
Si está buscando un menú deslizable más avanzado, este es para usted: viene con muchas funciones sofisticadas y efectos sutiles que le dan su nombre, Pro Sidebar.
Este menú deslizante utiliza un diseño totalmente receptivo, se puede contraer, admite menús de varios niveles y puede personalizarlo usted mismo. Cada icono tiene un efecto de desplazamiento y los menús de varios niveles se cierran automáticamente cuando abres otro.
ver la pluma
en CódigoPen.
La mayorÃa de los menús deslizantes generalmente se deslizarán desde la izquierda o la derecha y solo ocuparán una parte de la pantalla; sin embargo, a veces es útil aprovechar toda la pantalla si tiene mucho contenido para mostrar, tal como lo demuestra este ejemplo. a nosotros.
Es útil porque el menú deslizable solo muestra el contenido en el área principal del sitio web, por lo que una vez cerrado, el usuario puede continuar donde estaba.
Poder mostrar una nueva página sobre el cuerpo principal es súper poderoso.
Además, la animación es fluida y el icono cambia en estado abierto y cerrado.
ver la pluma
en CódigoPen.
Un ejemplo puro de HTML y CSS que usa un efecto de revelación lateral, el menú se desliza suavemente y empuja el cuerpo principal del sitio web hacia un lado para dejar espacio para el menú.
Este efecto no se desliza sobre el contenido del cuerpo principal, por lo que se desplazará hacia un lado, solo tenlo en cuenta, pero a veces este efecto se ve bien. El menú en sà es simple pero muy efectivo y puedes agregar tus propios Ãconos para hacerlo más atractivo.
ver la pluma
en CódigoPen.
Este menú es súper único e impresionante ya que no usa JavaScript, pero el menú en sà es bastante complicado. Le permite mostrar menús de varias capas en el lado izquierdo, ideal para subcategorÃas y enlaces más profundos.
El efecto de animación es un simple deslizamiento suave para abrir y cerrar menús y abrir menús de subcategorÃas.
ArtÃculos relacionados
Sobre el Autor:
lucas embrey es un desarrollador full-stack, BSc en Ciencias de la Computación y con sede en el Reino Unido.
Puedes saber más sobre él en https://lukeembrey.com/
