Imagemenu per joomla 2.5

Imagemenu è adesso disponibile anche per la nuova versione di Joomla! 2.5. Qui avevo scritto la recensione per Imagemenu per la 1.5. Vediamo adesso dove scaricare e come impostare il modulo imagemenu per la nuova versione di Joomla!

Il modulo si scarica da qui. Una volta scaricato si installa come al solito dal pannello di amministrazione di Joomla! da Estensioni/Gestione Estensioni/ Installa selezionando con Sfoglia... il file zippato nel nostro computer e cliccando infine su Carica & Installa.

Creare il menu

Prima di andare a configurare il modulo dobbiamo creare il menu che poi gli assegneremo. Andiamo quindi in Menu > Gestione menu > Nuovo menu e assegniamo un titolo, un tipo e una descrizione a quello che sarà il nostro nuovo menu a immagini. Ricordo che nel campo Tipo menu andrà inserito un nome senza spazi o caratteri strani e dovrà essere univoco e quindi utilizzato solo per questo menu. Ovviamente se abbiamo creato questo menu per utilizzarlo con il modulo imagemenu dobbiamo aver creato prima anche le immagini, due per ogni voce di menu se vogliamo ottenere l'effetto rollover. Ciò va fatto con un programma di grafica e dovranno avere una estensione .gif .png o .jpg.  Supponendo di chiamare myimage.jpg l'immagine che va abbinata alla voce di menu dovremo aggiungere un suffisso alla seconda immagine, quella che apparirà quando andremo sopra alla prima con il puntatore del mouse. La seconda immagine possiamo chiamarla myimage_over.jpg, per esempio, dove la parte _over rappresenta il suffisso. Ne dovremo creare tante coppie quante sono le voci di menu che desideriamo. Inseriamo le immagini dentro alla cartella images nella root di Joomla! o in una sottocartella al suo interno (purchè tutte nella stessa cartella). 

Adesso che abbiamo a disposizione le immagini possiamo creare le singole voci di menu che lo compongono da Menu > imagemenu > Nuova voce di menu. Nei parametri a destra Opzioni tipo link della voce di menu andremo a selezionare l'immagine precedentemente caricata. Così ripeteremo l'operazione per tutte le voci del nostro menu. Adesso è arrivato il momento di andare a configurare il mostro modulo imagemenu.

Configurare imagemenu

Andiamo allora in Estensioni > Gestione moduli, cerchiamo ed apriamo il modulo Imagemenu. Nei parametri del modulo che troviamo  a destra andremo ad impostare i diversi valori:

In Effetto Rollover metteremo Si dato che stiamo appunto facendo un menu che abbia  quetso effetto di cambio immagine quando passiamo con il mouse sopra la voce di menu.

In Active impostiamo sul Si se vogliamo che che la voce di menu cliccata mostri la seconda immagine utilizzando la pseudoclasse active.

In Menu selezioniamo il menu che abbiamo prima fatto.

In Suffisso scriviamo il suffisso che avevamo prima assegnato alle immagini che devono entrare in azione all'over del mouse.

In Colonne e Righe mettiamo i valori con i quali vogliamo mostrare il nostro menu.

In Larghezza e Altezza metteremo le dimensioni che daremo alla tabella che conterrà il nostro menù. Tali dimensioni forzeranno la dimensione delle immagini.

In Cellpadding e i Cellspacing imposteremo tali valori sempre per la medesima tabella, qualora volessimo distanziare fra di loro le immagini che compongono il nostro menu.

In Opzioni avanzate potremo eventualmente inserire Un Suffisso Classe CSS modulo, se ci serve, come al solito.

Decidiamo infine in che posizione e in quali pagine attivare il modulo, se mostrare o no il titolo e ricordiamoci di pubblicarlo.

Andremo finalmente in frontend a gustarci il  nostro nuovo simpatico menu con immagini rollover.

Qui potete vedere una demo del modulo imagemenu in azione sulla 2.5.

babbo natale

Su questo sito usiamo i cookies, anche di terze parti. Navigandolo accetti.