Kód HTML pro stromovou nabídku

Obsah

Při navrhování stromového menu musí vývojáři kategorizovat různé části obsahu webu. Například prodejní místo produktu může obsahovat oddíly pro každý typ produktu s dalšími pododdíly, které rozdělují produkty do kategorií. Někdy weboví vývojáři používají podadresáře k uspořádání obsahu webu. V takovém případě by každý adresář mohl odpovídat prvku vyšší úrovně ve stromu nabídek. Každá položka nabídky bude nakonec HTML odkaz, jako v následujícím ukázkovém kódu: Oblečení

Tento kód propojuje složku nazvanou "oblečení", která se nachází v kořenovém adresáři webových stránek. Protože neexistuje žádná stránka, odkaz se otevře v této složce. V části oděvů v nabídce stromu lze položky propojit s jednotlivými stránkami, a to: Nohavice

Seznamy

Nabídky stromu HTML obvykle zahrnují seznamy. Následující příklad volání zobrazuje nabídku pomocí seznamů bez čísel:

• Oblečení
• • Kalhoty
  • Bundy
• Dárky
• • Potraviny
  • Novinka položky
  • DVD

Toto menu obsahuje dvě oddíly první úrovně pro "oblečení" a "dárky". V každém z nich jsou další položky v seznamu. Každá položka v seznamu může obsahovat jiný seznam pro složité weby, stromová nabídka může obsahovat několik úrovní hloubky. Kliknutím na prvek vyšší úrovně přejdete uživatele na stránku této části stránky, kliknutím na konkrétní položku se pošlete na určitou stránku v rámci jedné části.

Styl

Většina webů používá ve svých nabídkách stylové listy. V rámci kódu CSS mohou vývojáři diktovat různé aspekty vzhledu nabídky, včetně návrhu, jakož i viditelných charakteristik každé položky v seznamu. Webové prohlížeče obvykle zobrazují odrážky ve výchozích položkách seznamu, které se mnoho vývojářů rozhodne nezobrazovat. Následující příklad kódu CSS zobrazuje toto:

ul {typ-typ stylu: žádný; }}

Chcete-li zvolit konkrétní styl odrážky, bude kód následující: ul {list-style-type: square;}

Vývojáři mohou volitelně přidávat atributy tříd do seznamů na různých úrovních v nabídce stromu a přizpůsobovat CSS pro každou z nich.

Psaní skriptu

Mnoho webových stránek používá funkce JavaScript pro zlepšení interaktivity se stromovými nabídkami. Pomocí nich mohou vývojáři určit, že určité položky nejsou pro uživatele zpočátku viditelné. Například klepnutí na položku v seznamu nejvyšší úrovně může způsobit, že se začátek objeví dynamicky. Funkce JavaScriptu mohou používat vlastnost prezentace nebo viditelnost prvku, aby se prohlížeč mohl zobrazit nebo skrýt. Následující kód zobrazuje konfiguraci položky v seznamu, který je skryt: element.style.visibility = "hidden";

Následující alternativa používá vlastnost prezentace: element.style.display = "none";