Aggiungere e formattare una voce di menu "Separatore" in Joomla!

Prima di passare all'argomento del tutorial in oggetto, sarebbe bene, per chi lo volesse, una lettura sulla gestione e creazione di una voce di menu in Joomla!. Solitamente ci si preoccupa, in maniera quasi "meccanica", della creazione di un articolo e del relativo item del menu per poter reperire l'articolo stesso.

Cerchiamo di dare una ripassata ai diversi tipi di menu che Joomla! mette a disposizione. Lo si può vedere facendo il Login come amministratore e portandosi sulla voce orizzontale superiore "MenuMenu principaleNuovo", oppure un altro nome di menu, a seconda dove ci sono già alcune voci. Espandendo la voce "Articoli", appaiono altre tipologie di sottovoci, tra cui:

Creare una voce di menu Separatore in un menu verticale

Bene, dopo questa carrellata di tipi di menu, entriamo nello specifico ed occupiamoci della voce Separatore. Come descritto più su, e come è facile intuire dal nome che è stato assegnato, questo tipo di voce non crea nessun link, non ha nulla a che vedere con le tipologie illustrate bensì divide semplicemente due voci di menu oppure un gruppo di voci di uno stesso menu.Per meglio comprendere la sua funzione, ho preparato una immagine di un menu, all'interno del quale c'è una voce di menu Separatore.

Voce di menu separatore
Voce di menu separatore

Come è possibile vedere dall'immagine a sinistra, tra la voce "Terzo Link" e "Quarto Link" è stata inserita una voce di menu Separatore. Nella fase di creazione di tale voce si deve semplicemente inserire il testo (nell'esempio una serie di trattini "-----") oppure scegliere una immagine. Fin qui nulla di complicato. Diverso sarebbe, invece, l'uso di una voce Separatore in un menu orizzontale con sottovoci che appaiono al passaggio del mouse.

Creare una voce di menu Separatore in un menu orizzontale a discesa

La maggior parte dei post che ho avuto modo di leggere nei fari forums, riguarda la formattazione di una voce di menu Separatore che si discosta totalmente dalle altre voci per quanto riguarda la presentazione a video. Va ricordato che a tale voce di menu non è possibile associare nessun link e solitamente la si vorrebbe includere nel menu solo per far apparire le sottovoci quando si passa con il mouse scatenando l'effetto "mouse-hover". Questa esigenza scaturisce dal fatto di non avere un articolo da associale alla voce orizzontale superiore. Va detto anche che un menu del genere richiede l'installazione di un modulo "ad hoc" in quanto richiede script JavaScript; ce ne sono tantissimi in giro, in primo luogo nella sezione delle estensioni di joomla.org. Apparentemente non ci sarebbe molto da fare se non arrendersi o non utilizzare tale tipologia voce.

Altri metodi che vengono suggeriti sono quelli di creare una voce di menu di tipo "Link esterno", nel cui campo URL sarebbe da scrivere il simbolo "#" e tutto funziona. Al passaggio del mouse... effettivamente appare la sottovoce.

Non mi pare una buona idea, pur rispettando e non condividendo il lavoro di chi adotta tale tecnica. Se ci si prendesse la briga di analizzare il codice html prodotto dal menu, si potrebbe intervenire sul codice CSS in modo tale da far assumere lo stesso aspetto delle altre voci superiori, anche all'item Separatore.

Realizzare un menu di esempio con voce Separatore

Poniamo il caso di avere un menu con 3 voci:

  1. Home
  2. Voce menu separatore
  3. Secondo link

La seconda voce vogliamo che sia vuota e che debba avere una "voce figlio". Il risultato sarebbe uguale all'immagine riportata di seguito:

Voce menu separatore non formattata
Voce menu separatore non formattata

Non credo si possa presentare un menu di navigazione del genere; ma... se analizzassimo l'html  della pagina? Troveremmo, forse, del codice che ci potrebbe venire in aiuto:

< ul class=" menutop " >
< li id=" current " class=" active item1 "><a href="/"><span>Home< / span >< / a >< / li >
< li class=" parent item143 ">< span class=" separator ">< span >Voce Menu Separatore< / span >< / span >
< ul >
< li class=" item157 "><a href="/voce-menu-separatore/sottovoce-1.html">< span >Sottovoce 1< / span >< / a >< / li >
< / ul >
< / li >
< li class=" item151 "><a href="/secondo-link.html"><span>Secondo Link</span></a>< / li >
< / ul >

Dobbiamo individuare il codice relativo alla voce di nostro interesse ed intervenire, attraverso il codice CSS, su di esso. Estrapoliamo il codice:

< li class=" parent item143 ">< span class=" separator ">< span >Voce Menu Separatore< / span >< / span >
< ul >
< li class=" item157 "><a href="/voce-menu-separatore/sottovoce-1.html">< span >Sottovoce 1< / span >< / a >< / li >
< / ul >
< / li > 

Agendo sulla classe "separator", possiamo rendere uniforme la formattazione della nostra voce di menu. Vediamo il codice CSS:

li.parent span.separator span{
display: block;
float: left;
margin: 0 2px 0 0;
z-index:50 !important;
cursor:pointer;
white-space: nowrap;
height: 35px;
line-height: 35px;
padding: 0 16px;
font-weight:bold;    
font-size:12px;
color:#fff;
background-color:#480405;
}

Dopo aver scritto le righe di codice qui su riportate, il risultato è nettamente differente e molto più accettabile. Infatti l'immagine riportata di seguito mostra quanto ottenuto:

Voce menu separatore formattata
Voce menu separatore formattata

Come si può notare, l'item di menu "Voce Menu Separatore" adesso è identico a tutte le altre voci. Molto meglio rispetto alla stessa, senza nessuna dichiarazione CSS.