css Zen Garden

Per  maxi-menu o mega-menu si intendono gli speciali menu a tendina che consentono di inserire al loro interno le voci di menu disposte in multicolonne, nonchè di inserire moduli, molto in voga nei template commerciali. Vediamone uno molto bello, gratuito e molto facile da installare ed usare.

Procuriamoci per prima cosa il modulo che si chiama Maxi Menu CK

Una volta scaricato come al solito lo installiamo cliccando su Estensioni e poi su Installa/disinstalla e infine su sfoglia e poi su Carica file & Installa.

Configurazione

Andiamo quindi in Estensioni/Gestione moduli e lo apriamo per la configurazione.

Decidiamo nei modi usuali in che posizione lo vogliamo pubblicare nel nostro template e a quali voci di menù lo vogliamo assegnare.

Quindi facciamo alcune semplici operazioni di configurazione sui parametri che troviamo a destra. Dobbiamo assegnarli un menù tra quelli che abbiamo già fatto e sono presenti nel nostro sito alla voce Nom du menu. Ma sarà opportuno assegnargli uno specifico menù che andremo a costruire appositamente. Io l'ho chiamato menuck (ho fantasia eh...).

Nella voce Module ID lasciamo pure scritto quello che troviamo di default. Se dovessimo duplicare il modulo per pubblicare un altro menù ricordiamoci di cambiare questo nome nella copia.

Potremo poi inserire un eventuale suffisso nel box Suffisso classe CSS modulo. Qui un articolo dove si illustra il Suffisso classe CSS modulo.

Lasciamo su Oui (si) il pulsante radio nella scelta Utiliser le style CSS du module
(A meno che non vogliate sostituire lo stile di questo modulo con uno di vostro, ma allora dubito che sareste ancora qui a perder tempo con questo articolo e il modulo con il maxi menu ve lo sapreste fare da soli...)

Scegliamo su Orientation du menu se mostrare il menù con stile orizzontale o verticale. (Già, possiamo utilizzare questo modulo anche per le tendine dei menù verticali, che figo! )

Nei Parameters Mootools potremo scegliere diversi effetti per l'uscita delle tendine. Provate e scegliete quello che vi piace di più.

Nella demo potete vedere come apparirà il maxi menu CK, molto carino anche se lo utilizzassimo soltanto come un normale menu a tendina. Vedete che appaiono infatti gli indicatori delle voci che hanno sub-menù, caratteristica che è di notevole importanza per agevolare la navigazione nel sito.

Andiamo adesso in gestione menù e vediamo come impostare le voci per utilizzare le diverse caratteristiche offerte da maxi menu ck.

Assegnare un sotto titolo al titolo della voce di menù

Cosa molto semplice come potete vedere. Basta aggiungere una doppia barra verticale tra il titolo e il sotto titolo.
(Per ottenere la barra verticale con la vostra tastiera dovete tenere premuto il tasto maiuscolo e premere il primo tasto in alto a sinistra).

Far aprire un modulo nel Maxi Menu CK

Per far apparire un modulo al mouse over in una voce del maxi menu bisogna per prima cosa creare una voce di menu di tipo separatore e poi assegnargli come sotto menu una seconda voce, sempre di tipo separatore, dove bisogna inserire l'ID del modulo da mostrare dentro le parentesi quadre in questo modo [modid=112]. Sostituendo il numero 112 con l'ID del vostro modulo.
Individuate l'ID del modulo da mostrare in Maxi Menu CK da Gestione moduli, come potete vedere in questa immagine.

Suggerimento: potete pubblicare il modulo in una posizione non esistente nel vostro template scrivendola dentro il box della scelta della posizione del modulo.

Gestire le multicolonne

Per disporre i sotto menu in colonne multiple basta inserire il numero delle colonne nella voce genitore del Maxi Menù tra parentesi quadre dopo il titolo ed eventuale sottotitolo in questo modo:

Cose Varie||in multicolonne[cols3]

Poi basterà pubblicare le varie voci figlie come sotto menu, introducendo una voce di tipo separatore scrivendo [col] quando vogliamo cambiare colonna.

Personalizzare lo stile

Questo è forse il maggior limite di questo eccezionale modulo. Non ha dei parametri che ci consenta di personalizzare i colori con facilità. Occorre por mano ai css. Avverto a tal proposito che i file su cui operare si trovano in questo percorso: tuosito/modules/mod_maximenu_CK/assets/ e oltre ai file css occorre modificare anche il file di tipo maximenuH_CK.php che hanno al loro interno le regole css.

Conclusioni

Questo modulo è davvero buono, addirittura migliore di certi prodotti commerciali. Lavora veramente bene con tutti i principali browser. Può essere utilizzato per menu a tendina orizzontali e verticali. Può essere duplicato e utilizzato per diversi menu anche nella stessa pagina. In più ci possiamo mettere i sottotitoli, inserire moduli, mostrare le nostre voci di menu in colonne multiple

Qui potete vedere una demo del Maxi Menu CK