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

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

Alustasime sõbra Girishi patiliga sel kuul kahe nädala tagant infolehte, mis oli mõeldud arendajatele. Esimesel infolehel on libisevad menüüribad ja nii kirjutangi siin, kuidas me selle koostasime.

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 vasakpoolset liugmenüüd luua.

Alustame

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

 Click here 

Slider

Twitter

@Supriya

@Girish

Ankrumärgendina kasutatakse menüü avamiseks parajasti. See käivitab menüü avanemise, nii et näete, miks seda nimetatakse liugur-päästikuks . Menüükomponent on see, mis asub liugur-vanem klassis.

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

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

Eraldame nüüd ülaltoodud jupi ja arutame selle toimimist.

Maxwidth määratleb maksimaalse laiuse, mille ulatuses div saab hõivata. Väiksemas aknas võib see hõivata vähem kui 250 pikslit. Kui aken on ekraanil lõpuni välja sirutatud, hõivab div 250 pikslit.

Mõnikord võib kasutaja vaadata veebisaiti palju väiksemal ekraanil, seega soovime, et meie div vastavat suurust muudaks.

Edasi liikudes vaatame, miks lahkus: -250px? Seda tehakse menüü sujuva libiseva toimingu saamiseks. Pange tähele, et vasakule antud väärtus on negatiivne, mis ütleb meile, et menüü algab lähtepositsioonist vasakule (mis on 0) 250 pikslit. Nii et see pole praegu nähtaval alal.

Me ei taha, et libistatav menüü oleks üldse nähtav, mistõttu lisame läbipaistmatuse ja muudame selle nähtavuse varjatuks . Animatsioon meeldib kõigile ja see annab huvitava visuaalse tunde. Seda animatsiooni saab teha üleminekukomponendi abil .

YAYYY! Põhiline liugur on valmis!

Nüüd, kui põhiline liugur on valmis, mõistame, mis juhtub, kui liugur on aktiivne - see tähendab, et kui klõpsatakse menüüribal avanevat ankurmärgendit.

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

Samuti võite mõelda: miks see nüüd alles on: 0? Varem oli liugur ekraanist väljas. Nüüd, kui tahame, et menüü algaks ekraani vasakul küljel, muudame vasakpoolse väärtuse väärtuseks 0.

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

See on tehtud! Olete komponendid kujundanud, mis on järgmine samm? JavaScripti! See paneb kõik selle teoks.

JavaScripti lisamine

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

Uurime, kuidas JavaScript kõik kokku murrab ja liuguri tööle saab. Soovime, et liugur avaneks, kui klõpsatakse ankurdussildi liug-päästikul . Niisiis saame selle elemendi muutuvaks liuguriks Trigger . Hiljem saame kogu liuguri elemendi muutuvasse liugurisse . Nüüd lisame liuguriTrigger korral sündmuste kuulaja, mis rakendab funktsioonielemendil klõpsatakse.

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

Kirjutatud funktsioon juhib libiseva menüüriba avamise ja sulgemise mehaanikat. Pidage meeles, et meil oli aktiivne ja tavaline liugur-vanemklass.

Siin rakendatud häkkimine on aktiivse klassi lisamine, kui klõpsatakse elemendil sliderTrigger , ja aktiivse klassi eemaldamine, kui samal elemendil uuesti klõpsatakse. Selleks kasutame allpool toodud koodi, et kontrollida, kas muutuja sisaldab aktiivset klassi.

slider.classList.contains("active")

Kui väärtus on tõene, eemaldame aktiivse klassi loendist. Mis siis juhtub? Libistatav menüüriba sulgub. Kui väärtus on vale, lisame aktiivse klassi klassinimekirja. Mis siis saab? Jah, kuvatakse libistatav menüüriba. Nii lihtne see ongi.

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

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

Sama koodi toimimine on näidatud allpool CodePenis.

Kuigi see on põhinäide, saadan oma uudiskirjas näiteid keerukamatest ja erinevat tüüpi liugmenüüribadest.

Giyaletteri Githubi repo

Twitteri käepide: Supriya S ja Girish Patil

Aitäh. Head kodeerimist :)

Tutvuge meie toodetega:

paybackhub.com ja certhive.com