Come per gli esempi precedenti, illustriamo un modulo utilizzato nel sito stesso. Si tratta del menu orizzontale visibile nell'header di ogni pagina del sito. Questo è generato da una combinazione di javascript e css.
Il file compresso menusito.zip contiene al suo interno i files: horizmenu.js e horizmenu.css.

Per scaricare l'occorrente per creare il menu in oggetto clicca quì

Istruzioni per l'uso:

Una volta estratto il file horizmenu.js e il file horizmenu.css dal file compresso menusito.zip, posizionare gli stessi nella cartella voluta, quindi inserire all'interno dei tags <head> e </head> della pagina HTML, i links di caricamento:

<script language="Javascript" type="text/javascript" src="horizmenu.js"></script>

e

<link rel="stylesheet" type="text/css" href="horizmenu.css" />

Fatto ciò, inserite nel listato sorgente della pagina web, nel punto dove visualizzare il menu, il seguente listato che trovate anch'esso nel file compresso con il nome horizmenu.txt.


<ul id="sddm">
	<li><a href="http://www.tuosito.it">Home</a></li>
    <li><a href="#" 
        onmouseover="mopen('m1')" 
        onmouseout="mclosetime()">Programming</a>
        <div id="m1" 
            onmouseover="mcancelclosetime()" 
            onmouseout="mclosetime()">
        <a href="http://www.tuosito.it/html.php">HTML</a>
        <a href="http://www.tuosito.it/javas.php">JavaScript</a>
        <a href="http://www.tuosito.it/php.php">PHP</a>
        </div>
    </li>
    <li><a href="#" 
        onmouseover="mopen('m2')" 
        onmouseout="mclosetime()">Modules</a>
        <div id="m2" 
            onmouseover="mcancelclosetime()" 
            onmouseout="mclosetime()">
        <a href="http://www.tuosito.it/modules.php">Modules</a>
        <a href="http://www.tuosito.it/forumphpbb.php">Forum phpBB</a>
        </div>
    </li>   
	<li><a href="http://www.tuosito.it/earnings.php" 
        onmouseover="mopen('m3')" 
        onmouseout="mclosetime()">Earnings</a>
        <div id="m3" 
            onmouseover="mcancelclosetime()" 
            onmouseout="mclosetime()">
        <a href="http://www.tuosito.it/eshop.php">Virtual Shop</a>
        <a href="http://www.tuosito.it/buildingsite.php">Building sites</a>
        </div>
	</li>
    <li><a href="http://www.tuosito.it/portfolio.php">Sites</a></li>
</ul>
<div style="clear:both"></div>

Nota:
nell'applicazione proposta il file script, il file css e il file della pagina web si trovano nella stessa directory di lavoro.

Per configurare il menu, aprire il file horizmenu.css con notepad. All'interno del file si troveranno una serie di blocchi di linee per la configurazione, che si commentano da se (in inglese). Adattare a proprio piacimento, quindi impostare i links per le pagine di navigazione all'interno della lista ( <ul> e </ul> ).

Menu fluttuante

Il secondo menu che si presenta in questa categoria è il menu fluttuante. Si tratta del tipo di menu che segue lo scrolling della pagina rimanendo sempre nella stessa posizione relativa (visualizzazione nello schermo). Il menu è realizzato in javascript ed è stato implementato nel menu di navigazione di questa pagina cosicche ogni ulteriore commento è superfluo.

Istruzioni per l'uso:

Selezionare il listato e con un copia ed incolla inserirlo alla fine della pagina dove si intende implementarlo, immediatamente prima del tag </body> Quindi personalizzarlo per le proprie necessità seguendo le istruzioni in esso contenuti. Lo script genera un menu di esempio, non quello della presente pagina, da modificare a proprio piacimento.