Installazione

L'installazione del modulo è semplice. Basta seguire le modalità di installazione di tutti i modulo di Joomla. al termine dell'installazione troverete il modulo Extended menu nella lista dei modulo (Estensioni -> Gestione Moduli).

Dopo aver installato il modulo è necessario decomprimere il contenuto del template ''son-of-suckerfish-horizontal-1.0.2.zip'' nella cartella '''extmenu''' da creare all'interno della cartella del template di joomla che si vuole utilizzare per il sito.
Nella cartella extmenu si troveranno i seguenti file:

 menu.html               : il template che realizza il menu a discesa
 menu.ini                : un file di configurazione 
 \css\menu.css           : il foglio di stile per formattare graficamente 
                           il menu
 \js\menu.js             : uno script javascript per l'animazione del menu
 \images\arrow_down.gif  : un'immagine per indicare i menu che possiedono 
                           dei submenu aperti
 \images\arrow_right.gif : un'immagine per indicare i menu che possiedono 
                           dei submenu

Fatto questo è necessario ''modificare il file index.php'' del template di joomla che vogliamo usare aggiungendo, proprio sotto le righe che richiamano il foglio di stile del template (nella sezione header), la seguente riga:

Questo permetterà al template di Joomla di recepire le indicazioni di formattazione del foglio di stile del modulo Extended menu.

Configurazione

Prima di configurare il modulo bisogna aver creato un normale menu con la gestione menu di Joomla. Il modulo Extended menu infatti utilizza la struttura di un menu esistente per visualizzarla con un formato grafico diverso. Supponiamo di aver già realizzato il menu '''topmenu''' (che è anche il menu già presente nella installazione standard di Joomla) e lo sostituiremo con l'Extended menu.

Per configurare il modulo Extended menu bisogna visualizzare la lista dei moduli e, individuato il modulo, cliccarci sopra. Compariranno le impostazioni del modulo.

I parametri da modificare sono i seguenti:

Menu class suffix : -suckerfish
Menu name         : topmenu
Source type       : menu
Menu style        : Horizzontal
Template name     : extmenu/menu.htmlLa descrizione di tutti i parametri la troverete a questo indirizzo

Applicazione

Terminata la configurazione si dovrà disattivare il modulo standard di Joomla che crea il menu topmenu e sostituirlo con il modulo Extended menu nella stessa posizione nel template che occupava il topmenu

Foglio di stile

Il foglio di stile menu.css è suddiviso in due sezioni: la prima inizia al commento /** customize colors here */ e contiene le proprietà delle classi che formattano graficamente il menu. Per default il menu comparirà di colore rosso, i submenu di primo livello verdi e quelli di secondo livello blu.
Dal commento /** customize style / layout here */ invece cominciano le impostazioni che riguardano dimensioni e posizione del menu.
Quelle imporanti sono le seguenti:

Per aumentare l'altezza del menu

alla '''riga 50''' del foglio di stile
modificare nella classe a.mainlevel-suckerfish-horizontal il valore della proprietà height

per spostare orizzontalmente e verticalmente i submenu di primo livello modificare la classe

'''alla riga 140 del foglio di stile'''

ul.mainlevel-suckerfish-horizontal li > ul {
top: 1.65em;
left: auto;
}

modificando il valore della proprietà top si potrà alzare/abbassare il submenu, modificando il valore della propietà left lo si potrà spostare orizzontalmente.

per spostare orizzontalmente e verticalmente i submenu di secondo livello modificare la classe

'''alla riga 128 del figlio di stile'''

ul.mainlevel-suckerfish-horizontal li li ul {
left: 10em;
top: 0;
}

modificando il valore della proprietà top si potrà alzare/abbassare il submenu, modificando il valore della propietà left lo si potrà spostare orizzontalmente.

Fate attenzione a che tra il submenu di primo livello e quello di secondo livello non vi sia troppo spazio vuoto o sarà difficile usare i submenu di secondo livello.

Risolvere i problemi di allineamento / malfunzionamento
del menù su Internet Explorer 7 (IE7)

Se notate un disallineamento dei sub-menù suckerfish utilizzando Internet Explorer allora trovate questa dichiarazione file ''menu.css'':

a.mainlevel-suckerfish-horizontal, a.mainlevel_active-suckerfish-horizontal, a.mainlevel_current-suckerfish-horizontal, span.mainlevel-suckerfish-horizontal {
float: left;
width: auto;
}

ed ''eliminate'' la riga n.69:

float: left;

o in alternativa ''commentatela'' (rendendola così inattiva ma preservando il codice):

/*float: left;*/Quindi in definitiva la dichiarazione risultante è questa:

a.mainlevel-suckerfish-horizontal, a.mainlevel_active-suckerfish-horizontal, a.mainlevel_current-suckerfish-horizontal, span.mainlevel-suckerfish-horizontal {
width: auto;
}Questa modifica è stata '''testata con successo''' sui seguenti browser:

*Internet Explorer 7.0.6001.18000
*Firefox 3.0.6
*Google Chrome 1.0.154.48
*Safari 3.2.1 (525.27.1)
*Opera 9.63 (build 10476)

Grafica al posto dei colori.

Se si desidera utilizzare della grafica al posto dei semplici colori basta sostituire tutte le proprietà background-color con la proprietà backgroung-image e il riferimento all'immagine da utilizzare.

Tenete presente che le classi che terminano con '':hover'' definiscono l'aspetto del menu quando il mouse vi passa sopra, con '':link'' l'aspetto normale di visualizzazione del menu e con '':visited'' l'aspetto del menu quando viene cliccato con mouse.