MJ Horizontal Menu

Menu orizzontale a tendina

Menu orizzontale che permette di aprire i sottomenu in una tendina sottostante alle singole voci. 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> <table id="MJ_MainMenu" cellpadding="0" cellspacing="0"><tr> <td class="MJ_MainMenu" onmouseover="MJ_OpenMenu(1)" onmouseout="MJ_CloseMenu(1)"> <a href="javascript:void(0)" class="MJ_VoiceClass">Voce 1</a> <div id="MJ_1" class="MJ_HiddenLink"> <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> </td> <td class="MJ_MainMenu" onmouseover="MJ_OpenMenu(2)" onmouseout="MJ_CloseMenu(2)"> <a href="javascript:void(0)" class="MJ_VoiceClass">Voce 2</a> <div id="MJ_2" class="MJ_HiddenLink"> <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> </td> <td class="MJ_MainMenu" onmouseover="MJ_OpenMenu(3)" onmouseout="MJ_CloseMenu(3)"> <a href="javascript:void(0)" class="MJ_VoiceClass">Voce 3</a> <div id="MJ_3" class="MJ_HiddenLink"> <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> </td> <td class="MJ_MainMenu" onmouseover="MJ_OpenMenu(4)" onmouseout="MJ_CloseMenu(4)"> <a href="javascript:void(0)" class="MJ_VoiceClass">Voce 4</a> <div id="MJ_4" class="MJ_HiddenLink"> <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> </td> <td class="MJ_MainMenu" onmouseover="MJ_OpenMenu(5)" onmouseout="MJ_CloseMenu(5)"> <a href="javascript:void(0)" class="MJ_VoiceClass">Voce 5</a> <div id="MJ_5" class="MJ_HiddenLink"> <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> </td> </tr></table> <div id="MJ_Author"><b>MJ Horizontal Menu</b> - 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 { background: #DD0000; border: solid 1px #000000; } td.MJ_MainMenu { vertical-align: top; width: 100px; } div.MJ_HiddenLink { visibility: hidden; position: absolute; } div.MJ_VisibleLink { visibility: visible; position: absolute; width: 150px; margin: 0px 0px 0px -1px; border-top: solid 1px #000000; border-left: solid 1px #000000; border-right: solid 1px #000000; } a.MJ_VoiceClass, a.MJ_VoiceClass:hover { display: block; position: relative; font-weight: bold; text-decoration: none; padding: 5px 0px 5px 5px; } a.MJ_VoiceClass { color: #FFFFFF; } a.MJ_VoiceClass:hover { color: #FFCC00; } 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

function MJ_OpenMenu(MJ) { document.getElementById("MJ_" + MJ).className = "MJ_VisibleLink"; } function MJ_CloseMenu(MJ) { document.getElementById("MJ_" + MJ).className = "MJ_HiddenLink"; }