Menu che scorre insieme alla pagina in Dhtml

Autore: Luca Ruggiero | Tell a Friend

Corso Java
Impara a programmare col linguaggio OOP della Sun.

Corso Javascript e DHTML
Impara a creare controlli ed animazioni!

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>

IN EVIDENZA
Effetto ombra su testo con Photoshop Guadagna col tuo sito grazie a TradeD... Guida XHTML Riscrivere le URL con Asp Riavviare IIS HTTP 500 internal server error Generare password casuali in Javascri... Errore 80004005: Cannot update. Datab... Introduzione ad Ajax ed Asp con Jscri... Referenze dei Tag Html Stringhe di connessione via ODBC e Ol... Referenze dei fogli di stile Css Le espressioni regolari in Javascript
HOT LINKS
E-Commerce News Manager Newsletter Corsi online eBooks PC Guadagna col sito Offerte lavoro Hosting Joomla Hosting 20 euro Reg. domini Email gratis FAX via email Tlefonare col PC ADSL Alice ADSL FastWeb Sito pronto Download veloce Ottimizzazione PC Traduzioni