Joomla tutorial: LxMenu, menu javascript DHTML / XHTML

Guide CMS

Logo per il tutorial del menu DHTML LxMenu Un tutorial per Joomla 1.0 riguardante LxMenu, un menu javascript DHTML / XHTML gratuito per la creazione di popup menu orizzontali e verticali, molto diffuso per questo CMS.
Innanzitutto avrete bisogno di installare le ultime versioni sia del component che del modulo, scaricabili dal sito Menu 4 Joomla, dove potete anche vedere degli esempi accattivanti: una volta installati, inserite il codice PHP suggerito durante l’installazione del component all’interno del tag <HEAD> della pagina index.php del vostro template predefinito, fatto questo potete proseguire nella creazione del pop up menu.

Creazione del menu pop up

Il procedimento è più semplice di quello che può sembrare poichè il component si occupa di rielaborare il menù da voi scelto applicando le funzioni Javascript necessarie per la visualizzazioni dei piccoli pop up.
L’unica operazione da fare consiste nel costruire la gerarchia del menu e dei suoi submenu, vediamo come fare.

All’interno del pannello di gestione del CMS clicchiamo sulla voce MENU tra i collegamenti presenti nel menu in alto, e scegliamo dalla lista il menu che vogliamo modificare.
Dovrebbero già essere presenti delle voci nel ramo principale, se non ci sono creiamone una cliccando su Nuovo, scegliendo se collegarli ad un contenuto: infatti questi collegamenti hanno la funzione di fare da parent item per i submenu a comparsa al passaggio del mouse, ma possono sempre svolgere la loro funzione di link.
Passiamo ora alla creazione del piccolo pop up che conterrà il sottomenu: clicchiamo sempre su Nuovo, scegliamo il contenuto da collegare e riempiamo la pagina successiva con i dettagli della voce.
L’unico dettaglio a cui dovremmo prestare attenzione è nella scelta del parent item: di default verrà assegnato TOP, inserendo quindi il nuovo collegamento sul ramo principale.
Volendo creare un sottomenu dovremo decidere sotto quale voce del ramo principale inserirlo e selezionarla in questa sede.

Esempio di posizionamento del collegamento nel menu

Figura 1.1 - Esempio posizionamento collegamento nel menu

Nell’esempio riprodotto in figura 1.1 sto creando un sottomenu contenente un collegamento LINK_1 sotto alla voce NOTIZIE, definendolo quindi come suo parent item.
Clicchiamo su Salva per tornare alla pagina del menu dove potremo verificare la nuova gerarchia da noi creata (figura 1.2).

Figura 1.2 - Esempio gerarchia voci e pop menu in Joomla

Clicchiamo ora sulla voce Componenti del menu del pannello di gestione e scegliamo dalla lista la voce Lxmenu: in queste pagine abbiamo la possibilità di configurare il nostro modulo/componente.
Per ora limitiamoci ad assegnare il menù prima modificato alla gestione di LxMenu, scegliendolo nel menu a discesa della proprietà Menu name, e la direction che nel mio caso ho impostato come orizzontale (horizontal): salviamo e verifichiamo il nostro lavoro andando a vedere l’homepage del sito.
NB: Essendo un nuovo modulo che estende il menu classico di Joomla!, dovremo disattivare la pubblicazione del vecchio menu e sostituirlo con il menù di default nominato LxMenu.
Nella figura sotto possiamo vedere il risultato ottenuto.

Figura 1.3 - Anteprima LxMEnu menu DHTML in Joomla

Grafica e template del menu pop up

Il menu c’è, funzionante e semplicemente espandibile ma probabilmente la grafica di default non coincide con quella del nostro sito.
Possiamo modificarla come vogliamo nelle pagine di settaggio delle proprietà, che possiamo trovare cliccando sulla voce Componenti del menu del pannello di gestione e scegliendo dalla lista la voce Lxmenu: in queste sezioni abbiamo la possibilità di modificare colori del testo e di sfondo, trasparenza dei blocchi pop up, allineamento, margini, posizionamento delle sottovoci, dimensioni, vari comportamenti, margin, padding e molto altro ancora.
Combinando queste proprietà al meglio si possono ottenere menu eleganti e moderni.