Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Front-End
Code

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

by
Difficulty:BeginnerLength:ShortLanguages:

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