PCdaZERO.it - Guida facile per usare il computer

Acquista o scarica gratis, i libri di "PC da Zero"

CREARE BLOG    >     Aggiungere o eliminare voci dei menu a discesa




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.
01-doppio-menu-orizzontale.jpg - 5,5 KB
Le voci che vengono visualizzate, sono quelle del primo livello.
Il secondo livello di voci appare quando posizioni il puntatore sopra la voce "sample page" (ad esempio) o "community events".
02-menu-principale.jpg - 8,0 KB
Il terzo livello di voci, appare se in seguito, posizioni il puntatore sulla voce "sub page #1" (in questo caso).
03-menu-secondario.jpg - 14,7 KB

AGGIUNGERE VOCI AI MENU A DISCESA

Per aggiungere un menu a discesa sulla terza voce dei menu, "sample post",
1 - individua con il codice relativo alla prima barra dei menu del tuo blog
2a - sostituisci il codice:

<li><a href='#'>Sample Post</a></li>

2b - 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>

3 - clicca su "Salva Modello".
04-menu-a-discesa.jpg - 10,5 KB
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>

05-menu-blog-page.jpg - 10,1 KB

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>

06-menu-e-sottomenu.jpg - 11,8 KB
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 tag.

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>






creareblog-v02-170.jpg - 5,8 KB
Questa lezione è presente nel libro Creare Blog e Siti Web gratis (II ed.)
Clicca qui per leggere tutti gli argomenti
e come ordinare il libro.


Oppure Vai al Video Corso Completo per creare Blog



Link sponsorizzati