Script javascript: Mený dhtml multilivello a tendina

   difficoltà:  script script script script script

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.

javascript - menu a tendina
Codice della pagina menu.html:
<html>
<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>
Codice del file stile.css:
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;
}


Social:


Donazione:
Se questo script ti è stato utile e ti ho fatto risparmiare tempo e denaro fai una
qualsiasi cifra è ben accetta! 1€, 3€, 5€ ,10€, 50€ ;-) fai te!

Permalink: Tag: Script Simili: Permalink: Link utili:
Tools:
Feed RSS     Demo   Download  



Commenti


  Marco

1/5/2007 17:42:38

Ottimo: semplicissimo ma efficace e configurabile, molto più di tanti altri menù con centinaia di righe di codice.

  isa

2/10/2007 14:42:12

MOLTO SEMPLICE ED EFFICACE!!!

  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!!!



Lascia un commento


Codice di controllo*:
Nome*:
Email/Link:
Testo*:
 
I campi contrassegnati con * sono obbligatori.