Creare menu orizzontali con i CSS!!!

I menu orizzontali sono un sistema eccellente per creare menu di Categorie o Pagine, evidenziando specifiche aree di interesse all'interno del tuo sito. Molti web designer inseriscono un menu orizzontale appena sotto l'header per catturare l'attenzione del visitatore.

I menu orizzontali vengono creati tramite le liste HTML, Sì, pur essendo orizzontali invece che verticali, rimangono sempre delle liste. Gli stili CSS permettono infatti di posizionare la lista su una sola riga invece che su righe separate. Dal momento che i menu orizzontali sono semplici lista su una sola riga orizzontale, prendiamo in esame una lista.

Creare un menu orizzontale...

Di seguito c'è una semplice lista per il nostro menu orizzontale. E' consigliabile fare in modo che la lista sia corta e composta da pochi elementi, altrimenti si potrebbero verificare errori nel layout. Abbiamo incluso la lista in un DIV chiamato navmenu. 

 <div id="navmenu">
 <ul>
 	<li><a href="<?php echo get_settings('home'); ?>">HOME</a></li>
 	<li><a href="wordpress/ricette/">RICETTE</a></li>
 	<li><a href="wordpress/viaggi/">VIAGGI</a></li>
 	<li><a href="http://www.wordpress.org">WORDPRESS</a></li>
 </ul>
 </div>

Come puoi vedere, all'interno della lista abbiamo incluso un marcatore PHP per la Home Page e diverse categorie e un link al sito di WordPress. La lista apparirà in questo modo, nella sua forma più semplice:

  • HOME
  • RICETTE
  • VIAGGI
  • WORDPRESS

Puoi anche usare il marcatore

È anche possibile utilizzare wp_list_cats() per visualizzare tutte le categorie. Se vuoi mostrare solo le categorie che hanno ID 1, 3, 4, e 5 ed escudere le altre, la lista apparirà così: 

 <div id="navmenu">
 <ul>
<li><a href="<?php echo get_settings('home'); ?>">HOME</a></li> 
 <?php list_cats('FALSE', '',
                 , , TRUE, FALSE, 
                 FALSE, TRUE, TRUE, 
                 FALSE, , '', , 
                 , , '2,6,7,8,9,10,11,12', 
                 FALSE); ?>
  <li><a href="http://www.wordpress.org">WORDPRESS</a></li>
 </ul>
 </div>

Il posto migliore per inserire la lista è proprio sotto l'header. Se usi WordPress v1.5, apri il file header.php del tuo tema grafico e inclolla il codice alla fine del file, dopo il DIV dell'header DIV e salva le modifiche.

In WordPress v1.2, apri il file index.php e cerca la fine della sezione header e incolla il codice.

Applicare il CSS

Le liste vengono normalmente visualizzate verticalmente, ciascun elemento su una riga. La lista puo anche mostrare un'immagine, un punto o un quadrato prima di ciascuna riga. Nel nostro foglio di stile dobbiamo aggiungere un riferimento a navmenu e il primo passo è quello di rimuovere il punto e settare i margini a zero per l'intera lista. 

 #navmenu ul {margin: 0; padding: 0; 
 	list-style-type: none; list-style-image: none; }

Salva il foglio di stile e ricarica la pagina di test. Se è tutto OK, potrai vedere che la lista ora non ha più i punti e nessun rientro. Ora vogliamo mostrare questa lista su una sola riga. Aggiungiamo un riferimento nel foglio di stile, ai singoli elementi della lista: 

 #navmenu ul {margin: 0; padding: 0; 
 	list-style-type: none; list-style-image: none; }
 #navmenu li {display: inline; }

Siccome si tratta di links, dobbiamo aggiustare la visualizzazione del link. Per il momento aggiungiamo un po' di spazio alla lista in modo da non farli avvicinare troppo, eliminiamo la sottolineatura e facciamo in modo che il link cambi colore quando ci si passa sopra con il mouse. 

 #navmenu ul {margin: 0; padding: 0; 
 	list-style-type: none; list-style-image: none; }
 #navmenu li {display: inline; padding: 5px 20px 5px 20px}
 #navmenu a {text-decoration:none; color: blue; }
 #navmenu a:hover {color: purple; }

Ora possiamo personalizzare la lista 

 #navmenu ul {margin: 0; padding: 0; 
 	list-style-type: none; list-style-image: none; }
 #navmenu li {display: inline; }
 #navmenu ul li a {text-decoration:none;  margin: 4px;
 	padding: 5px 20px 5px 20px; color: blue;
 	background: pink;}
 #navmenu ul li a:hover {color: purple;
 	background: yellow; }

Se è tutto corretto, la lista si presenterà così

<ul style="margin: 0; padding: 0; list-style-type: none; list-style-image: none"> <li style="display: inline; text-decoration:none; margin: 4px; padding: 5px 20px 5px 20px; color: blue; background: pink; font-style:bold">HOME</li> <li style="display: inline; text-decoration:none; margin: 4px; padding: 5px 20px 5px 20px; color: blue; background: pink; font-style:bold">RECIPES</li> <li style="display: inline; text-decoration:none; margin: 4px; padding: 5px 20px 5px 20px; color: blue; background: pink; font-style:bold">TRAVEL</li> <li style="display: inline; text-decoration:none; margin: 4px; padding: 5px 20px 5px 20px; color: blue; background: pink; font-style:bold">WORDPRESS</li> </ul>

Altre informazioni sui menu orizzontali

Ci sono modi differenti per mostrare le liste via CSS. Qui ci sono delle risorse che possono aiutarti a iniziare e a saperne di più sui menu orizzontali

Ultima modifica il 14/11/2006 ore 07:57