Kako izraditi kliznu traku izbornika pomoću HTML-a, CSS-a i JavaScript-a

Izbornik je ono što tražite kada sletite na web mjesto. Ima mogućnosti i daje vam pristup svemu što vam web mjesto nudi. Definitivno biste rekli da je to važan dio web stranice, zar ne?

Moj prijatelj Girish patil i ja smo ovaj mjesec pokrenuli dvotjedni bilten za napredne programere. Prvi bilten sadrži klizne trake izbornika, pa ovdje pišem o tome kako smo ga izgradili.

Prije nego što započnemo, pripremite spremnik za cijelu web stranicu i dizajnirajte širinu i visinu prema svojim zahtjevima. Sada, unutar spremnika, morate postaviti klizni izbornik. U ovom ćemo članku objasniti kako stvoriti klizni izbornik ulijevo.

Započnimo

HTML kôd klizača dan je u nastavku. To je osnovna gola verzija.

 Click here 

Slider

Twitter

@Supriya

@Girish

Oznaka sidra koristi se za otvaranje izbornika kada se na nju klikne. To je ono što pokreće otvaranje izbornika, tako da možete vidjeti zašto se zove klizač-okidač . Komponenta izbornika je ono što se nalazi u roditeljskoj klasi klizača .

Sada dizajnirajte traku izbornika u CSS-u. Obratite pažnju na detalje dizajna.

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

Idemo sada razbiti gornji isječak i razgovarati o tome kako to radi.

Maxwidth definira maksimalnu širinu do koje div može zauzeti. U manjem prozoru može zauzeti manje od 250 piksela. Div zauzima 250 piksela kada je prozor razvučen do kraja na zaslonu.

Ponekad bi korisnik mogao pogledati web stranicu na puno manjem zaslonu, pa želimo da nam div promijeni veličinu u skladu s tim.

Krenimo dalje, pogledajmo zašto lijevo: -250px? To je učinjeno kako bi se postiglo ono glatko klizno djelovanje za izbornik. Primijetite da je vrijednost lijevo negativna, što nam govori da se izbornik pokreće 250 piksela lijevo od početnog položaja (što je 0). Dakle, trenutno nije na vidljivom području.

Ne želimo da se klizni izbornik uopće vidi, zbog čega dodajemo neprozirnost i njegovu vidljivost skrivamo . Svima se sviđa animacija, a ona daje zanimljiv vizualni osjećaj. Ova se animacija može izvesti pomoću prijelazne komponente.

YAYYY! Osnovni klizač je gotov!

Original text


Sad kad je osnovni klizač gotov, shvatimo što se događa kad je klizač aktivan - to jest kad se klikne oznaka sidra koja otvara traku izbornika.

Usredotočite se na aktivnu klasu u gore navedenom CSS kodu. Primijetite da vrijednosti neprozirnosti ividljivost se mijenja. Ova je promjena napravljena kako bi klizač (koji je prethodno bio skriven) bio vidljiv na zaslonu.

Također, možda se pitate: zašto je sada ostalo: 0? Prije je klizač bio izvan zaslona. Sada kada želimo da izbornik započne s lijeve strane zaslona, ​​promijenimo vrijednost lijeve na 0.

OH! Animacija! Ponovno dodajte prijelaznu komponentu tako da se klizač kada je aktivan glatko opušta s lijeve strane.

Gotovo je! Dizajnirali ste komponente, pa koji je sljedeći korak? JavaScript! Sve će to provesti u djelo.

Dodavanje malo JavaScript-a

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"); }
});

Pogledajmo kako JavaScript obavija sve i pokreće klizač. Želimo da se klizač otvori kada se klikne okidač klizača oznake sidra . Dakle, taj element dobivamo u varijablu sliderTrigger . Kasnije dobivamo cijeli element klizača u promjenjivi klizač . Sada dodajemo preslušač događaja koji implementira funkciju kada je sliderTriggerklikne element.

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

Funkcija koja je napisana kontrolira mehaniku otvaranja i zatvaranja klizne trake izbornika. Sjetite se da smo imali aktivnog i normalnog roditelja s klizačimarazred.

Hack koji ovdje implementiramo je dodavanje aktivne klase kada se klikne na element sliderTrigger i uklanjanje aktivne klase kada se ponovo klikne na isti element. Da bismo to učinili, koristimo dolje navedeni kod kako bismo provjerili sadrži li varijabla aktivnu klasu.

slider.classList.contains("active")

Ako je vrijednost istinita, uklanjamo aktivnu klasu s popisa. Što se onda događa? Klizna traka izbornika se zatvara. Ako je vrijednost false, na popis predavanja dodajemo aktivnu klasu. Što se sada događa? Da, prikazuje se klizna traka izbornika. To je tako jednostavno.

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

Voilà gotovo je !! Pogledajte tko plješće;)

Rad istog koda prikazan je dolje u CodePenu.

Iako je ovo osnovni primjer, u svom biltenu šaljem primjere složenijih i različitih vrsta kliznih traka izbornika.

Github repo za Giyaletter

Twitter kvaka: Supriya S i Girish Patil

Thank you. Happy coding :)

Check out products by us:

paybackhub.com and certhive.com