Liukuvan valikkopalkin luominen käyttämällä HTML-, CSS- ja JavaScriptiä

Kuva Rawpixel on Unsplash

Valikko on mitä etsit, kun laskeudut verkkosivustolle. Sillä on vaihtoehtoja ja se antaa sinulle pääsyn kaikkeen, mitä verkkosivusto tarjoaa sinulle. Sanoisit ehdottomasti, että se on tärkeä osa verkkosivustoa, eikö niin?

Ystäväni Girish-patilla ja aloitin tämän viikon joka toinen viikko uutiskirjeen edessä oleville kehittäjille. Ensimmäisessä uutiskirjeessä on liukuvat valikkopalkit, joten kirjoitan täällä siitä, kuinka me sen rakensimme.

Ennen kuin aloitamme, hanki kontti koko verkkosivullesi ja suunnittele leveys ja korkeus tarpeidesi mukaan. Nyt säiliön sisään on asetettava liukuva valikko. Tässä artikkelissa selitetään kuinka luodaan vasen liukuva valikko.

Aloitetaan

Inspiraatio !!!! ;)

Liukusäätimen HTML-koodi on annettu alla. Se on perus paljain versio.


   Klikkaa tästä
   
    

Slider      Twitter
     @Supriya
     @Girish
   

Ankkuritunnistetta käytetään avaamaan valikko napsautettaessa. Tämä laukaisee valikon avaamisen, joten näet, miksi sitä kutsutaan liukusäätimeksi. Valikkokomponentti on mitä liukusäädin-vanhemmaluokassa on.

Suunnittele nyt valikkopalkki CSS: ssä. Kiinnitä huomiota suunnittelun yksityiskohtiin.

.säätörasia {
  asema: suhteellinen;
 }
  .siliitin-säilytys.
    korkeus: 70vh;
    max-leveys: 250 kuvapistettä;
    leveys: 100%;
    tausta: # 6C7A89;
    asema: ehdoton;
    vasen: -250px;
    yläosa: 50 kuvapistettä;
    näkyvyys: piilotettu;
    opasiteetti: 0;
    osoitintapahtumat: ei mitään;
    siirtymä: .2 on kaikki lineaarinen;
 }
   .slider-container .slider-parent.active {
      näkyvyys: näkyvä;
      osoitintapahtumat: perivät;
      siirtymä: .2 on kaikki helposti sisään-ulos;
      opasiteetti: 1;
      vasen: 0;
 }

Tarkastellaan nyt yllä oleva katkelma ja keskustellaan sen toiminnasta.

Suurin leveys määrittelee enimmäisleveyden, johon div voi mennä. Pienemmässä ikkunassa se voi käyttää vähemmän kuin 250 kuvapistettä. Div-levy vie 250 pikseliä, kun ikkuna on venytetty kokonaan näytölle.

Toisinaan käyttäjä saattaa katsoa verkkosivustoa paljon pienemmällä näytöllä, joten haluamme divisioonamme muuttaa kokoa vastaavasti.

Katsotaanpa jatkossa miksi vasemmalle: -250px? Tämä saadaan aikaan valikon sujuva liukuva toiminta. Huomaa, että vasemmanpuoleinen arvo on negatiivinen, mikä kertoo meille, että valikko alkaa 250px aloitusasennosta vasemmalle (mikä on 0). Joten se ei tällä hetkellä ole näkyvällä alueella.

Emme halua liukuvan valikon näkyvän ollenkaan, minkä vuoksi lisäämme opasiteetin ja teemme sen näkyvyyden piilotettua. Animaatiosta kaikki pitävät, ja se antaa mielenkiintoisen visuaalisen tunteen. Tämä animaatio voidaan tehdä siirtymäkomponentin avulla.

YAYYY! Perusliukusäädin on valmis!

Olen varma, että tanssit paremmin: P

Nyt kun perusliukusäädin on valmis, ymmärretään, mitä tapahtuu, kun liukusäädin on aktiivinen - eli kun napsautetaan valikkopalkin avaavaa ankkuritunnistetta.

Keskity aktiiviseen luokkaan yllä annetussa CSS-koodissa. Huomaa, että opasiteetin ja näkyvyyden arvot ovat muuttuneet. Tämä muutos tehdään, jotta liukusäädin (joka aiemmin piilotettiin) näkyy näytöllä.

Saatat myös ihmetellä: miksi se nyt on jäljellä: 0? Aiemmin liukusäädin oli näytön ulkopuolella. Nyt kun haluamme valikon alkavan näytön vasemmasta reunasta, muutamme vasemman arvon arvoon 0.

VAI NIIN! Animaatio! Lisää siirtymäkomponentti uudelleen niin, että kun liukusäädin on aktiivinen, se helpottuu vasemmalle sujuvasti.

Se on tehty! Olet suunnitellut komponentit, joten mikä on seuraava askel? JavaScript! Se saattaa kaiken tämän toimintaan.

Lisäämällä JavaScriptiä

var sliderTrigger = document.getElementsByClassName ("liukusäädin") [0];
var liukusäädin = document.getElementsByClassName ('liukusäädin') [0];
sliderTrigger.addEventListener ("napsauta", toiminto (el) {
jos (slider.classList.contains ( "aktiivinen")) {
  slider.classList.remove ( "aktiivinen");
 } Else {
  slider.classList.add ( "aktiivinen");
 }
});

Tarkastellaan kuinka JavaScript kääri kaiken ja saa liukusäätimen toimimaan. Haluamme liukusäätimen avautuvan, kun ankkuritunnisteen liukusäädintä napsautetaan. Joten saamme tämän elementin muuttuvaan liukusäätimeenTrigger. Myöhemmin saamme koko liukusäädinelementin muuttuvaan liukusäätimeen. Nyt lisäämme tapahtuman kuuntelijan, joka toteuttaa toiminnon, kun sliderTrigger-elementtiä napsautetaan.

sliderTrigger.addEventListener ("napsauta", toiminto (el) {});

Kirjoitettu toiminto ohjaa liukuvan valikkopalkin avaamisen ja sulkemisen mekaniikkaa. Muista, että meillä oli aktiivinen ja normaali liukusäädin-luokka.

Täällä toteuttamamme hakko on lisätä aktiivinen luokka, kun sliderTrigger-elementtiä napsautetaan, ja poistaa aktiivinen luokka, kun samaa elementtiä napsautetaan uudelleen. Käytämme alla olevaa koodia tarkistaaksesi, sisältääkö muuttuja luokan aktiivisen.

slider.classList.contains ( "aktiivinen")

Jos arvo on totta, poistamme aktiivisen luokan luettelosta. Mitä sitten tapahtuu? Liukuva valikkopalkki sulkeutuu. Jos arvo on väärä, lisäämme luokan aktiiviseksi luokaluetteloon. Mitä tapahtuu? Kyllä, liukuva valikkopalkki tulee näkyviin. Se on niin yksinkertaista.

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

Voilà se on valmis! Katso kuka taputtaa;)

Saman koodin toiminta näkyy alla CodePenissä.

Vaikka tämä on perus esimerkki, lähetän esimerkkejä monimutkaisemmista ja erityyppisistä liukuvista valikkopalkeista uutiskirjeessäni.

Giyaletterin Github-repo

Twitter-kahva: Supriya S ja Girish Patil

Kiitos. Hyvää koodausta :)

Katso tuotteemme meiltä:

paybackhub.com ja certhive.com