HTMLTutorialsNavigationDropdown Menu - SELFHTML Wiki
Információk erről a szövegről
Ebben a fejezetben megtudhatja funkcionalitás egy legördülő menü, amely az egérrel és a billentyűzettel nyitható és zárható. Reagálva alkalmazkodik az összes nézetablakhoz.
Tartalomjegyzék
Menük több (beágyazott) szinttel [Szerkesztés]
Sok esetben a nagyobb webes projektek navigációi nem tartalmazzák a linkek egymás utáni listáját, hanem különböző navigációs szintekre terjesztik azokat.
beágyazott listák [szerkesztés]
A beágyazott listák alkalmasak e szerkezet logikai leképezésére.
CSS nélkül is nagyon egyértelmű a beágyazott listák felépítése a böngésző beállításain keresztül.
Az összes hivatkozás kiválasztható a billentyűzettel.
Felugrás vagy legördülő menü? [ Szerkeszteni ]
A pixel tökéletes elrendezés idején két változat létezett:
- A felugró menüvel az almenük vízszintesen „repülnek” ki a függőleges szerkezetből jobbra
- A legördülő menü segítségével az almenük függőlegesen "esnek" a vízszintes sorból
Almenü elrejtése [szerkesztés]
A legördülő menü jellemzője, hogy az almenü eredeti állapotában el van rejtve, és csak akkor kerül kiválasztásra és láthatóvá, ha az egérrel az ál osztályon keresztül: egérmutatóval vagy a billentyűzettel: fókusz segítségével választja ki.
Azok a listaelemek, amelyek almenüt tartalmaznak gyermekelemként, tabindex = "0" értéket kapnak, hogy lapozhatók legyenek.
Ha egérrel vagy billentyűzettel választja, megjelenik az almenü; a következő listaelemek csúsznak lefelé.
.almenü van kiválasztva, az almenü megjelenik, amint a lista első eleme kiválasztásra kerül, de ismét elrejtésre kerül.
Érintéssel és billentyűzettel működtethető változat csak JavaScript-sel érhető el:
függőleges repülési menü [Szerkesztés]
Ez a menü néhány egyszerű lépésben átalakítható függőleges flyout menüvé:
A nav li használatával a menüpontok egymás alatt vannak elrendezve. A nav ul ul abszolút helyzete megegyezik a tetejével: -0,4em; a szülő elem párnázata és maradt: 8em; a szülőelemtől jobbra helyezkedik el.
Ez a fajta navigáció ma kissé rosszalló, mivel a tartalmi területnek teljes terjedelmet kell adni. Olvasási tanulmányok kimutatták, hogy a felhasználók intuitív módon kezdik az új és fontos információkat keresni a bal oldalon, és így nagyobb valószínűséggel visszatartják őket a navigálástól.
Az ilyen típusú navigáció előnye, hogy a hosszú linkek könnyen integrálhatók, amelyeket nem lehetne elhelyezni egy vízszintes navigációban. További plusz, hogy könnyen lefelé bővíthető, de több változtatás után gyorsan túl hosszú és zavaros lehet. Mindkét előny magában hordozza a navigáció összetetté és nehezen használhatóvá tételének veszélyeit.
Excursus: elrejteni az elemeket (alternatívák a megjelenítéshez: nincsenek) [szerkesztés]
Az almenük elrejtése kijelzéssel: nincs; (és a display: blokkolással való elhalványulást) kerülni kell, mert ez elrejti a tartalmat a képernyőolvasók felhasználói számára.
Alternatív megoldás lehet az almenük megnyitása bal margóval: -9999px; a látható területen kívülre mozogni, és onnan újra berepülni. A böngésző azonban ekkor létrehoz egy láthatatlan, de hatalmas elemet, ami negatívan befolyásolja az oldal teljesítményét.
Egy másik módszer lehet az almenü láthatatlanná tétele a szöveges behúzással:
Előnye, hogy a szöveg mindig elfolyik az elemtől, és ezért hosszú szövegeknél sem tud kiemelkedni, és hogy nem kell 9999px méretű tárolót rajzolni. A teljesítmény lényegesen jobb, különösen mobil eszközökön.
A harmadik lehetőség negatív z-indexű oldal mögé mozgatja a menüpontot. Annak érdekében, hogy valóban eltűnjön, nulla betűméretet kap.
Következtetés [szerkesztés]
Az egérrel vezérelheti és kezelheti az itt bemutatott navigációkat. A billentyűzettel csak a megjelenített hivatkozásokat vezérelheti, a rejtett linkeket nem.
Igazán elérhető változatot csak JavaScript-sel érhet el: