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