Advertisement
  1. Code
  2. Front-End

Félrecsúszó oldalsáv menü készítése reszponzív dizájnhoz

Scroll to top
Read Time: 4 min

Hungarian (Magyar) translation by Szabó Péter (you can also view the original English article)

Ebben a bemutatóban egy kiszélesíthető oldalsó navigációs menüt fogsz készíteni JavaScript és CSS segítségével. A végső termék úgy fog kinézni, ahogyan azt alább láthatod:

Sliding Side Navigation MenuSliding Side Navigation MenuSliding Side Navigation Menu

A forráskód

Kezdésként adjunk hozzá egy kis kódot az oldalsávhoz:

Láthatod, hogy létrehoztunk egy oldalsó menü divet sidenav osztállyal. Ezután hozzáadtuk a tényleges felső sávos navigációt egy <nav> taggel, és SVG-t használtunk az oldalsáv menüikonjaiként.

Az ikon onclick attribútuma és a bezárás gomb JavaScriptre fog élesedni, amit a következőkben adunk hozzá.

Figyelj rá, hogy a weboldalad tartalmát a div id="main" konténeren belül helyezd el, mert az így fog csak jobbra csúszni.

JavaScript

Ezután add hozzá a JavaScriptet az openNav és a closeNav függvények elkészítése érdekében.

CSS

Végül szükségünk lesz az oldal stilizálására némi CSS-sel az oldalsávhoz és a linkjeinkhez:

Megjegyzés: A body {overflow-x: hidden;} kötelező, hogy a vízszintes csúszka ne jelenjen meg, amikor a már létező CSS-eddel együtt használjuk.

Most vess egy pillantást a menüdre és próbáld ki a böngésződben.

jQuery használata

Ha szeretnéd létrehozni az oldalsáv JavaScriptjét jQuery használatával, az meg tudod tenni úgy, hogy az általam korábban megadott JavaScriptet lecseréled a következő résszel:

A csúszka eltávolítása

Ha azt akarod, hogy a menü csúszka animáció nélkül jelenjen meg, egyszerűen csak változtasd meg a transition CSS tulajdonságot, ahogyan azt rövidített formában alább láthatod:

Ennek következtében a változás azonnali lesz, mert nem lesz a transitionnál megadott késleltetés. Mi az alapértelmezett 0.5s-t használtuk.

Konklúzió

Egy félrecsúszó oldalsáv elkészítése csak pár sornyi kódba kerül, és nem kell hozzá sok erőforrás. Ha a jQuery már az oldalon van más feladatok miatt, a feladat alig pár kódsorral megoldható és tovább módosítható.

A kód reszponzívvá tétele, hogy működjön különféle eszközök képernyőfelbontásán, csupán a CSS módosításán múlik azáltal, hogy a speciális eseteknek megfelelő media query-ket adunk hozzá.

Ezt tovább is lehet vinni, esetleg a menüdet stilizálhatod egy olyan CSS keretrendszerrel, mint a Bootstrap vagy a Bulma.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.