MJ Scroll Menu

Menu che scorre insieme alla pagina

Menu orizzontale che scorre insieme alla pagina, in modo da essere sempre visibile nonostante lo scroll. Realizzato con gli elenchi HTML, stilizzato con i CSS, funziona attraverso Javascript e l'interazione con i CSS, quindi in DHTML.

» Esempio » Download

Attenzione: copiando il codice dei menu dichiari di aver letto e compreso le note legali e di accettarle in ogni loro punto.

Codice HTML

Nome del file: menu.html

<html> <head> <title>Menu Javascript - Esempio</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="menu.css"> <script type="text/javascript" src="menu.js"></script> </head> <body onload="MJ_OpenMenu()" onunload="MJ_StopMenu()"> <div id="MJ_MainMenu"> <div id="MJ_MenuTitle">Menu</div> <a href="#" class="MJ_LinkClass">Link 1</a> <a href="#" class="MJ_LinkClass">Link 2</a> <a href="#" class="MJ_LinkClass">Link 3</a> <a href="#" class="MJ_LinkClass">Link 4</a> <a href="#" class="MJ_LinkClass">Link 5</a> </div> <div id="MJ_Author">MJ Scroll Menu - Powered by <a href="http://www.menujavascript.org/" title="Menu Javascript">MenuJavascript.org</a></div> </body> </html>

Codice CSS

Nome del file: menu.css

/* STILI INDISPENSABILI PER IL MENU */ #MJ_MainMenu { position: absolute; width: 150px; margin: 10px 0px 0px; border-top: solid 1px #000000; border-left: solid 1px #000000; border-right: solid 1px #000000; } #MJ_MenuTitle { background: #DD0000; color: #FFFFFF; font-weight: bold; padding: 5px 0px 5px 5px; border-bottom: solid 1px #000000; } a.MJ_LinkClass, a.MJ_LinkClass:hover { display: block; position: relative; color: #000000; text-decoration: none; padding: 5px 0px 5px 5px; border-bottom: solid 1px #000000; } a.MJ_LinkClass { background: #EEEEEE; } a.MJ_LinkClass:hover { background: #DDDDDD; } /* ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- */ /* ALTRI STILI A CORREDO DELLA PAGINA DI ESEMPIO */ body { background: #FFFFFF; color: #000000; margin: 10px 10px 10px 10px; } td, div { font-size: 10px; font-family: verdana; } #MJ_Author { margin: 100px 0px 0px 0px; } a { color: #3366CC; text-decoration: underline; } a:hover { color: #DD0000; text-decoration: underlinene; }

Codice Javascript

Nome del file: menu.js

var MJ; function MJ_OpenMenu() { document.getElementById("MJ_MainMenu").style.top = document.body.scrollTop; MJ = window.setTimeout("MJ_OpenMenu()", 1); } function MJ_StopMenu() { window.clearTimeout(MJ); }