|
Mambo consente un elevato livello di personalizzazione dei menu, sui quali si può intervenire agendo su diverse "leve". Prendo come riferimento Mambo 4.6, tenendo presente che nel prossimo mambo 4.7 l'output html sarà modificato per migliorare l'accessibilità del cms.
Il pannello di controllo del modulo
Per modificare l'aspetto di un menu occorre aprire il Module Manager (module>site module) e non, come si potrebbe essere portati a pensare, il Menu Manager.
Dal pannello di amministrazione del modulo è possibile scegliere varie opzioni, tra cui:
- visualizzare o meno del titolo del modulo;
- l'applicazione di un'immagine di fianco alla voce di menu;
- il tipo di menu (vertical, horizontal, flat list). Sconsiglio vivamente l'opzione horizontal;
- la classe css del contenitore (moduletable) o delle voci di menu (mainlevel) di quello specifico modulo, mediante l'aggiunta di un suffisso alla classe originaria (-suffisso; es: moduletable-suffisso e mainlevel-suffisso).
- l'applicazione di immagini per l'indentazione dei sottomenu;
Il file css del template
Lo stile css di tutti i moduli può essere stabilito nel file css del template in uso.
- moduletable: è la classe del contenitore del menu;
- mainlevel: è la classe delle voci di menu;
- active_menu: è l' id che contrassegna il collegamento alla pagina che in quel momento si sta visitando;
A singoli moduli possono essere attribuite classi diverse mediante l'applicazione di un suffisso dal pannello di controllo del modulo (vedi su).
Il file index.php del template
Nel file index.php del template sono indicate le module positions, ossia i contenitori dei moduli (e, quindi, dei menu). Ad esempio mosLoadModules('left'); indica che in quella posizione del template saranno visualizzati tutti i moduli contenuti nella module position "left". Aggiungendo dei parametri (-1, -2 o -3) a tale stringa di codice possiamo agire sull'output html del modulo, e più precisamente sul contenitore (table, div) e sul titolo (th, h2, h3) del menu. Inoltre, in combinazione con questa operazione, possiamo scegliere dal pannello di controllo del modulo i tag del di menu: verticale (<table>), orizzontale (solo tag <a>), lista (<ul>)
Il menu di base
<?php mosLoadModules('left'); ?>
Il menu è formato da una tabella (class="moduletable") in cui è presente la riga per il titolo (th), e da un'altro contenitore annidato con le singole voci. Il contenitore è una tabella nel caso si scelgano i tipi di menu "vertical" o "horizontal", è una lista (ul) in caso si scelga come opzione "flat list"
Vertical
<table cellpadding="0" cellspacing="0" class="moduletable">
<tr>
<th valign="top">Main Menu</th>
</tr>
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr align="left"><td><a href="" class="mainlevel" id="active_menu">Home</a></td></tr>
<tr align="left"><td><a href="" class="mainlevel" >Getting Started</a></td></tr>
<tr align="left"><td><a href="" class="mainlevel" >FAQs</a></td></tr>
</table>
</td>
</tr>
</table>
Horizontal
<table cellpadding="0" cellspacing="0" class="moduletable">
<tr>
<th valign="top">
Main Menu </th>
</tr>
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="1">
<tr> <td nowrap="nowrap">
<span class="mainlevel"> </span><a href="" class="mainlevel" id="active_menu">Home</a>
<span class="mainlevel"> </span><a href="" class="mainlevel" >Getting Started</a>
<span class="mainlevel"> </span><a href="" class="mainlevel" >FAQs</a><span class="mainlevel">
</td></tr>
</table>
</td>
</tr>
</table>
Flat list
<table cellpadding="0" cellspacing="0" class="moduletable">
<tr>
<th valign="top">
Main Menu </th>
</tr>
<tr>
<td>
<ul id="mainlevel">
<li><a href="" class="mainlevel" id="active_menu">Home</a></li>
<li><a href="" class="mainlevel" >Getting Started</a></li>
<li><a href="" class="mainlevel" >FAQs</a></li><li>
</ul>
</td>
</tr>
</table>
Il menu -1
<?php mosLoadModules('left',-1); ?>
E' come il precedente ma il contenitore delle voci non è annidato in una tabella. Non permette di dare un titolo al menu. E' adatto per un menu orizzontale. .
Vertical
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr align="left"><td><a href="" class="mainlevel" id="active_menu">Home</a></td></tr>
<tr align="left"><td><a href="" class="mainlevel" >Getting Started</a></td></tr>
<tr align="left"><td><a href="" class="mainlevel" >FAQs</a></td></tr>
</table>
Le opzioni horizontal e flat list danno lo stesso risultato del menu di base (sempre, però, senza tabella contenitore)
Il menu -2
<?php mosLoadModules('left',-2); ?>
E' uguale al menu di base salvo che il contenitore è costituito da un div e non da una tabella. I titolo è racchiuso tra i tag h2.
Vertical
<div class="moduletable">
<h2>Main Menu</h2>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr align="left"><td><a href="" class="mainlevel" id="active_menu">Home</a></td></tr>
<tr align="left"><td><a href="" class="mainlevel" >Getting Started</a></td></tr>
<tr align="left"><td><a href="" class="mainlevel" >FAQs</a></td></tr>
</table>
</div>
Il menu -3
<?php mosLoadModules('left',-3); ?>
E' uguale al precedente salvo che vi sono una serie di div inutili (per questo lo sconsiglio). I titolo è racchiuso tra i tag h3 (per questo lo preferisco rispetto al precedente).
Vertical
<div class="module">
<div>
<div>
<div>
<h3>Main Menu</h3>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr align="left"><td><a href="" class="mainlevel" id="active_menu">Home</a></td></tr>
<tr align="left"><td><a href="" class="mainlevel" >Getting Started</a></td></tr>
<tr align="left"><td><a href="" class="mainlevel" >FAQs</a></td></tr>
</table>
</div>
</div>
</div>
</div>
|
