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.
roční PŘEDPLATNÉ
1 082 Kč
měsíčně, placeno ročně (12 984 Kč)14 000+ lekcí, cvičení a testů
6 000+ ti zůstane napořád
Neomezený přístup ke všem aktuálním
i připravovaným kurzům.
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íš s Provozní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.
David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.