Menu che scorre insieme alla pagina in Dhtml

Corso jQuery
Creare applicazioni client-side col Framework jQuery

Scritto da Luca Ruggiero nella sezione Javascript

Il menu di un sito, al di lÓ del suo aspetto, Ŕ senza dubbio l'elemento fondamentale per la navigazione e per la ricerca delle risorse messe a disposizione dal sito stesso. Il pi¨ grande amico/nemico dei menu Ŕ il Dhtml che permette di creare effetti grafici e funzionali non indifferenti. Parlo sia di amico che di nemico per via di fattori tipo la compatibilitÓ dei browser e la teoria del Web design che implica accorgimenti come la risoluzione e le dimensioni del monitor di un potenziale browser.

Detto ci˛ passiamo all'oggetto di questo Articolo: un menu che scorre insieme alla pagina all'atto dello scroll e rimane quindi sempre evidente ed utilizzabile!

Abbiamo bisogno di un layer posizionato in modalitÓ assoluta a cui assegneremo l'identificativo menu e di uno script Javascript che fa tutto il resto. Al caricamento ed al decaricamento della pagina lanciamo le due funzioni che servono per il corretto funzionamento del menu, ovvero MyMenu() che lo inizializza e Stop() che ne controlla il flusso.

Di seguito il codice completo, senza bisogno di commenti!

<html>
    <head>
        <title>Menu che scorre insieme alla pagina</title>
        <script language="javascript">
            <!--
                var timer = 0;

                function MyMenu()
                {
                    document.getElementById('menu').style.pixelTop = document.body.scrollTop;
                    timer = setTimeout("MyMenu()", 1);
                }

                function Stop()
                {
                    clearTimeout(timer);
                }
            //-->
        </script>
    </head>
<body onload="MyMenu()" onunload="Stop()">

<div id="menu" style="position: Absolute;">
    <b>Menu</b><br>
    <a href="http://www.lukeonweb.net">lukeonweb.net</a><br>
    <a href="http://www.ducatidreams.net">Ducati Dreams Club</a><br>
    <a href="http://www.mrwebmaster.it">MR Webmaster</a><br>
</div>

<p align="center">Scorri la pagina</p>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>

</body>
</html>

I pi¨ cliccati della sezione Javascript

:: jQuery Validation: validazione di un form con jQuery (107.912)

:: Breve guida a jQuery (98.602)

:: Le espressioni regolari in Javascript (84.989)

:: Gestione delle stringhe in Javascript (74.986)

:: Stampare una pagina col Dhtml (42.850)

:: Inserire in automatico lo slash nel formato data gg/mm/aaaa (41.642)

:: Menu orizzontale dinamico in Dhtml (37.187)

:: Gli Array in Javascript (35.935)

:: Temporizzazioni Javascript (31.623)

:: Istruzion condizionali in Javascript: if e switch (28.943)

IN EVIDENZA
DOWNLOAD