Inserire immagini nelle voci menu di Joomla!

Un elenco con immagini nelle voci di menu solitamente viene realizzato attraverso una lista i cui punti vengono sostituiti da piccolissimi files .gif, posizionati come background; in presenza di un sito web statico non ci sono problemi in quanto basta creare una classe per ogni voce ed apparirà l'immagine associata nella pagina html. In presenza di un sito dinamico realizzato con Joomla!, invece, la procedura per realizzare pagine e menu è leggermente diversa in quanto vengono generate dinamicamente. Da questo si evince che non si possono creare classi personalizzate per voci di menu da inserire nel sito.

Fatta questa premessa, vedremo come Joomla! facilita in maniera eccelsa la creazione di menu associando ad ogni voce una immagine differente, dando un aspetto simpatico al risultato finale. Requisito minimo per poter ottenere quanto prefissato, è la conoscenza dei CSS e dell'HTML.

Realizzare le immagini per il menu

Il primo passaggio, ovviamente, deve essere quello di realizzarsi le immagini o di trovarle in giro per la rete. Lo step successivo è quello di uplodarle via FTP nella cartella immagini di default di Joomla!, vale a dire: /images/stories.

Per quanto riguarda l'esempio realizzato, è stato modificato un menu già esistente nel template di default di Joomla!; è possibile anche realizzare un menu ex-novo e comunque il risultato non cambierebbe. 

Diamo per scontato che adattiamo alle nostre esigenze il menu "Risorse" di Joomla! 1.5.9. Entrare nell'area di amministrazione ed individuare il menu: Menu → Risorse.

Cliccare su ogni singola voce che compone il menu e cambiarla, scrivendo il link che apparirà nel frontend. Rimanendo nella pagina di ogni voce del menu, portarsi nella parte destra - Parametri Standard - e scegliere dalla select l'immagine precedentemente uplodata via FTP nella cartella /images/stories da associare alla voce di menu sulla quale stiamo operando. Di seguito una immagine di esempio:

Stessa procedura per tutte le altre voci. Fatti questi passaggi, salvare di volta in volta e chiudere il menu quando abbiamo terminato.

Gestione modulo "Risorse"

I menu di Joomla!, per poter essere visualizzati, vengono gestiti dai moduli associati ai menu stessi in fase di creazione. Portarsi in Estensioni → Gestione moduli → Risorse

(Ricordo che "Risorse" è il menu di default installato con Joomla!). Possiamo spostarci direttamente nella parte destra - Parametri - della pagina; qui troviamo 3 pannelli a scomparsa, il primo dei quali è Parametri modulo. Esso contiene delle impostazioni di configurazione attraverso le quali settare il menu; prenderemo in esame quelle che ci interessano.

Parametri modulo

• Nome menu: nome del menu che è stato assegnato in fase di creazione;
• Stile menu: tra le varie scelte, selezioniamo "Legacy - Lista Flat";

Per quanto riguarda il suddetto pannello "Parametri modulo" sono sufficenti queste 2 voci.

Parametri avanzati

In questo pannello, per una maggiore personalizzazione del menu, possiamo settare 2 sole voci:

• Suffisso classe CSS menu: un suffisso da applicare alla classe CSS della voce di menu;
• Suffisso classe CSS modulo: un suffisso da applicare alla classe CSS del modulo. Questo permette uno stile individuale del modulo.

Altri Parametri

Nel terzo ed ultimo pannello non resta che da settare gli ultimi parametri:

• Mostra immagini menu: ovviamente spunteremo si;
• Allineamento immagini menu: scegliere se posizionare le immagini a sinistra o destra del link testuale;
• Link immagini menu: Link sulle immagini invece che sul testo. L'immagine dev'essere selezionata nella voce di menu;

Per tutto il resto, possiamo lasciare le altre opzioni così come sono. A questo punto possiamo dire che il notro menu dovrebbe essere pronto ma... se lo lasciassimo in questo modo vedremmo i soliti punti elenco accanto ad ogni immagine. Ovviamente, adesso, si deve mettere mano al codice CSS. La formattazione, a dire il vero, è molto semplice. Basta semplicemente dichiarare quanto segue:

ul{list-style-type:none;} 

Colore del link ed altre formattazioni, le lasciamo al gusto personale di ognuno di noi.

Se volessimo eliminare anche il bordo blu di default che si crea intorno alle immagini linkate, basta scrivere:

a img{border:none;} 

Adesso possiamo dire che abbiamo terminato davvero e possiamo vedere una immagine di un menu di esempio dalla figura sottostante:

Alla prossima.