Menu e sottomenu client side senza reload della pagina

sciontphono · 27 Set 2007

Salve,

sto cercando di sviluppare un menu che abbia le funzionalità descritte nell'immagine che segue;
poichè deve essere client-side e al click su ognuna delle voci non ci deve essere il reload della pagina mi è stato suggerito di svilupparlo in javascript;
poichè non sono un espertissimo programmatore e non saprei neanche da dove cominciare, volevo sapere se c'era qualcosa di simile in rete, una base dalla quale partire e poi da modificare.
Si trovano tantissimi esempi di menu ma non come quello mio.

Ad ogni modo ecco un esempio (scaricato dalla rete) che utilizza del codice javascript

VISUALIZZA ESEMPIO

La mia necessità sarebbe che all'evento onCLICK su una delle voci PRINCIPALI (quindi Menu 1 o MENU 2 ecc) vengano visualizzate i sotto-link (quindi se ho cliccato Menu 1 visualizzerò voce 1 di menu 1, voce 2 di menu 1 ecc) relativi alla voce cliccata e contemporaneamente nascoste le altre voci principali.

Per tornare all situazione di default vorrei mettere una freccia DIETRO che mi riporti alla visualizzazione di tutte le voci principali.

Se qualcuno ha visto sulla rete qualcosa di simile o lo ha usato o abbia un suggerimento utile per favore mi faccia sapere!

GRAZIE!

sciontphono · 27 Set 2007

Quello che non riesco a fare è modificare il codice di questo esempio in modo che acquisti le funzionalità da me descritte

HTML:

<html>
<head>
<title>Menu con javaScript</title>
<style>
a:visited{color:black;font-family:verdana}
a:link{color:black;font-family:verdana}
a:hover{color:blue;font-family:verdana}


p {color:black;font-family:verdana;font-size:12pt}
h1 {color:black;font-family:verdana;font-size:13pt}
</style>

<script>


function startmenu()
{
	document.getElementById('menu1').style.display = "none";
	document.getElementById('menu1').style.display = "none";
	document.getElementById('menu2').style.display = "none";
	document.getElementById('menu3').style.display = "none";
	document.getElementById('menu4').style.display = "none";
	
}

function menufunc(menuId)
{
	if(document.getElementById(menuId).style.display == "none")
	{
		startmenu();
		document.getElementById(menuId).style.display = "block";
	}
	else
	{
		startmenu();
	}
}

</script>

</head>
<body onLoad="javascript:startmenu()">
<a href="javaScript:menufunc('menu1')">Menu 1</a>
<div id="menu1">
	- <a href='#'>voce 1 di menu 1</a><br>
	- <a href='#'>voce 2 di menu 1</a><br>
	- <a href='#'>voce 3 di menu 1</a><br>
</div>
<br>
<a href="javaScript:menufunc('menu2')">Menu 2</a>
<div id="menu2">
	- <a href='#'>voce 1 di menu 2</a><br>
	- <a href='#'>voce 2 di menu 2</a><br>
	- <a href='#'>voce 3 di menu 2</a><br>
</div>
<br>
<a href="javaScript:menufunc('menu3')">Menu 3</a>
<div id="menu3">
	- <a href='#'>voce 1 di menu 3</a><br>
	- <a href='#'>voce 2 di menu 3</a><br>
	- <a href='#'>voce 3 di menu 3</a><br>
</div>
<br>
<a href="javaScript:menufunc('menu4')">Menu 4</a>
<div id="menu4">
	- <a href='#'>voce 1 di menu 4 </a><br>
	- <a href='#'>voce 2 di menu 4 </a><br>
	- <a href='#'>voce 3 di menu 4 </a><br>
</div>
</body>
</html>

un aiutino:crying:

Cerca

Cerca

Menu e sottomenu client side senza reload della pagina

sciontphono

Nuovo Utente

sciontphono

Nuovo Utente

Discussioni simili