Modulo Extended menu per creare menu a discesa
Da Il wiki di Joomla.it.
Indice |
Introduzione
Il modulo che andiamo a presentare consente di sostituire il modulo standard di joomla per la visualizzazione dei menu permettendo di creare dei submenu a cascata che si aprono al solo passaggio del mouse.
Il modulo extended-menu-module-1.0.5 è scaricabile a questo indirizzo oppure dal sito ufficiale E' necessario scaricare anche uno dei template che si trovano a questo indirizzo
Per questa miniguida faremo riferimento al template: son-of-suckerfish-horizontal-1.0.2.zip per la formattazione orizzontale del menù. Nella stessa pagina dei template troverete la spiegazione (in lingua inglese) della sua installazione.
Vediamo come usare il modulo
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 (vedere dettagli sul sito dello sviluppatore) \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:
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/extmenu/css/menu.css" type="text/css" />
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.html
La 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.
--bigham 20:51, 13 set 2008 (UTC)
