In csszengarden.com i migliori web designer del mondo hanno dimostrato che si possono ottenere dei bellissimi template diversissimi uno dall'altro con il semplice uso dei fogli di stile. Questo sito vuol dimostrare che altrettanto è possibile fare adattandoli a Joomla!

Mercoledi, 26 luglio 2017
 
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 humspm.com                    体彩中心上班怎么样》重庆福彩中心招聘》长沙福彩中心招聘:美报告渲染解放军军力:远征作战能力大大增强 - 湖北11选5推荐号码,甘肃11选5号码遗漏,陕西11选5号码推荐 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

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