|
Ci sono davvero mille fantastici modi di realizzare un menu in Joomla! vediamo stavolta un modulo che crea un effetto cosiddetto fisheye tipico di Macintosh. Vi presento quello che secondo me funziona meglio allo scopo...
Il modulo si chiama mod_fisheye_menu_camp26, è prodotto da http://www.camp26.biz, si trova nella JED, ma io vi consiglio di scaricare quello che trovate qui nel mio sito, che è una versione che ho modificato raddoppiando le icone inseribile, portandole a 20. Nel modulo originale erano 10 e in qualche caso potevano essere insufficienti.
Questo modulo ci permetterà di inserire in un nostro sito Joomla! un menu ad icone assai grazioso, con un effetto di ingrandimento al passaggio del mouse tipicamente definito ad occhio di pesce.
Una volta scaricato nel nostro computer come al solito lo installiamo cliccando su Estensioni e poi su Installa/disinstalla e infine su sfoglia e poi su Carica file & Installa.
Quindi andiamo in Estensioni/Gestione moduli cerchiamo ed apriamo il modulo tipo mod_fisheye_menu_camp26. Sulla destra andiamo adesso ad impostare i parametri di configurazione del modulo.
Nel primo box Suffisso classe CSS modulo potremo come al solito, qualora ci servisse, inserire il prefisso come potete leggere in questo mini tutorial.
In Include JQuery lasciamo il check box impostato su Si. Lo metteremo invece su no in certi casi, qualora JQuery sia stata già caricata da qualche altra estensione. Di default sapete che Joomla include invece mootools per gli effetti speciali.
In FishEye Menu Align decidiamo l'allineamento del nostro menu.
In Menu Text Font Color andremo ad inserire il codice esadecimale per il colore della scritta che apparirà sotto ad ogni icona delle voci di menu, mentre in Menu Text Font Size stabiliremo in pixel la dimensione dei caratteri della stessa scritta.
In Width of Icon inseriremo in pixel la dimensione che dovranno assumere le icone a riposo.
In Maxwidth of Icon inseriremo invece la dimensione massima che le stesse icone avranno al passaggio del mouse.
In Proximity inseriremo invece, sempre in pixel, il valore dal quale il puntatore del mouse comincerà a produrre l'effetto di ingrandimento sulle icone. Per cominciare io lascerei questi tre valori di default e andrei a provare il modulo attivandolo.
Ovviamente questo modulo deve essere pubblicato in una posizione nel nostro template che abbia un sufficiente sviluppo in senso orizzontale.
Questi erano i parametri generali validi per tutte le icone. Adesso impostiamo i parametri della prima delle venti icone disponibili.
In Menu 1 Status decidiamo se abilitare o meno la voce di menu, così come in un qualsiasi altro menu di joomla.
In Url for Menu 1 incolleremo l'indirizzo della pagina web che vogliamo far apparire. Il modulo accetta anche url relative, quelle tipiche generate dalle voci di menu che puntano a pagine interne del nostro sito e che iniziano con index.php?option=com_c.... ecc.
In Menu 1 image andremo a scegliere l'icona da assegnare a questa voce di menu. Le icone vanno inserite nella cartella
/modules/mod_fisheye_menu_camp26/fisheye_menu/images
e hanno dimensione 128x128 pixel.
In Text for Menu 1 scriveremo la frase che al mouse over apparirà sotto a questa icona e il cui colore e dimensione avevamo stabilito nei parametri soprastanti.
Infine, in Menu 1 Target, stabiliremo se aprire la nuova pagina nella stessa o in altra finestra, funzione utile soprattutto se linkiamo altri siti.
E' tutto. Ripeteremo le impostazioni per tutte le voci che ci servono e che sono 20, come abbiamo già detto. Potremo personalizzare facilmente il modulo anche solo inserendo le nostre icone dentro la cartella che abbiamo visto sopra. Per ottenere un buon risultato è importante inserire immagini in formato.gif o .png con lo sfondo trasparente, tutte delle stesse dimensioni e quadrate. Diciamo che il valore di quelle di default 128x128 va assai bene.
Non ho riscontrato particolari malfunzionamenti di questo modulo che però manifesta qualche incompatibilità. Per esempio ho notato che va in conflitto con altre estensioni che utilizzano anch'esse JQuery, come è normale che sia quando sono presenti troppi effetti di animazione in una stessa pagina. Oppure può accadere che il modulo non si sviluppi come si deve in altezza e questo è quasi sempre un problema risolvibile a mezzo dei css come vedremo nel forum, se a qualcuno accadesse. Postate un link al sito col problema per facilitare il lavoro di chi vi vuole aiutare. Ma nella maggior parte dei templates free questo modulo si inserisce a meraviglia.
Qui potete vedere una demo del modulo in azione.
|
