Kuidas luua libisevat menüüriba HTML-i, CSS-i ja JavaScripti abil

Foto autor Rawpixel saidil Unsplash

Menüü on see, mida veebisaidile minnes otsite. Sellel on valikud ja see annab teile juurdepääsu kõigele, mida veebisait teile pakub. Te ütleksite kindlasti, et see on veebisaidi oluline osa, eks?

Mu sõber Girish patil ja ma alustasin sel kuul kahe nädala tagant infolehte fronteeritud arendajatele. Esimeses infolehes on libistatavad menüüribad ja seetõttu kirjutan siin sellest, kuidas me selle ehitasime.

Enne alustamist hankige kogu oma veebilehe jaoks konteiner ja kujundage laius ja kõrgus vastavalt teie vajadustele. Nüüd peate konteineri sees asetama libiseva menüü. Selles artiklis selgitame, kuidas luua vasakpoolset libisevat menüüd.

Alustame

Inspiratsiooni !!!! ;)

Liuguri HTML-kood on toodud allpool. See on põhiline paljas versioon.


   Kliki siia
   
    

liugur

     Twitter
     @Supriya
     @Girish
   

Klõpsamisel menüü avamiseks kasutatakse ankrusilti. Just see käivitab menüü avanemise, nii et näete, miks seda nimetatakse liug-päästikuks. Liug-vanema klassis peitub menüü komponent.

Nüüd kujundage menüüriba CSS-is. Pöörake tähelepanu disaini detailidele.

.slider-konteiner {
  positsioon: sugulane;
 }
  .slider-container .slider-parent {
    kõrgus: 70vh;
    max laius: 250 pikslit;
    laius: 100%;
    taust: # 6C7A89;
    positsioon: absoluutne;
    vasak: -250 pikslit;
    ülaosa: 50 pikslit;
    nähtavus: varjatud;
    läbipaistmatus: 0;
    pointer-events: pole;
    üleminek: .2 on kõik lineaarsed;
 }
   .slider-container .slider-parent.active {
      nähtavus: nähtav;
      osuti-sündmused: pärida;
      üleminek: .2 on kõik lihtsus-sisse-välja;
      läbipaistmatus: 1;
      vasakul: 0;
 }

Jagageme ülaltoodud katkendi lahti ja arutame, kuidas see töötab.

Maksimaalne laius määratleb maksimaalse laiuse, milleni div võib asuda. Väiksemas aknas võib see hõivata vähem kui 250 pikslit. Kui aken on ekraanile täielikult välja sirutatud, võtab see divp 250 pikslit.

Vahel võib kasutaja veebisaiti vaadata palju väiksemal ekraanil, nii et soovime, et meie divisjoni suurused muutuksid.

Vaatame edasi, miks vasakule: -250 pikslit? Seda tehakse menüü sujuva libistamise saamiseks. Pange tähele, et vasakpoolse väärtuse väärtus on negatiivne, mis tähendab, et menüü algab 250 pikslit lähteasendist vasakule (mis on 0). Seega ei asu see praegu nähtavates piirkondades.

Me ei soovi, et libistatavat menüüd üldse näha oleks, mistõttu lisame läbipaistmatuse ja muudame selle nähtavuse peidetuks. Animatsioon meeldib kõigile ja see annab huvitava visuaalse tunde. Animatsiooni saab teha üleminekukomponendi abil.

YAYYY! Põhiliug on tehtud!

Olen kindel, et tantsid paremini: P

Nüüd, kui põhiliug on tehtud, mõelgem, mis juhtub siis, kui liugriba on aktiivne - st kui klõpsatakse menüüriba avaval ankurimärgendil.

Keskenduge ülaltoodud CSS-koodis aktiivsele klassile. Pange tähele, et läbipaistmatuse ja nähtavuse väärtused on muutunud. Selle muudatuse eesmärk on muuta liugur (mis oli varem peidetud) ekraanil nähtavaks.

Samuti võite küsida: miks see nüüd alles on: 0? Varem oli liugur ekraanilt väljas. Nüüd, kui soovime, et menüü algaks ekraani vasakust servast, muudame vasakpoolse väärtuse väärtuseks 0.

OH! Animatsioon! Lisage üleminekukomponent uuesti, nii et kui liugur on aktiivne, hõlbustaks see vasakult sujuvalt.

See on tehtud! Olete komponendid kavandanud, mis on järgmine samm? JavaScript! See paneb kõik selle ellu.

Mõne JavaScripti lisamine

var sliderTrigger = document.getElementsByClassName ("slider-trigger") [0];
var liugur = document.getElementsByClassName ('liuguri vanem') [0];
sliderTrigger.addEventListener ("klõpsake", funktsioon (el) {
if (slider.classList.contains ("active")) {
  slider.classList.remove ("aktiivne");
 } veel {
  slider.classList.add ("aktiivne");
 }
});

Vaatame lähemalt, kuidas JavaScripti kõik ümber pakitakse ja liugur tööle pannakse. Soovime, et liuguri avaneks siis, kui klõpsatakse ankrusildi liuguri päästikule. Nii et me saame selle elemendi muutuvaks liuguriksTrigger. Hiljem saame kogu liuguselemendi muutuva liuguri sisse. Nüüd lisame sündmuste kuulaja, mis rakendab funktsiooni, kui klõpsatakse elementi sliderTrigger.

sliderTrigger.addEventListener ("klõps", funktsioon (el) {});

Kirjutatud funktsioon kontrollib libiseva menüüriba avamise ja sulgemise mehaanikat. Pidage meeles, et meil oli aktiivne ja tavaline liugurite-vanemate klass.

Siin rakendatav häkk on aktiivse klassi lisamine, kui klõpsatakse elementi sliderTrigger, ja aktiivse klassi eemaldamine, kui sama elementi klõpsatakse uuesti. Selleks kasutame allpool toodud koodi, et kontrollida, kas muutuja sisaldab klassi aktiivset.

slider.classList.contains ("aktiivne")

Kui väärtus on tõene, eemaldame aktiivse klassi loendist. Mis siis juhtub? Libistatav menüüriba sulgub. Kui väärtus on vale, lisame klassi aktiivse klassi. Mis nüüd juhtub? Jah, kuvatakse libistatav menüüriba. See on nii lihtne.

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

Voilà see on tehtud !! Vaata, kes plaksutab;)

Sama koodi toimimine on CodePenis näidatud allpool.

Kuigi see on põhinäide, saadan oma infolehes välja näiteid keerukamatest ja erinevat tüüpi libisevatest menüüribadest.

Giyaletteri Githubi repo

Twitteri käepide: Supriya S ja Girish Patil

Aitäh. Head kodeerimist :)

Vaadake meie tooteid:

paybackhub.com ja certhive.com