Non serve alcuna estensione particolare, come moduli o plugin, per avere un menu Joomla! con sottovoci. Il risultato è possibile raggiungerlo solo con codice CSS e niente altro. Vediamo come fare.
Creare il menu
Il primo passaggio è quello di creare il menu nell'area di amministrazione di Joomla!
Menu ⇒ Gestione ⇒ Nuovo Menu.
Nei due campi di testo - Titolo e Tipo menu - scrivere rispettivamente:
- Il Titolo del menu da visualizzare nella barra amministrativa
- Nome di sistema del menu
Salvare il menu e portarsi nella lista dei menu creati.
Popolare il menu con voci e sottovoci a proprio piacimento.
Creare il modulo del menu
Se nelle precedenti versioni di Joomla!, una volta creato un menu, era automatica la creazione del modulo ad esso associato, già da qualche tempo il modulo deve essere creato.
Nell'area amministrativa portarsi in Estensioni ⇒ Menu ⇒ Nuovo.
Nella parte superiore della pagina è riportato: Seleziona un tipo di modulo.
Cliccare su Menu. Compilare i campi di testo, inserendo il titolo del modulo. Scegliremo, per una maggiore comodità, un nome che ci riconduca velocemente al menu appena creato.
Poco più in basso, troviamo 4 select ed un pulsante di scelta.
Selezionare, tra quelli presenti, il menu che ci interessa. Per esempio "Menu Principale". Le altre select possiamo lasciarle così come sono. Prestare attenzione alla scelta Mostra sotto-voci di menu. Deve essere impostata su SI.
La scelta "SI", si commenta da sola. Ci consente di visualizzare le sottovoci di un link di menu, se presenti.
Per impostazione predefinita, viene visualizzato il titolo del modulo. Scegliere NO.
Selezionare la posizione, tra quelle configurate nel file templateDetails.xml, in cui il modulo apparirà. Salvare e chiudere il modulo.
Se è stato popolato il menu con le sue voci e sottovoci, nel sito appariranno tutte sformattate perchè non abbiamo ancora scritto nulla nel foglio di stile.
Il codice HTML del menu
Il codice HTML del menu si presenta come il seguente:
<nav class="navigation" role="navigation">
<div class="moduletable">
<ul class="nav menu">
<li class="item-101 default current active"><a href="/">Home</a></li>
<li class="item-102"><a href="#">Flyout Menu</a>
<ul>
<li><a href="#">Sottovoce 1</a></li>
......................
</ul>
</li>
<li class="item-103"><a href="#">Mega Menu</a>
....................
</div>
</nav>
Il codice CSS del menu
Passiamo adesso alla scrittura del codice CSS, come di seguito riportato.
.navigation{
clear:both;
text-align:left;
margin:0 0 35px;
background:#f0f0f0;
position:relative;
z-index:10;
}
.navigation ul ul { display: none; }
.navigation ul li:hover > ul { display: block; }
.navigation ul ul impostato su display: none; serve nel momento in cui apriamo la pagina del browser. Il sottomenu non deve vedersi.
.navigation ul{
padding:0;
position:relative;
list-style:none;
}
.navigation ul:after {
content: "";
clear: both;
display:block;
}
Dovendo posizionare le voci di menu l'una di fianco all'altra, assegneremo:
.navigation ul li {float: left}
.navigation ul li a {
color:#545454;
display:block;
text-decoration:none;
padding:0 25px;
height:50px;
line-height:50px;
}
.navigation ul li a:hover {color:#666;}
Con quest'ultima dichiarazione, termina la formattazione delle voci di menu "principali". Passiamo adesso alle sottovoci.
.navigation ul ul {
background:#f0f0f0;
padding:0;
position:absolute;
top:100%;
width:200px;
}
.navigation ul ul li {
float:none;
position:relative;
}
.navigation ul ul li a{
height:35px;
line-height:35px;
padding:0 15px;
}
.navigation ul ul li a:hover{text-decoration: underline;}
Personalizzare le voci con colori e dimensioni font differenti, diventa davvero un gioco.
Con poche e semplici righe di codice CSS, senza aver installato nessuna estensione e senza codice JavaScript, abbiamo ottenuto un menu perfettamente funzionante.