PC da ZERO . it - Guida facile per usare il computer

Nella lezione precedente hai visto come personalizzare le singole voci dei menu di una barra orizzontale.
Vediamo ora come eliminare o aggiungere altre voci e sottovoci senza compromettere il codice e quindi la stabilità del template.

MENU A 3 LIVELLI

Il menu in esame riguarda sempre il template "Revolution Church"; che consta di due menu orizzontali.

Le voci che vengono visualizzate, sono il primo livello.
Il secondo livello di voci appare quando ti posizioni sopra la voce "sample page" (ad esempio) o "community events".

Il terzo livello di voci, in questo caso, appare se ti posizioni in seguito sulla voce "sub page #1"

AGGIUNGERE VOCI AI MENU A DISCESA

Per aggiungere un menu a discesa sulla terza voce dei menu, "sample post",
1 - ricopia il codice del template su un elaboratore di codici tipo SciTE (vedi lezione precedente)
2 - individua con il comando "Trova" la parte di codice relativa alla prima barra dei menu del tuo blog
3 - sostituisci il codice:
<li><a href='#'>Sample Post</a></li>
con il seguente codice:
<li><a href='#'>Sample Post</a>
<ul>
<li><a href='#'>Sub Post #1</a></li>
<li><a href='#'>Sub Post #2</a></li>
<li><a href='#'>Sub Post #3</a></li>
<li><a href='#'>Sub Post #4</a></li>
<li><a href='#'>Sub Post #5</a></li>
</ul>
</li>

4 - Ricopia tutto il codice sulla finestra del template online, sostituendolo interamente
5 - clicca su "Salva Modello".

Se vuoi, puoi saltare il passo 1 e 4 modificando il codice direttamente sulla finestra online "Modifica Modello".

Puoi eseguire la stessa cosa con il menu "Blog page".
Sostituendo il codice:
<li><a href='#'>Blog Page</a></li>

con il seguente codice:
<li><a href='#'>Blog Page</a>
<ul>
<li><a href='#'>Sub Blog #1</a></li>
<li><a href='#'>Sub Blog #2</a></li>
<li><a href='#'>Sub Blog #3</a></li>
<li><a href='#'>Sub Blog #4</a></li>
<li><a href='#'>Sub Blog #5</a></li>
</ul>
</li>

AGGIUNGERE MENU DI TERZO LIVELLO

Analogamente, ad ogni menu di secondo livello, potrai aggiungere menu di terzo livello.
Ad esempio, per aggiungere un menu a comparsa "Sub Post #1",
1 - sostituisci il codice:
<li><a href='#'>Sub Post #1</a></li>

con il codice:
<li>
<a href='#'>Sub Post #1</a>
<ul>
<li><a href='#'>Sub Sub Post #1</a></li>
<li><a href='#'>Sub Sub Post #2</a></li>
<li><a href='#'>Sub Sub Post #3</a></li>
</ul>
</li>

e così via per tutti gli altri menu.

Potrai aggiungere uno, due, tre o più menu aggiungendo o togliendo una o più righe di codice comprese tra i tag <li> e </li>

ELIMINARE VOCI DI MENU

Per eliminare voci di menu di terzo livello,
- elimina la riga compresa tra i tag <li> e </li>, compresi quest'ultimi.

Per eliminare le voci di menu di secondo livello,
1 - elimina prima le sue sottovoci ti terzo livello (se ci sono)
2 - elimina poi la voce scelta, compresa tutta la parte di codice che sta tra i tag <li> e </li>, compresi quest'ultimi.

Ad esempio per eliminare la voce "Sub Post #4", da questo codice:
<li><a href='#'>Sample Post</a>
<ul>
<li>
<a href='#'>Sub Post #1</a>
<ul>
<li><a href='#'>Sub Sub Post #1-1</a></li>
<li><a href='#'>Sub Sub Post #1-2</a></li>
<li><a href='#'>Sub Sub Post #1-3</a></li>
</ul>
</li>
<li><a href='#'>Sub Post #2</a></li>
<li><a href='#'>Sub Post #3</a></li>
<li>
<a href='#'>Sub Post #4</a>
<ul>
<li><a href='#'>Sub Sub Post #4-1</a></li>
<li><a href='#'>Sub Sub Post #4-2</a></li>
<li><a href='#'>Sub Sub Post #4-3</a></li>
</ul>
</li>
<li>
<a href='#'>Sub Post #5</a>
<ul>
<li><a href='#'>Sub Sub Post #5-1</a></li>
<li><a href='#'>Sub Sub Post #5-2</a></li>
<li><a href='#'>Sub Sub Post #5-3</a></li>
</ul>
</li>
</ul>
</li>

dovrai cancellare tutta questa parte di codice:
<li>
<a href='#'>Sub Post #4</a>
<ul>
<li><a href='#'>Sub Sub Post #4-1</a></li>
<li><a href='#'>Sub Sub Post #4-2</a></li>
<li><a href='#'>Sub Sub Post #4-3</a></li>
</ul>
</li>