Configurazione   

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

menu avanzatiOrmai si dà per scontata la definizione di maxi-menu o mega-menu per descrivere 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

ck1Andiamo 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 Menu to render Nom du menu. Ma sarà opportuno assegnargli uno specifico menù che andremo a costruire appositamente. Io l'ho chiamato menuck

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 Avanzate/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  Styles Options/Menu theme (sceglierne uno tra i quattro proposti)
(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 Styles Options/Menu orientation se mostrare il menù con stile orizzontale o verticale. (Già, possiamo utilizzare questo modulo anche per le tendine dei menù verticali, che figo! Risatona )

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


Qui sotto 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

ck2

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ù

menu

 

ck3

Cosa molto semplice come potete vedere. Basta aggiungere una doppia barra verticale tra il titolo e il sotto titolo.
Menu/Voci di menù/ sceglire la voce che ci interessa
(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


ck4

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

ck5

 

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

Articolo scritto da tonicopi - Joomla Css Zen Garden

--------------------------------------------------

Gestire le multicolonne

Creiamo una nuova voce di menu con sottotitolo divisa in 2 colonne: un modulo menu e um modulo login

  • Andiamo in Gestione moduli e scegliamo i due moduli da visualizzare es.: modulo menu top co ID 20 e modulo login con ID 44
  • andiamo sul menù principale e creiamo una nuova voce separatore testuale con titolo e sottotitolo: menCk||voci max; salvo
  • creo la nuova colonna
    • nuova voce di menu separatore testuale
    • posso inserire un titolo es.: Colonnasx[col=180]        (numero di pixel della colonna)
    • vado ad inserire questa voce sotto il menCk, salvo
    • Nuova voce di menù separatore testuale
    • su nome voce menù ==> [modid=20]
    • inserisco questa voce sotto menCk
  • creo la seconda colonna
    • nuova voce di menu separatore testuale
    • posso non inserire il titolo ma solo il parametro [col=190]     (numero di pixel della colonna)
    • inserisco questa voce sotto menCk
    • ora inserisco nella colonna il secondo modulo (login)
      • nuova voce di menu separatore testuale
      • nome voce di menu: login[modid=44]
        • inserisco questa voce sotto menCk

 _________________________________________________

Inserire un immagine nel menù:

entra nel modulo / source / menu to render / edit inserire l'immagine