de Supriya Shashivasan

Cum să construiți o bară de meniu glisantă utilizând HTML, CSS și JavaScript

Cum sa construiti o bara de meniu glisanta utilizand HTML
Fotografie de rawpixel pe Unsplash

Un meniu este ceea ce cauți când aterizezi pe un site web. Are opțiuni și vă oferă acces la tot ce vă poate oferi site-ul web. Ați spune cu siguranță că este o parte importantă a unui site web, nu?

Prietenul meu Girish patil și cu mine am început un buletin informativ săptămânal pentru dezvoltatorii cu față în această lună. Primul buletin informativ conține bare de meniu glisante, așa că aici vă scriu despre modul în care l-am construit.

Înainte de a începe, puneți la dispoziție un container pentru întreaga dvs. pagină web și proiectați lățimea și înălțimea în funcție de cerințele dvs. Acum, în interiorul containerului, trebuie să plasați un meniu glisant. În acest articol, vom explica cum să creați un meniu glisant stânga.

Să începem

Cum sa construiti o bara de meniu glisanta utilizand HTML
Inspirație !!!! 😉

Codul HTML pentru glisor este dat mai jos. Este o versiune simplă de bază.

<div class="slider-container">
<a href="https://www.freecodecamp.org/news/how-to-build-a-sliding-menu-bar-using-html-css-and-javascript-669f0c1c37a7/#" class="slider-trigger">   Click here   </a>
<div class="slider-parent">    <h1>Slider</h1>    <a href="https:/twitter.com/giyaletter">Twitter&lt;/a> <br>    &lt;a href="https:/twitter.com/s_omeal">@Supriya</a> <br>    <a href="https:/twitter.com/g__patil">@Girish</a> <br>   </div>
</div>

Un etichetă ancoră este folosit pentru a deschide meniul atunci când faceți clic pe. Acesta este motivul pentru care meniul se deschide, astfel încât să puteți vedea de ce este apelat glisor-declanșator. Componenta meniului este ceea ce se află în glisor-părinte clasă.

Acum proiectați bara de meniu în CSS. Acordați atenție detaliilor designului.

.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; }

Să descompunem acum fragmentul de mai sus și să discutăm cum funcționează.

Lățimea maximă definește lățimea maximă până la care poate ocupa div. Într-o fereastră mai mică, poate ocupa mai puțin de 250 px. Divizarea ocupă 250 px când fereastra este întinsă pe tot ecranul.

Uneori, utilizatorul s-ar putea uita la site-ul web pe un ecran mult mai mic, așa că dorim ca divizarea noastră să fie redimensionată în consecință.

Mai departe, să ne uităm de ce stânga: -250px? Acest lucru este făcut pentru a obține acea acțiune de alunecare lină pentru meniu. Observați că valoarea pentru stânga este negativă, ceea ce ne spune că meniul începe 250px la stânga poziției de pornire (care este 0). Deci, în prezent nu se află în zona vizibilă.

Nu vrem să se vadă deloc meniul glisant, motiv pentru care adăugăm opacitate și face-o vizibilitate ascunsă. Tuturor le place animația și oferă o senzație vizuală interesantă. Această animație poate fi realizată folosind tranziție componentă.

YAYYY! Glisorul de bază este gata!

1611970026 337 Cum sa construiti o bara de meniu glisanta utilizand HTML
Sunt sigur că vei dansa mai bine: P

Acum că glisorul de bază este terminat, să înțelegem ce se întâmplă când bara glisantă este activă – adică când se face clic pe eticheta de ancorare care deschide bara de meniu.

Concentrați-vă pe activ clasă în codul CSS dat mai sus. Observați că valorile pentru opacitate și vizibilitate sunt schimbate. Această modificare este făcută pentru a face glisorul (care anterior era ascuns) vizibil pe ecran.

De asemenea, s-ar putea să vă întrebați: de ce este acum stânga: 0? Anterior, glisorul era afară din ecran. Acum că dorim ca meniul să înceapă din partea stângă a ecranului, schimbăm valoarea stânga la 0.

OH! Animația! Adaugă tranziție componenta din nou, astfel încât atunci când glisorul este activ, se ușurează ușor din stânga.

Este gata! Ați proiectat componentele, deci care este următorul pas? JavaScript! Va pune toate acestea în acțiune.

Adăugarea unor 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"); }
});

Să analizăm modul în care JavaScript înfășoară totul și face ca cursorul să funcționeze. Vrem ca glisorul să se deschidă atunci când eticheta de ancorare glisor-declanșator se face clic. Deci, obținem acel element într-o variabilă sliderTrigger. Mai târziu, obținem întregul element glisant în variabilă glisor. Acum, adăugăm un ascultător de evenimente care implementează o funcție atunci când sliderTrigger se face clic pe element.

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

Funcția care este scrisă controlează mecanica deschiderii și închiderii barei de meniu glisante. Amintiți-vă că am avut un activ și un normal glisor-părinte clasă.

Hack-ul pe care îl implementăm aici este să adăugăm clasa activă atunci când sliderTrigger se face clic pe element și se elimină clasa activă atunci când se face clic din nou pe același element. Pentru aceasta, folosim codul de mai jos, pentru a verifica dacă variabila conține clasa activă.

slider.classList.contains("active")

Dacă valoarea este adevărată, eliminăm clasa activă din listă. Ce se întâmplă atunci? Bara de meniu glisantă se închide. Dacă valoarea este falsă, adăugăm clasa activă la lista de clase. Ce se întâmplă acum? Da, este afișată bara de meniu glisantă. Este atât de simplu.

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

Voilà s-a făcut !! Uite cine bate din palme;)

1611970026 697 Cum sa construiti o bara de meniu glisanta utilizand HTML

Funcționarea aceluiași cod este prezentată mai jos în CodePen.

Deși acesta este un exemplu de bază, trimit exemple de tipuri de bare de meniu glisante mai complexe și diferite în buletinul meu informativ.

Github repo din Giyaletter

Mâner Twitter: Supriya S și Girish Patil

Mulțumesc. Codificare fericita 🙂

Verificați produsele noastre:

paybackhub.com și certhive.com