Cómo construir una barra de menú deslizante usando HTML, CSS y JavaScript

Foto de rawpixel en Unsplash

Un menú es lo que busca cuando aterriza en un sitio web. Tiene opciones y le da acceso a todo lo que el sitio web tiene para ofrecerle. Definitivamente diría que es una parte importante de un sitio web, ¿verdad?

Mi amiga Girish patil y yo comenzamos un boletín quincenal para desarrolladores con fachada este mes. El primer boletín presenta barras de menú deslizantes, y aquí estoy escribiendo sobre cómo lo construimos.

Antes de comenzar, instale un contenedor para toda su página web y diseñe el ancho y la altura de acuerdo con sus requisitos. Ahora, dentro del contenedor, debe colocar un menú deslizante. En este artículo, explicaremos cómo crear un menú deslizante izquierdo.

Empecemos

Inspiración !!!! ;)

El código HTML para el control deslizante se proporciona a continuación. Es una versión básica básica.


   haga clic aquí
   
    

Control deslizante

     Twitter
     @Supriya
     @Girish
   

Se utiliza una etiqueta de anclaje para abrir el menú cuando se hace clic en ella. Esto es lo que activa el menú para abrir, para que pueda ver por qué se llama control deslizante. El componente del menú es lo que se encuentra en la clase slider-parent.

Ahora diseñe la barra de menú en CSS. Presta atención a los detalles del diseño.

.slider-container {
  posición: relativa;
 }
  .slider-container .slider-parent {
    altura: 70vh;
    ancho máximo: 250 px;
    ancho: 100%;
    fondo: # 6C7A89;
    posición: absoluta;
    izquierda: -250px;
    arriba: 50px;
    visibilidad: oculta;
    opacidad: 0;
    eventos de puntero: ninguno;
    transición: .2s todo lineal;
 }
   .slider-container .slider-parent.active {
      visibilidad: visible;
      eventos de puntero: heredar;
      transición: .2s todo fácil de entrar;
      opacidad: 1;
      izquierda: 0;
 }

Analicemos ahora el fragmento anterior y analicemos cómo funciona.

Maxwidth define el ancho máximo hasta el que puede ocupar el div. En una ventana más pequeña, puede ocupar menos de 250 px. El div ocupa 250 px cuando la ventana se estira por completo en la pantalla.

A veces, el usuario puede mirar el sitio web en una pantalla mucho más pequeña, por lo que queremos que nuestro div cambie de tamaño en consecuencia.

Continuando, veamos por qué se fue: -250px? Esto se hace para obtener esa acción deslizante suave para el menú. Observe que el valor de left es negativo, lo que nos dice que el menú comienza 250px a la izquierda de la posición inicial (que es 0). Por lo tanto, actualmente no está en el área visible.

No queremos que se vea el menú deslizante, por eso agregamos opacidad y ocultamos su visibilidad. A todos les gusta la animación, y le da una sensación visual interesante. Esta animación se puede hacer usando el componente de transición.

YAYYY! ¡El control deslizante básico está listo!

Estoy seguro de que bailarás mejor: P

Ahora que el control deslizante básico está listo, comprendamos qué sucede cuando la barra deslizante está activa, es decir, cuando se hace clic en la etiqueta de ancla que abre la barra de menú.

Concéntrese en la clase activa en el código CSS proporcionado anteriormente. Observe que los valores de opacidad y visibilidad cambian. Este cambio se realiza para que el control deslizante (que estaba oculto anteriormente) sea visible en la pantalla.

Además, puede preguntarse: ¿por qué ahora queda: 0? Anteriormente, el control deslizante estaba fuera de la pantalla. Ahora que queremos que el menú comience en el lado izquierdo de la pantalla, cambiamos el valor de izquierda a 0.

¡OH! ¡La animación! Agregue el componente de transición nuevamente para que cuando el control deslizante esté activo, se deslice suavemente desde la izquierda.

¡Está hecho! Usted ha diseñado los componentes, entonces, ¿cuál es el siguiente paso? JavaScript! Pondrá todo esto en acción.

Agregar un poco de JavaScript

var sliderTrigger = document.getElementsByClassName ("slider-trigger") [0];
var slider = document.getElementsByClassName ('slider-parent') [0];
sliderTrigger.addEventListener ("clic", función (el) {
if (slider.classList.contains ("active")) {
  slider.classList.remove ("activo");
 }más{
  slider.classList.add ("activo");
 }
});

Veamos cómo JavaScript envuelve todo y hace que el control deslizante funcione. Queremos que el control deslizante se abra cuando se haga clic en el activador del control deslizante de la etiqueta de anclaje. Entonces obtenemos ese elemento en un control deslizante variable Trigger. Más adelante obtenemos todo el elemento deslizante en el control deslizante variable. Ahora, agregamos un detector de eventos que implementa una función cuando se hace clic en el elemento sliderTrigger.

sliderTrigger.addEventListener ("clic", función (el) {});

La función escrita controla la mecánica de abrir y cerrar la barra de menú deslizante. Recuerde que teníamos una clase activa y una clase deslizante-padre normal.

El truco que implementamos aquí es agregar la clase activa cuando se hace clic en el elemento sliderTrigger y eliminar la clase activa cuando se vuelve a hacer clic en el mismo elemento. Para ello, utilizamos el código que se proporciona a continuación, para verificar si la variable contiene la clase activa.

slider.classList.contains ("activo")

Si el valor es verdadero, eliminamos la clase activa de la lista. ¿Qué pasa entonces? La barra de menú deslizante se cierra. Si el valor es falso, agregamos la clase activa a la lista de clases. Ahora que pasa? Sí, se muestra la barra de menú deslizante. Es así de simple.

slider.classList.add ("activo")
slider.classList.remove ("activo")

¡Voilà está hecho! Mira quién aplaude;)

El funcionamiento del mismo código se muestra a continuación en CodePen.

Si bien este es un ejemplo básico, estoy enviando ejemplos de barras de menú deslizantes más complejas y diferentes en mi boletín.

Repositorio Github de Giyaletter

Identificador de Twitter: Supriya S y Girish Patil

Gracias. Feliz codificación :)

Echa un vistazo a los productos de nosotros:

paybackhub.com y certhive.com