Questa è una notizia flash. Per pubblicarla qui o per modificarne il contenuto si accede al Pannello Amministratore di Joomla. Così come tutti gli altri contenuti del sito. Non occorrono specifiche conoscenze per gestire un sito con Joomla!

Venerdi, 24 novembre 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 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 .container{width:960px; margin:0 auto} 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 .header{height:100px; border-top:10px solid #472558; background:url(http://i2.cdn-image.com/__media__/pics/8243/h_bg.gif); overflow:hidden} 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