HTMLTutorialsNavigationDropdown Menu - SELFHTML Wiki
Informácie o tomto texte
V tejto kapitole sa dozviete funkčnosť rozbaľovacia navigácia, ktorú je možné otvoriť a zavrieť pomocou myši a klávesnice. Adaptívne sa prispôsobuje všetkým výrezom.
Obsah
Ponuky s niekoľkými (vnorenými) úrovňami [Upraviť]
V mnohých prípadoch navigácie vo väčších webových projektoch neobsahujú postupný zoznam odkazov, ale distribuujú ich na rôzne navigačné úrovne.
vnorené zoznamy [upraviť]
Vnorené zoznamy sú vhodné na logické mapovanie tejto štruktúry.
Aj bez CSS je štruktúra vnorených zoznamov veľmi jasná prostredníctvom preferencií prehliadača.
Všetky odkazy je možné zvoliť pomocou klávesnice.
Flyout alebo Dropdown? [ Editovať ]
V čase pixelovo dokonalého rozloženia boli teraz dve varianty:
- Vďaka rozbaľovacej ponuke podponuky „lietajú“ vodorovne mimo zvislú štruktúru doprava
- V rozbaľovacej ponuke podmenu „padajú“ zvisle z vodorovného riadku
Skryť podmenu [upraviť]
Charakteristikou rozbaľovacej ponuky je, že podmenu je skryté v pôvodnom stave a je vybrané a viditeľné iba pri výbere pomocou myši pomocou pseudo-triedy: vznášať sa alebo pomocou klávesnice cez: zameranie.
Prvkom zoznamu, ktoré obsahujú podponuku ako podradený prvok, sa priradí tabindex = "0", aby bolo možné vložiť ich do záložiek.
Po výbere pomocou myši alebo klávesnice sa zobrazí podponuka; nasledujúce položky zoznamu sa posúvajú nadol.
.Ak je vybratá podponuka, zobrazí sa podponuka hneď po výbere prvej položky zoznamu, ale znova sa skryje.
Variantu ovládanú dotykom a klávesnicou je možné dosiahnuť iba pomocou JavaScriptu:
zvislá rozbaľovacia ponuka [Upraviť]
Túto ponuku je možné previesť do vertikálnej rozbaľovacej ponuky v niekoľkých jednoduchých krokoch:
Ak nepoužívate nav li, sú položky ponuky usporiadané pod sebou. Absolútna poloha nav ul ul je rovnaká ako top: -0,4em; výplň nadradeného prvku a je vľavo: 8em; umiestnená napravo od nadradeného prvku.
Tento typ navigácie je dnes trochu zamračený, pretože obsahová oblasť by mala mať celú šírku. Štúdie z čítania ukázali, že používatelia intuitívne začínajú hľadať nové a dôležité informácie vľavo, a je preto pravdepodobnejšie, že ich od navigácie odradí.
Výhodou tohto typu navigácie je, že je možné ľahko integrovať dlhé odkazy, ktoré sa nedajú umiestniť v horizontálnej navigácii. Ďalším plusom je, že sa dá ľahko roztiahnuť smerom nadol, čo po niekoľkých zmenách môže byť rýchlo príliš dlhé a mätúce. Obidve výhody preto skrývajú nebezpečenstvo, že navigácia bude neprehľadná a ťažko použiteľná.
Exkurz: skryť prvky (alternatívy k zobrazeniu: žiadne) [upraviť]
Skrytie podmenu s displejom: žiadne; Mali by ste sa vyhnúť (a vyblednutiu pomocou display: block;), pretože to skryje obsah pre používateľov čítačky obrazovky.
Alternatívou je otvorenie podmenu zľava: -9999px; pohybovať sa mimo viditeľnú oblasť a odtiaľ opäť priletieť. Prehliadač však potom vytvorí neviditeľný, ale obrovský prvok, ktorý má negatívny vplyv na výkon stránky.
Ďalším spôsobom môže byť zneviditeľnenie podmenu pomocou odsadenia textu:
Výhodou je, že text vždy odteká od prvku, a preto nemôže nikdy vyčnievať ani pri dlhých textoch a že nemusí byť nakreslený kontajner s veľkosťou 9999px. Výkon je výrazne lepší, najmä na mobilných zariadeniach.
Tretia možnosť posúva položku ponuky za stránku so záporným indexom z. Aby skutočne zmizol, dostala veľkosť písma nula.
Záver [upraviť]
Tu zobrazené navigácie môžete ovládať a obsluhovať pomocou myši. Pomocou klávesnice môžete ovládať iba zobrazené odkazy, nie však skryté odkazy.
Skutočne prístupný variant dosiahnete iba pomocou JavaScriptu: