Codice HTML per un menu ad albero

contenuto

Quando si progetta un menu ad albero, gli sviluppatori devono categorizzare le diverse sezioni di contenuto di un sito. Ad esempio, un sito di vendita di prodotti potrebbe disporre di sezioni per ciascun tipo di prodotto con sottosezioni aggiuntive al loro interno per suddividere i prodotti in categorie. A volte, gli sviluppatori web utilizzano sottodirectory per organizzare il contenuto del sito, nel qual caso ciascuna directory potrebbe corrispondere a un elemento di livello superiore nella struttura del menu. Ogni voce di menu sarà in definitiva un collegamento HTML, come nel seguente codice di esempio: Abbigliamento

Questo codice collega una cartella denominata "abbigliamento", che si trova nella directory principale del sito Web. Poiché non è indicata alcuna pagina, il collegamento aprirà la pagina dell'indice in quella directory. All'interno della sezione abbigliamento del menu ad albero, gli elementi possono essere collegati a pagine particolari, come segue: Pantaloni

liste

I menu ad albero HTML di solito coinvolgono le liste. Il seguente esempio di selezione mostra un menu che utilizza elenchi non numerati:

• abbigliamento
• • pantaloni
  • Giacche
• Articoli da regalo
• • cibo
  • Articoli novità
  • DVD

Questo menu contiene due sezioni di primo livello per "abbigliamento" e "regali". All'interno di ciascuna di queste voci aggiuntive nella lista. Ogni elemento nell'elenco può contenere un altro elenco per siti complessi, un menu ad albero può coinvolgere diversi livelli di profondità. Facendo clic su un elemento di livello superiore, l'utente verrà indirizzato alla pagina di quella sezione della pagina, facendo clic su un particolare elemento verrà inviata a una pagina specifica all'interno di una sezione.

stile

La maggior parte dei siti usa i fogli di stile nei loro menu. All'interno del codice CSS, gli sviluppatori possono dettare diversi aspetti dell'aspetto del menu, incluso il design, nonché le caratteristiche visibili di ciascun elemento nell'elenco. I browser Web di solito mostrano punti elenco nelle voci di elenco predefinite, che molti sviluppatori scelgono di non visualizzare. Il seguente esempio di codice CSS mostra questo:

ul {list-style-type: none; }

Per scegliere uno stile particolare, il codice sarà il seguente: ul {list-style-type: square;}

Gli sviluppatori possono facoltativamente aggiungere attributi di classe agli elenchi a diversi livelli all'interno di un menu ad albero, adattando il CSS per ognuno di essi.

Scrivere la sceneggiatura

Molti siti Web utilizzano le funzioni JavaScript per migliorare l'interattività con i menu ad albero. Usandoli, gli sviluppatori possono specificare che alcuni elementi non sono inizialmente visibili all'utente. Ad esempio, facendo clic su un elemento nell'elenco di primo livello, l'avvio potrebbe apparire dinamicamente. Le funzioni JavaScript possono utilizzare la proprietà di presentazione o la visibilità di un elemento per indicare al browser di mostrare o nascondere. Il codice seguente mostra la configurazione di un elemento nell'elenco nascosto: element.style.visibility = "hidden";

La seguente alternativa usa la proprietà presentation: element.style.display = "none";