Chi pensa che un CMS non possa avere un design gradevole ed originale non conosce Joomla! Qualsiasi template può essere adattato e fatto funzionare con Joomla!

Giovedi, 17 aprile 2014
 
Home Articoli Menù con immagini rollover
Menù con immagini rollover

Come realizzare un menù con immagini rollover in Joomla ?

Per effetto rollover si intende come è noto, il cambio dell'immagine al passaggio del mouse sopra il menù, ad evidenziare che si tratta di un link cliccabile. Dopo aver trattato dell'inserimento di piccole icone nel menù in questo articolo vediamo adesso di affrontare l'inserimento di immagini nei nostri menù, con quel gradevole effetto rollover che renderà le nostre voci cliccabili simili a pulsanti. Per far questo utilizziamo un modulo realizzato da Emanuele Ferrarini un utente del forum di joomla.
Il modulo si chiama Imagemenu e lo puoi scaricare da qui.

 

Vediamo adesso in questo tutorial come configurare il modulo in un paio di modi ma devo dire che il modulo stesso è molto versatile e può essere utilizzato in molte altre maniere. Intanto, dopo averlo scaricato nel nostro computer lo installiamo dal pannello di controllo di Joomla! da Estensioni e poi Installa/Disinstalla. Quindi caricheremo il nostro modulo. Al termine comparirà il messaggio che è stato correttamente installato. Prima di andare a configurarlo dobbiamo andare in Menu e quindi in Gestione menù dove creeremo il menù da associare al modulo Imagemenu.

Creare il menù

imagemenu1

 

Si presti attenzione al nome che mettiamo nel box Tipo menu perchè ci servirà in seguito. Ricordo che deve essere un nome univoco, che non deve quindi esser dato a nessun altro menù, e che deve essere scritto senza spazi.  Creato che abbiamo il nostro nuovo menù dobbiamo realizzare le singole voci di menù e quindi associarle ad una immagine, che ci saremo procurati o che avremo realizzato noi con un programma di grafica. A questo punto metteremo le immagini dentro la cartella images/stories di Joomla! e andremo  a creare le voci di menù associando a ciascuna voce una della immagini che abbiamo inserito scegliendola nei Parametri-sistema  quando creiamo la voce di menù, nel box a discesa. Mettiamo che il nostro menù sia composto da tre voci.  Dovremo avere tre immagini che chiamiamo image1.jpg , image2.jpg e image3.jpg e altre tre che chiamiamo image1_over.jpg,  image2_over.jpg e image3_over.jpg , sempre dentro la cartella images/stories di Joomla!. Queste ultime tre sono quelle che il modulo imagemenu andrà a prendersi quando passeremo sopra alla voce di menù con il mouse.

 

Configurare il modulo

 

imagemenu2nuova

Andiamo quindi adesso in Estensioni e poi su Gestione moduli a configurare il nostro modulo. Individuato, lo apriamo cliccandoci sopra, vedremo sulla destra i parametri da configurare.  Lasciamo su si la scelta per l'effetto rollover. Nel suffisso ci mettiamo la parte del nome che abbiamo aggiunto alla seconda immagine rispetto alla prima e quindi _over. In Colonne e Righe le colonne e le righe di cui abbiamo bisogno e in Menu il nome univoco del menù che abbiamo creato prima che è imagemenu.  Nella larghezza e altezza possiamo mettere dei valori che forzeranno la dimensione delle immagini. Ma se le  immagini sono della giusta dimensione possiamo lasciare tutto in bianco. E' possibile inserire anche il suffisso modulo nei parametri avanzati allo scopo di far prendere la formattazione degli altri moduli menù del sito. Quindi  nel  mio caso inserirò in quel campo _menu dovendolo utilizzare nel template rhuk_milkyway e volendo fare assumere anche a questo modulo i caratteristici bordi arrotondati

Potete vedere in questa demo il modulo imagemenu in azione.

 

Creare un menù con immagini rollover da inserire in una pagina di Joomla!

 

imagemenu3

 

Adesso che abbiamo creato un classico menù con immagini rollover posizionato normalmente sulla colonna sinistra o destra del template proviamo a fare una cosa un pò diversa inserendo una immagine composta con diverse immagini oppure anche composta da una sola immagine sezionata in diverse parti. Per ottenere questo non dovremo fare altro che seguire le istruzioni per creare un modulo. Se lo abbiamo già fatto possiamo duplicarlo per crearne un altro. Quindi settare i parametri che nei casi delle demo sono per la tabella di 2 colonne e 2 righe. Poi dovremo avere l'accortezza di pubblicarlo in una posizione che creiamo in quel momento scrivendola direttamente dentro il box delle posizioni del modulo.  Mettiamo che scriviamo lì dentro centrale. Non ci resta infine che pubblicarlo nella pagina dove vogliamo che appaia con il classico codice loadposition centrale messo tra le parentesi graffe. Questo modulo funziona proprio a meraviglia, è molto versatile, facile da settare e si visualizza bene con ogni browser non utilizzando script particolari od oggetti flash. Puo essere duplicato ed inserito anche in diverse copie nella stessa pagina esattamente come tutti gli altri moduli menù.

Se nelle vostre immagini compare un fastidioso bordo, che con internet explorer è viola/blu, basterà che incolliate questo codice nel vostro css. Solitamente il file si chiama template .css e sta dentro la cartella CSS del vostro template:

img a {
border: none;
}

Nota del 6 luglio 2009: questo modulo aveva in origine il problema del mancato riconoscimento di assegnazione di un modulo o di un template ad una voce di menù. Adesso il problema è stato risolto dall'autore e la versione che scaricate da qui funziona alla perfezione.

Nota del 27 marzo 2010: non mi ero accorto che con la modifica di cui sopra non è più possibile inserire in imagemenù url esterni al sito, essendo che ci aggiunge in fondo gli itemid. In attesa di risolvere metto nell'area download anche il modulo prima versione.
Edit 17 aprile: se volete far aprire le voci di questo modulo vecchia versione in una nuova finestra del browser scaricate questo file dezippatelo e sovrascrivete il vostro file in questo  percorso: modules/mod_imagemenu/helper.php

Nota del 04 luglio 2010: se con php 5.3 il modulo smette di funzionare e vi segnala un errore dovete aprire il file helper.php e cercare questa stinga circa a riga 35:

if (ereg ("menu_image", $a))

e sostituirla con questa:

if (preg_match ("/menu_image/", $a))

tonicopi

 
freccia lilla