Le pagine Web HTML possono usare le strutture gerarchiche, che sono particolarmente adatti per i menu del sito web. Se si dispone di un sito web con un sacco di sezioni e sottosezioni al suo interno, con un menu ad albero fornisce agli utenti un modo intuitivo per navigare sul suo sito web. Il markup HTML per un menù ad albero prevede normalmente le liste, con ogni elemento della lista che contiene un elemento di ancoraggio HTML collegamento a una pagina o un sito particolare. Molti siti usano anche Cascading Style Sheet e il codice JavaScript per migliorare l'aspetto e la funzionalità del menu ad albero.

contenuto

Quando si progetta un menu ad albero, gli sviluppatori hanno bisogno di catalogare le varie sezioni di contenuto all'interno di un sito. Per esempio, un sito di vendita di prodotti potrebbe avere sezioni per ciascun tipo di prodotto, con ulteriori sottosezioni all'interno di questi per dividere i prodotti in categorie. A volte, gli sviluppatori Web utilizzano le sottodirectory per organizzare i contenuti del sito, nel qual caso ogni directory potrebbe corrispondere a un elemento di livello superiore all'interno del menu ad albero. Ogni voce del menu alla fine sarà un link HTML, come nel seguente codice di esempio:
<a href="clothing/"> Abbigliamento </a>

Questo codice si collega a una cartella denominata "abbigliamento", che si trova nella directory root del sito. Dal momento che nessuna pagina è indicato, il link aprirà la pagina indice in quella directory. All'interno della sezione vestiti del menu dell'albero, articoli potrebbero collegare a pagine particolari, come segue:
<a href="clothing/trousers.html"> Pantaloni </a>

elenchi

menu ad albero HTML normalmente coinvolgono liste. Il seguente markup esempio illustra un menu usando liste non numerate:
<Ul>
<Li> <a href="clothing/"> Abbigliamento </a> </ li>
<Li> <ul>
<Li> <a href="clothing/trousers.html"> Pantaloni </a> </ li>
<Li> <a href="clothing/jackets.html"> Giacche </a> </ li>
</ Ul> </ li>
<Li> <a href="gifts/"> regalo </a> </ li>
<Li> <ul>
<Li> <a href="gifts/food.html"> alimentari </a> </ li>
<Li> <a href="gifts/novelty.html"> oggetti novità </a> </ li>
<Li> <a href="gifts/dvds.html"> DVD </a> </ li>
</ Ul> </ li>
</ Ul>

Questo menu contiene due sezioni principali per l'abbigliamento e regali. All'interno di ognuno di questi sono ulteriori voci di elenco. Ogni elemento della lista può contenere un altro elenco, quindi per i siti complessi, un menù ad albero può coinvolgere diversi livelli di profondità. Facendo clic su un elemento di primo livello avrà l'utente alla homepage quella sezione del sito, mentre si fa clic un particolare articolo li porterà ad una pagina specifica all'interno di una sezione.

Stile

La maggior parte dei siti utilizzano fogli di stile CSS per lo stile loro menu. All'interno del codice CSS per un sito, gli sviluppatori possono dettare vari aspetti della comparsa del menu, compreso il layout e le caratteristiche visibili di ogni elemento. I browser Web spesso mostrano elenchi puntati su voci di elenco per impostazione predefinita, che molti sviluppatori scelgono di non visualizzare. Il seguente codice di esempio CSS lo dimostra:
ul {list-style-type: none; }

Per scegliere uno stile particolare proiettile, il codice si applica quanto segue:
ul {list-style-type: square;}

Gli sviluppatori possono opzionalmente aggiungere attributi di classe per le liste a vari livelli all'interno di un menu ad albero, adattando il CSS a ciascuno di questi.

Scripting

Molti siti web utilizzano funzioni JavaScript per migliorare l'interattività con menu ad albero. L'utilizzo di questi, gli sviluppatori possono specificare che alcune voci non devono essere visibili per l'utente inizialmente. Ad esempio, facendo clic su un elemento della lista di livello superiore potrebbe causare sue sottosezioni a comparire in modo dinamico. funzioni JavaScript possono utilizzare la visualizzazione o la proprietà di visibilità di un elemento a dettare se il browser dovrebbe mostrare o nascondere. Il codice seguente illustra l'impostazione di un elemento dell'elenco per essere nascosto:
element.style.visibility = "hidden";

La seguente alternativa utilizza la proprietà di visualizzazione:
element.style.display = "none";