Creare menu con background grafici differenti e CSS sulle singole voci in Joomla! 1.5

Coloro i quali hanno ormai una familiarità con Joomla! 1.5, non dovrebbero avere problemi in merito alla creazione di un nuovo menu da zero; diversamente si rimanda alla lettura dell'articolo sul tema.

Per l'esempio in oggetto è stato creato un nuovo menu che ho nominato "Menu_Varied". E' consigliabile assegnare lo stesso nome anche al modulo che gestisce il menu. Di conseguenza, portandosi nell'area di amministrazione → Gestione Moduli, troveremo il modulo "mod_mainmenu"  anch'esso con nome "Menu_Varied".

Entrando nella pagina di gestione del modulo, come per qualsiasi altra estensione, vanno configurati alcuni dettagli come:

• Titolo;
• mostrare o meno il titolo;
• se attivare il modulo;
• la posizione nella quale deve essere visualizzato ecc...

Nella parte destra della pagina, tra i Parametri, assicuriuamoci che si stia operando con il menu di nostro interesse, come riportato nella figura seguente:

Il Nome del menu deve essere settato su: menu_varied in questo caso;
lo stile del menu deve essere impostato su: Lista.

Salvare il tutto per il momento, e cominciare a popolare il menu normalmente.

Dopo aver aggiunto alcune voci e collegatele a qualche articolo demo, si apra il sito in frontend e si visualizzi il codice html prodotto; al momento non si dia molto peso alla mancanza di stile sulle voci di menu.

Vedremo che il codice potrebbe essere simile al seguente:

<ul id="nome_id">
    <li class="item1"><a href="#"><span>HomePage</span></a></li>
    <li class="item53"><a href="#"><span>Community</span></a></li>
</ul>

Si badi bene che sia il nome_id associato al tag ul che le classi assegnate alle singole voci (item1, item53) non devono essere necessariamente uguali. Le "class=itemxx" sono generate automaticamente da Joomla!)

Preparare le immagini da usare come background

Per quanto riguarda la parte grafica, guardando il menu di partenza nel sito developer.joomla.org, non si deve fare altro che preparare l'immagine di sfondo per il tag ul e tante immagini per il background, colorate in maniera differente,  quante sono le voci del menu stesso. Un esempio è riportato di seguito:

Questa immagine farà da sfondo alla voce con la classe CSS che richiamerà quel background.

Questa, invece, è l'immagine utilizzata per lo sfondo dell'elemento ul.

Il codice CSS per il menu

Arrivati a questo punto, non ci resta che cominciare a formattare il menu; di seguito il codice, accompgnato da commenti,  se necessari.

ul#varied
{
margin:0;
list-style:none;
height:29px;
background:url(../images/menu/bg.png) repeat-x 0 0;
}

All'elemento ul ho assegnato un ID univoco, mediante il pannello dei Parametri avanzati la cui label corrispondente è: ID Tag Menu. E' stata assegnata l'altezza uguale a quella dell'immagine grafica realizzata.

div.content ul#varied li 
{
display:inline;
list-style:none;
border-right:1px solid #999;
height:28px;
margin:0;
float:left;
}

div.content ul#varied li a 
{
background-image:none;
height:29px;
line-height:25px;
color:#fff;
font-weight:bold;
font-size:11px;
float:left;
display:block;
padding:0 15px;
}

Il codice riportato sopra formatta a livello generale tutte le voci. Quello che verrà mostrato adesso, invece, va a formattare ogni singola voce:

div.content ul#varied li.itemXX a{background:url(../images/menu/red.png) repeat-x 0 0;}

div.content ul#varied li.itemXX a{background:url(../images/menu/purple.png) repeat-x 0 0;}

Una volta realizzate tutte le voci del menu dal pannello di amministrazione di Joomla!, si apra la pagina in vista codice e si prenda nota del codice html. Se, come l'esempio precedente, Joomla! produce un codice simile a:

<li class="itemXX"><a href="#"><span>HomePage</span></a></li>

Nel file CSS si deve associare alla classe "itemXX" l'immagine di background che si vuole visualizzare nel sito. Tale operazione va fatta per ogni voce del menu di navigazione.

Per quanto riguarda la voce "attiva", indicante la pagina nella quale ci si trova, il codice CSS è:

div.content ul#varied  li#current a{background:url(../images/menu/grey.png) repeat-x 0 0;}

dove "grey.png" è un'altra immagine di sfondo utilizzata solo e soltanto per lo stato corrente della pagina.

Al termine... ho ottenuto lo stesso risultato, come il menu del sito al quale mi sono ispirato:

Conclusioni

Come si è visto, non serve poi molto per realizzare un menu come quello proposto. Ovviamente, con un pò di fantasia e qualche rigo di codice, si possono ottenere menu di navigazioni molto più accattivanti rispetto a quello mostrato come esempio.

Alla prossima.