Stromové navigační menu v JavaScriptu
V tomto tutoriálu si ukážeme, jak vytvořit v JavaScriptu rozbalovací (animované) stromové menu, které velmi usnadní navigaci na webech s větším počtem podstránek (např. na e-shopech, dokumentacích, rozsáhlých blozích a podobně). Budeme používat jen jQuery a poslední otevřenou položku menu budeme ukládat do SessionStorage, aby se menu i po obnovení stránky rozbalilo do stavu, v jakém ho uživatel naposledy zanechal.
Nejprve si ukažme výsledek, abychom se trochu namotivovali:
HTML
Začneme HTML kostrou. Menu budeme samozřejmě reprezentovat vnořenými HTML seznamy. Když si odmyslíme styly, budeme chtít dosáhnout následující podoby:
Ukažme si rovnou zdrojový kód, který si záhy popíšeme:
...konec náhledu článku...
Pokračuj dál
Došel jsi až sem a to je super! Věříme, že ti první lekce ukázaly něco nového a užitečného.
Chceš v kurzu pokračovat? Přejdi do prémiové sekce.
Koupit pouze tento kurz
Získej okamžitý přístup ke kurzu bez
časového omezení.
100 Kč
Obsah článku spadá pod licenci Premium, koupí článku souhlasíš se smluvními podmínkami.
- Přístup k jednotlivým lekcím dle způsobu pořízení.
- Kvalitní znalosti v oblasti IT.
- Dovednosti, které ti pomohou získat vysněnou a dobře placenou práci.
Popis článku
Požadovaný článek má následující obsah:
V tutoriálu naprogramujeme stromové navigační menu v JavaScriptu vhodné pro weby s větším počtem produktů nebo článků. Nechybí uchování stavu a animace.
Kredity získáš, když podpoříš naši síť. To můžeš udělat buď zasláním symbolické částky na podporu provozu nebo přidáním obsahu na síť.
David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.