Script javascript: Menų dhtml multilivello a tendina
difficoltà:
Demo
Download
Script simili
14/12/2006
Questo script con l'ausilio di css e javascript consente di creare un menù a tendina con più livelli, in verticale e orizzontale. Simile per esempio al menù start di windows o ai menù di quasi tutti i programmi offline.
<html>Codice del file stile.css:
<head>
<link rel="stylesheet" type="text/css" href="stile.css" />
<title>Menu</title>
</head>
<body>
<script language="javascript">
<!--
function apri(iddiv)
{
document.getElementById(iddiv).style.visibility = "Visible";
}
function chiudi(iddiv)
{
document.getElementById(iddiv).style.visibility = "Hidden";
}
function setover(iddiv)
{
document.getElementById(iddiv).style.background = "#CCCCCC";
}
function setout(iddiv)
{
document.getElementById(iddiv).style.background = "#EEEEEE";
}
//-->
</script>
<div class="contentmenu">
<div class="topvoice" id="topvoice1" onmouseover="setover('topvoice1');apri('verticalcontent1');" onmouseout="setout('topvoice1');chiudi('verticalcontent1');">Top voce 1
<div class="verticalcontent" id="verticalcontent1">
<div class="verticalvoice" id="verticalvoice1" onmouseover="setover('verticalvoice1');" onmouseout="setout('verticalvoice1')">Vertical voce 1</div>
<div class="verticalvoice" id="verticalvoice2" onmouseover="setover('verticalvoice2');apri('orizontalcontent1');" onmouseout="setout('verticalvoice2');chiudi('orizontalcontent1');">Vertical voce 2
<div class="orizontalcontent" id="orizontalcontent1">
<div class="orizontalvoice" id="orizontalvoice1" onmouseover="setover('orizontalvoice1');" onmouseout="setout('orizontalvoice1')">Orizontal voce 1</div>
<div class="orizontalvoice" id="orizontalvoice2" onmouseover="setover('orizontalvoice2');" onmouseout="setout('orizontalvoice2')">Orizontal voce 2</div>
</div>
</div>
<div class="verticalvoice" id="verticalvoice3" onmouseover="setover('verticalvoice3');" onmouseout="setout('verticalvoice3')">Vertical voce 3</div>
</div>
</div>
<div class="topvoice" id="topvoice2" onmouseover="setover('topvoice2')" onmouseout="setout('topvoice2')">Top voce 2</div>
<div class="topvoice" id="topvoice3" onmouseover="setover('topvoice3')" onmouseout="setout('topvoice3')">Top voce 3</div>
</div>
</body>
</html>
div.contentmenu{
background-color: #EEEEEE;
font: Normal 12px Verdana;
width: 367px;
height: 18px;
}
div.topvoice{
float: left;
background-color: #EEEEEE;
font: Normal 12px Verdana;
border: Solid 1px #CCCCCC;
width: 120px;
height: 18px;
}
div.vocemenu{
background-color: #CCCCCC;
}
div.verticalcontent
{
position: Absolute;
visibility: Hidden;
background-color: #EEEEEE;
font: Normal 12px Verdana;
width: 150px;
border: Solid 1px #CCCCCC;
margin: 4px 0px 0px 0px !important;
margin: 16px 0px 0px -73px;
}
div.verticalvoice{
float: left;
background-color: #EEEEEE;
font: Normal 12px Verdana;
border: Solid 1px #CCCCCC;
width: 150px;
height: 18px;
}
div.orizontalcontent
{
position: Absolute;
visibility: Hidden;
background-color: #EEEEEE;
font: Normal 12px Verdana;
width: 150px;
border: Solid 1px #CCCCCC;
margin: -16px 0px 0px 150px !important;
margin: 0px 0px 0px 52px;
}
div.orizontalvoice{
float: left;
background-color: #EEEEEE;
font: Normal 12px Verdana;
border: Solid 1px #CCCCCC;
width: 150px;
height: 18px;
} 
Permalink:
Tag:
Script Simili:
Script javascript: Select a larghezza fissa in explorer
Script javascript: Aggiungere e rimuovere option da una select
Script ajax: Suggerimenti autocomplete con scriptaculous
Script javascript: Aggiungere e rimuovere option da una select
Script ajax: Suggerimenti autocomplete con scriptaculous
Link utili:
Vota:
Commenti
fausto
16/6/2008 11:49:32
ciao!
ottimo consiglio!
sono un principiante del CSS, ma come posso rendere i rettangoli del menu cliccabili? (intendo avere cliccabile l'intero rettangolo che contiene leavoce e non solo il testo...)
mumble mumble
ciao!
sebastiano
20/10/2008 18:26:00
ma scusate a me non funziona l evento click... come faccio a farlo andare???
anonimux
23/10/2008 16:57:37
forse xkè è impostato l'evento onmouseover e onmouseout, per farlo basta che metti onclick="nome funzione";
mirkol
12/11/2009 11:49:37
molto meglio di tanti altri, non si introduce nel css della pagina lascia tutto inalterato grazie mille!!!
Feed Rss
1/5/2007 17:42:38
Ottimo: semplicissimo ma efficace e configurabile, molto più di tanti altri menù con centinaia di righe di codice.