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

Un menú es lo que busca cuando llega a 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 amigo Girish patil y yo comenzamos este mes un boletín quincenal para desarrolladores frontales. El primer boletín presenta barras de menú deslizantes, por lo que aquí estoy escribiendo sobre cómo lo construimos.

Antes de comenzar, coloque 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, debes colocar un menú deslizante. En este artículo, explicaremos cómo crear un menú deslizante hacia la izquierda.

Empecemos

El código HTML del control deslizante se muestra a continuación. Es una versión básica desnuda.

 Click here 

Slider

Twitter

@Supriya

@Girish

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

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

.slider-container { position: relative; } .slider-container .slider-parent { height: 70vh; max-width: 250px; width: 100%; background: #6C7A89; position: absolute; left: -250px; top: 50px; visibility: hidden; opacity: 0; pointer-events: none; transition: .2s all linear; } .slider-container .slider-parent.active { visibility: visible; pointer-events: inherit; transition: .2s all ease-in-out; opacity: 1; left: 0; }

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

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

A veces, el usuario puede ver 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é dejó: -250px? Esto se hace para obtener esa suave acción de deslizamiento para el menú. Observe que el valor de la izquierda es negativo, lo que nos dice que el menú comienza 250px a la izquierda de la posición inicial (que es 0). Por lo que actualmente no está en el área visible.

No queremos que el menú deslizante se vea en absoluto, por eso agregamos opacidad y ocultamos su visibilidad . A todo el mundo le gusta la animación y 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!

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 anclaje que abre la barra de menú.

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

Además, podría 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 left a 0.

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

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

Añadiendo algo de JavaScript

var sliderTrigger = document.getElementsByClassName("slider-trigger")[0];var slider = document.getElementsByClassName('slider-parent')[0];
sliderTrigger.addEventListener( "click" , function(el){
if(slider.classList.contains("active")){ slider.classList.remove("active"); }else{ slider.classList.add("active"); }
});

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

sliderTrigger.addEventListener( "click" , function(el) {} );

La función que está escrita controla la mecánica de abrir y cerrar la barra de menú deslizante. Recuerde que teníamos un padre deslizante activo y normalclase.

The hack we implement here is to add the active class when the sliderTrigger element is clicked, and remove the active class when the same element is clicked again. To do that we use the code given below, to check if the variable contains the class active.

slider.classList.contains("active")

If the value is true, we remove the class active from the list. What happens then? The sliding menu bar closes. If the value is false, we add the class active to the classlist. Now what happens? Yes, the sliding menu bar is displayed. It is that simple.

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

Voilà it’s done!! Look who is clapping ;)

The working of the same code is shown below in the CodePen.

While this is a basic example, I’m sending out examples of more complex and different types of sliding menu bars in my newsletter.

Github repo of Giyaletter

Twitter handle: Supriya S and Girish Patil

Thank you. Happy coding :)

Check out products by us:

paybackhub.com and certhive.com