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 tento kurz
Obsah článku spadá pod licenci Premium, koupí článku souhlasíš se smluvními podmínkami.
- Neomezený a trvalý přístup k jednotlivým lekcím.
- 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.