Menu e sottomenu client side senza reload della pagina

S

sciontphono

Nuovo Utente
27 Set 2007
2
0
0
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.


menu_ex.jpg



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

sciontphono

Nuovo Utente
27 Set 2007
2
0
0
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:
 
Devi accedere o registrarti per poter rispondere.
Discussioni simili
Autore Titolo Forum Risposte Data
M sottomenu stessa altezza di menu con voce attiva evidenziata Javascript 3
E [Menu JQuery]: problema click quando il sottomenu si apre sopra un iframe... jQuery 0
M Aggiungere sei sottomenu ad un menu mootools Javascript 0
T problemi con dati menu a tendina HTML e CSS 2
A menu a tendina php PHP 1
M Accordion menu e posizione div HTML e CSS 0
F Menu responsive larghezza schermo HTML e CSS 2
G Colorare menu select attraverso ricerca php PHP 0
M Creazione menu a tendina Javascript 3
D menu con submenu orizzontale HTML e CSS 0
Cosina Menu fisso copre i titoli quando cliccati nel sommario jQuery Javascript 4
G creazione menu a tendina e invio a pagina php PHP 1
P Sub menu con Collapse. Javascript 0
R abilitare menu a tendina tramite relativa chekbox PHP 17
L Aiuto creazione menu mancante WordPress 0
S spostare il pulsante menu dropdown HTML e CSS 8
F Dropdown menu con tabella PHP 33
Spown [WordPress] Problemi visualizzazione su più browser + voci menu in movimento WordPress 1
A [WordPress] Menu bar WordPress 0
W [WordPress] Non si vedono le categorie da aggiungerle al Top Menu WordPress 3
M Inviare variabili da menu a tendina a pagina php con post PHP 6
M [PHP] Selezione da menu a discesa con 2 variabili PHP 0
F [WordPress] [HTML] Aggiungere una pagina solo allo sticky menu WordPress 4
M [PHP] Creare un menu a tendina con pdo PHP 18
M [Javascript] Caricamento menu da file esterno Javascript 8
W [HTML] Animazione menu mobile HTML e CSS 0
P [HTML] Eliminare doppio menu in wordpress WordPress 2
andreas88 [PHP] menu PHP 15
K [ASP.Net] Realizzazione menu a tendina dipendenti ASP.NET 1
M [HTML] problema spazio aggiuntivo tra elementi <li> di menu a tendina HTML e CSS 1
L [css e html] destra e sinistra (menu navigazione) HTML e CSS 3
P [Gratuito][Cerco] qualcuno per fare menu a tendina ottimizzato per mobile-responsive con css e html Offerte e Richieste di Lavoro e/o Collaborazione 3
P [HTML] Problema con menu orizzontale a tendina per sito web HTML e CSS 17
P [Javascript] Voce del menu evidenziata in base alla pagina attiva Javascript 48
V [WordPress] Come modificare link in tasto menu css WordPress 21
S [Javascript] [CSS] Spazio Bianco tra Slider e Menu foto Javascript 6
P [Javascript] problema menu responsive su aruba, editor bk Javascript 1
Hellgrom90 Hamburger menu non si chiude jQuery 1
K [Javascript] Finestra menu Javascript 1
Selenio89 [HTML] creare menu di navigazione HTML e CSS 2
C [Javascript] [HTML] Problemi: Overlay, Banner, Menu Javascript 4
C 3 Bug CSS AND HTML: Overlay-Banner-Menu HTML e CSS 0
C 3 BUG CSS AND HTML: OVERLAY - BANNER- MENU HTML e CSS 0
M [PHP] Menu a tendina dinamico che non si aggiorna PHP 2
U [PHP] Selezione con menu a tendina e recupero selezione PHP 5
M Riadattamento funzioni per far scomparire un menu. jQuery 4
G [Javascript] Transition in OnClick Dropdown Menu Javascript 5
U [Javascript] Menu responsive non scompare col click sui link Javascript 0
A [Javascript] Problemi menu bootstrap Javascript 1
A [HTML] Menu con effetto slide down HTML e CSS 0

Discussioni simili

Alto Basso