Hogyan készítsünk csúszó menüsort HTML, CSS és JavaScript használatával

A menü az, amit keres, amikor egy webhelyre érkezik. Lehetőségei vannak, és hozzáférést biztosít mindenhez, amit a weboldal kínál Önnek. Mindenképpen azt mondanád, hogy ez egy webhely fontos része, igaz?

Girish Patil barátommal kéthetente hírlevelet kezdtünk a frontos fejlesztők számára ebben a hónapban. Az első hírlevél csúszó menüsorokat tartalmaz, ezért itt arról írok, hogyan építettük fel.

Mielőtt elkezdenénk, szerezzen be egy konténert az egész weboldalához, és tervezze meg az igényeinek megfelelő szélességet és magasságot. Most a tartály belsejében egy csúszó menüt kell elhelyeznie. Ebben a cikkben elmagyarázzuk, hogyan lehet létrehozni egy bal oldali csúszómenüt.

Kezdjük el

A csúszka HTML kódja az alábbiakban található. Ez egy alapvető csupasz verzió.

 Click here 

Slider

Twitter

@Supriya

@Girish

Egy horgonycímkéje használjuk a menü megnyitásához, amikor kattintott. Ez indítja el a menüt, hogy megnyíljon, így láthatja, hogy miért hívják csúszka-triggernek . A menü komponens az, ami a csúszka-szülő osztályban rejlik .

Most tervezze meg a menüsort CSS-ben. Ügyeljen a tervezés részleteire.

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

Most bontsuk le a fenti részletet, és vitassuk meg, hogyan működik.

A Maxwidth meghatározza azt a maximális szélességet, amelyig a div elfoglalhatja. Egy kisebb ablakban kevesebb, mint 250 képpontot foglalhat el. A div 250 képpontot foglal el, amikor az ablak teljesen kinyújtva van a képernyőn.

Időnként előfordulhat, hogy a felhasználó egy sokkal kisebb képernyőn nézi meg a weboldalt, ezért azt akarjuk, hogy divunk ennek megfelelően méretezzen át.

Továbbhaladva nézzük meg, miért maradt: -250px? Ez azért történik, hogy a menü sima csúszó műveletet kapjon. Figyeljük meg, hogy a left értéke negatív, ami azt mondja, hogy a menü 250px-el indul a kiindulási pozíciótól balra (ami 0). Tehát jelenleg nincs a látható területen.

Egyáltalán nem akarjuk, hogy a csúszó menü látható legyen, ezért hozzáadjuk az átlátszatlanságot és rejtetté tesszük annak láthatóságát . Mindenki szereti az animációt, és érdekes vizuális érzetet kölcsönöz. Ez az animáció az átmeneti komponens segítségével végezhető el .

YAYYY! Az alap csúszka elkészült!

Most, hogy az alap csúszka elkészült, értsük meg, mi történik, ha a csúszka aktív, vagyis amikor a menüsort megnyitó horgonycímkére kattintunk.

Koncentráljon az aktív osztályra a fent megadott CSS-kódban. Vegye figyelembe, hogy az átlátszatlanság és aa láthatóság megváltozik. Ez a változtatás azért történik, hogy a csúszka (amelyet korábban elrejtettek) láthatóvá váljon a képernyőn.

Kíváncsi lehet arra is, hogy miért maradt ez most : 0? Korábban a csúszka nem volt a képernyőn. Most, hogy azt szeretnénk, hogy a menü a képernyő bal oldalán induljon, megváltoztatjuk a bal értékét 0-ra.

Oh! Az animáció! Adja hozzá újra az átmeneti komponenst, hogy amikor a csúszka aktív, akkor balról simán könnyebben beenged.

Kész! Megtervezte az alkatrészeket, mi a következő lépés? JavaScript! Ez mindezt működésbe hozza.

Néhány JavaScript hozzáadása

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

Vizsgáljuk meg, hogyan csomagol mindent a JavaScript, és hogyan működik a csúszka. Azt akarjuk, hogy a csúszka megnyíljon, amikor a horgonycímke csúszka-ravaszjára kattint. Tehát ezt az elemet egy változó sliderTrigger- be kapjuk . Később az egész csúszka elemet beillesztjük a változó csúszkába . Most hozzáadunk egy eseményfigyelőt, amely egy függvényt valósít meg, amikor a csúszkaTriggerelemre kattint.

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

Az írott funkció vezérli a csúszó menüsor nyitásának és bezárásának mechanikáját. Ne feledje, hogy aktív és normális csúszkaszülőnk voltosztály.

Az itt végrehajtott feltörés az, hogy hozzáadjuk az aktív osztályt, amikor a sliderTrigger elemre kattintunk, és eltávolítjuk az aktív osztályt, amikor ugyanarra az elemre kattintunk újra. Ehhez az alább megadott kódot használjuk annak ellenőrzésére, hogy a változó tartalmazza-e az aktív osztályt.

slider.classList.contains("active")

Ha az érték igaz, akkor eltávolítjuk az aktív osztályt a listáról. Mi történik akkor? A csúszó menüsor bezárul. Ha az érték hamis, hozzáadjuk az aktív osztályt az osztálylistához. Most mi történik? Igen, megjelenik a csúszó menüsor. Ennyire egyszerű.

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

Voilà kész !! Nézd, ki tapsol;)

Ugyanazon kód működése az alábbiakban látható a CodePen-ben.

Bár ez egy alapvető példa, a hírlevelemben küldök példákat összetettebb és különböző típusú csúszó menüsorokra.

Giyaletter Github repója

Twitter-fogantyú: Supriya S és Girish Patil

Thank you. Happy coding :)

Check out products by us:

paybackhub.com and certhive.com