Creazione menu a scomparsa

**Inoki** · 24-09-2004, 12:12

Salute a tutti.
Ho la necessita di creare un menu a scomparsa per alcune voci, una cosa simile a questa:

codice:

Primo menu livello1
   prima voce livello2
   seconda voce livello2
   terza voce livello2

Second menu livello1
   prima voce livello2
   seconda voce livello2
   terza voce livello2

Terzo menu livello1
   prima voce livello2
   seconda voce livello2
   terza voce livello2

Ora quello che dovrei realizzare è questo, quando la pagina si carica visualizzare questo:

codice:

Primo menu livello1
Second menu livello1
Terzo menu livello1

E solo se clicco su uno di questi 3 collegamenti, aprire le voci del secondo livello..

Ora la cosa è semplice con l'hidden dello style e con i layer, a far vosualizzare i menu..

Il mio probelma è però che il livello appare sopra agli elementi che sono più in basso nella pagina, insomam il livello che viene visualizzato si sovrappone agli altri..come faccio a farli scorrere verso il basso, quando apro il menu, e verso l'alto quando lo chiudo?
Sapete darmi qualche consiglio?

**Inoki** · 24-09-2004, 13:37

Capisco che l'argomento è stto trattato più e più volte e venga snobbato..

Ma ditemi come fare a far spostare gli elementi...

dunque
il mio script è questo:

codice:

<script type="text/javascript">
function nascondi(){
	if(document.getElementById('1').style.visibility=='hidden'){
		document.getElementById('1').style.visibility='visible';
	}else{
		document.getElementById('1').style.visibility='hidden';
	}
}
</script>

ora l'elento con id 1 (una tabella), viene visualizzato e nascosto correttamente...

Ma non capisco come far scorrere gli elementi sottostanti quando questo elemento è nascosto...

Mi suggerite cosa devo utilizzare?!

**Inoki** · 24-09-2004, 18:53

Mi basta anceh solo il metodo o la funzoine che devo cercare per realizzare questa cosa...

Per favore un suggerimento!

**badaze** · 26-09-2004, 21:55

Prova questo....

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
.hidden {display:none}
.shown  {display:block}
.mainMenu {color:white;background-color:navy;font-size:9pt;font-family:verdana;cursor:hand}
.subMenu {color:navy;background-color:white;font-size:9pt;font-family:verdana;cursor:hand}
-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
function showHide(aDiv) {
 aDiv.className = aDiv.className == "hidden" ? "shown" : "hidden";
} // function showHide(aDiv)
//-->
</script>

</head>
<body>
<div style="width:100px" class="mainMenu" onclick="showHide(document.getElementById('subMenu1'))">Menu1</div>
<div id="subMenu1" class="hidden">
<div style="width:100px" class="subMenu" onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='white'">Voce 1</div>
<div style="width:100px" class="subMenu" onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='white'">Voce 2</div>
<div style="width:100px" class="subMenu" onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='white'">Voce 3</div>
<div style="width:100px" class="subMenu" onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='white'">Voce 4</div>
</div>


<div style="width:100px" class="mainMenu" onclick="showHide(document.getElementById('subMenu2'))">Menu2</div>
<div id="subMenu2" class="hidden">
<div style="width:100px" class="subMenu" onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='white'">Voce 1</div>
<div style="width:100px" class="subMenu" onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='white'">Voce 2</div>
<div style="width:100px" class="subMenu" onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='white'">Voce 3</div>
<div style="width:100px" class="subMenu" onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='white'">Voce 4</div>
</div>
</body>
</html>

**Inoki** · 27-09-2004, 11:41

Grazie mille.. l'ho provato riadattato e funziona alla perfezione..

Ma in pratica cos'è che fa scorrere le parti sottostanti, e gli fa occupare il posto dei div?

Per caso l'attributo block?

Grazie in ogni caso

**badaze** · 27-09-2004, 12:08

si è l'attributo block mentre quello none non "rende" l'oggetto in questione.

**Inoki** · 27-09-2004, 22:51

Originariamente inviato da badaze
si è l'attributo block mentre quello none non "rende" l'oggetto in questione.

Fantastico.. grazie mille ho capito tutto

**ARLUSì!tucasì!Ciapalì!** · 28-09-2004, 09:39

è possibile duplicare il menu in modo da avere 2 colonne distinte?
grazie

es:

menu 1 menu 4
menu 2 menu 5
menu 3

**badaze** · 28-09-2004, 10:00

Si usando una tabella.

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
.hidden {display:none}
.shown  {display:block}
.mainMenu {color:white;background-color:navy;font-size:9pt;font-family:verdana;cursor:hand}
.subMenu {color:navy;background-color:white;font-size:9pt;font-family:verdana;cursor:hand}
-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
function showHide(aDiv) {
 aDiv.className = aDiv.className == "hidden" ? "shown" : "hidden";
} // function showHide(aDiv)
//-->
</script>

</head>
<body>
<table >
<tr>
 <td valign="top">
  <div style="width:100px" class="mainMenu" onclick="showHide(document.getElementById('subMenu1'))">Menu1</div>
  <div id="subMenu1" class="hidden">
   <div style="width:100px" class="subMenu" onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='white'"> Voce 1</div>
   <div style="width:100px" class="subMenu" onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='white'"> Voce 2</div>
   <div style="width:100px" class="subMenu" onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='white'"> Voce 3</div>
   <div style="width:100px" class="subMenu" onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='white'"> Voce 4</div>
  </div>
 </td>
 <td valign="top">
  <div style="width:100px" class="mainMenu" onclick="showHide(document.getElementById('subMenu2'))">Menu2</div>
    <div id="subMenu2" class="hidden">
    <div style="width:100px" class="subMenu" onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='white'"> Voce 1</div>
    <div style="width:100px" class="subMenu" onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='white'"> Voce 2</div>
    <div style="width:100px" class="subMenu" onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='white'"> Voce 3</div>
    <div style="width:100px" class="subMenu" onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='white'"> Voce 4</div>
  </div>
 </td>
</tr>
<tr>
 <td valign="top">
  <div style="width:100px" class="mainMenu" onclick="showHide(document.getElementById('subMenu3'))">Menu3</div>
  <div id="subMenu3" class="hidden">
   <div style="width:100px" class="subMenu" onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='white'"> Voce 1</div>
   <div style="width:100px" class="subMenu" onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='white'"> Voce 2</div>
   <div style="width:100px" class="subMenu" onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='white'"> Voce 3</div>
   <div style="width:100px" class="subMenu" onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='white'"> Voce 4</div>
  </div>
 </td>
 <td valign="top">
  <div style="width:100px" class="mainMenu" onclick="showHide(document.getElementById('subMenu4'))">Menu4</div>
    <div id="subMenu4" class="hidden">
    <div style="width:100px" class="subMenu" onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='white'"> Voce 1</div>
    <div style="width:100px" class="subMenu" onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='white'"> Voce 2</div>
    <div style="width:100px" class="subMenu" onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='white'"> Voce 3</div>
    <div style="width:100px" class="subMenu" onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='white'"> Voce 4</div>
  </div>
 </td>
</tr>
</table>
</body>
</html>

**ARLUSì!tucasì!Ciapalì!** · 28-09-2004, 10:11

ciao, grazie mille!

ho modificato un po' la tabella xchèp altrimenti aprendo il menu di destra si spostava anche quello di sinistra.

<html>
<head>
<title>Untitled</title>
<style type="text/css">

</style>
<script language="JavaScript" type="text/javascript">

</script>

</head>
<body>
<table >
<tr>
<td valign="top">
<div style="width:100px" class="mainMenu" onclick="showHide(document.getElementById('subMenu 1'))">Menu1</div>
<div id="subMenu1" class="hidden">
<div style="width:100px" class="subMenu" onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='white'">
Voce 1</div>
<div style="width:100px" class="subMenu" onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='white'">
Voce 2</div>
<div style="width:100px" class="subMenu" onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='white'">
Voce 3</div>
<div style="width:100px" class="subMenu" onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='white'">
Voce 4</div>
</div>
<div style="width:100px" class="mainMenu" onclick="showHide(document.getElementById('subMenu 3'))">Menu3</div>
<div id="subMenu3" class="hidden">
<div style="width:100px" class="subMenu" onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='white'">
Voce 1</div>
<div style="width:100px" class="subMenu" onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='white'">
Voce 2</div>
<div style="width:100px" class="subMenu" onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='white'">
Voce 3</div>
<div style="width:100px" class="subMenu" onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='white'">
Voce 4</div>
</div>
</td>
<td valign="top">
<table width="700" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top">
<div style="width:100px" class="mainMenu" onClick="showHide(document.getElementById('subMenu 2'))">Menu2</div>
<div id="subMenu2" class="hidden">
<div style="width:100px" class="subMenu" onMouseOver="this.style.backgroundColor='yellow'" onMouseOut="this.style.backgroundColor='white'">
Voce 1</div>
<div style="width:100px" class="subMenu" onMouseOver="this.style.backgroundColor='yellow'" onMouseOut="this.style.backgroundColor='white'">
Voce 2</div>
<div style="width:100px" class="subMenu" onMouseOver="this.style.backgroundColor='yellow'" onMouseOut="this.style.backgroundColor='white'">
Voce 3</div>
<div style="width:100px" class="subMenu" onMouseOver="this.style.backgroundColor='yellow'" onMouseOut="this.style.backgroundColor='white'">
Voce 4</div>
</div>
<div style="width:100px" class="mainMenu" onClick="showHide(document.getElementById('subMenu 4'))">Menu4</div>
<div id="subMenu4" class="hidden">
<div style="width:100px" class="subMenu" onMouseOver="this.style.backgroundColor='yellow'" onMouseOut="this.style.backgroundColor='white'">
Voce 1</div>
<div style="width:100px" class="subMenu" onMouseOver="this.style.backgroundColor='yellow'" onMouseOut="this.style.backgroundColor='white'">
Voce 2</div>
<div style="width:100px" class="subMenu" onMouseOver="this.style.backgroundColor='yellow'" onMouseOut="this.style.backgroundColor='white'">
Voce 3</div>
<div style="width:100px" class="subMenu" onMouseOver="this.style.backgroundColor='yellow'" onMouseOut="this.style.backgroundColor='white'">
Voce 4</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Discussione: Creazione menu a scomparsa

Strumenti discussione

Ricerca discussione

Visualizza

Creazione menu a scomparsa

Permessi di invio