Oppure

Loading
11/11/14 20:24
Erreg
ho preparato un menù con più voci e ogni voce un sottomenù ,i vari sottomenù sono nascosti finchè li mostro passando con il mouse sopra la voce del menù madre , di seguito posto il codice 
<!DOCTYPE html>
	<head>
                <link type="text/css" href="menuStyle.css"  rel="stylesheet"/>
		<script type="text/javascript"  src="menuScript.js"></script>
		
	</head>

	<body >		
			<ul>
				<li class="livello1"id="a1" ><a href="#">uno</a>					
					<ul id="ul21">
						<li class="livello2"><a href="#">uno_uno</a></li>
						<li class="livello2"><a href="#">uno_due</a></li>
						<li class="livello2"><a href="#">uno_tre</a></li>
					</ul>
				</li>
				<li class="livello1"id="a2"><a  href="#">due</a>					
					<ul id="ul22">
						<li class="livello2"><a href="#">due_uno</a></li>
						<li class="livello2"><a href="#">due_due</a></li>
						<li class="livello2"><a href="#">due_tre</a></li>
					</ul>

			</ul>
	</body>
</html>

di seguito i due file CSS e JS 
.livello1{
	float:left;
	list-style-type:none ;
	text-align:center;
	height:30px;
	line-height:30px;
	border-bottom: 5px solid red ;
	color: black;
        width:200px;
	background-color: black;
	border-radius: 18px;
	margin-left: 100px;	
} 
#ul21,#ul22 {
	text-align: center;
	padding-left: 0px;
	margin-top: 5px;
}
a{
	color:white;
	text-decoration: none;	
}
.livello2{	
	list-style-type:none ;
	text-align:center;
	width:200px;
	height:30px;
	line-height:30px;	
	background-color: black;
	color: black;
	border-bottom: 5px solid red ;
	border-radius: 18px;
}      



function vedoNonVedo()
{ 		
	if(variabile.style.visibility==="visible")
	{
	variabile.style.visibility="hidden";
	}
	else
	{	
	variabile.style.visibility="visible";	
	}
}

window.addEventListener('load',function(){
	ul21.style.visibility="hidden";
	ul22.style.visibility="hidden";
	document.getElementById('a1').addEventListener('mouseover',vedoNonVedo);
	document.getElementById('a1').addEventListener('mouseout',vedoNonVedo);
	document.getElementById('a2').addEventListener('mouseover',vedoNonVedo);
	document.getElementById('a2').addEventListener('mouseout',vedoNonVedo);
	});

la mia domanda è questa : quando intercetto l'evento mouseover o mouseout come faccio a passare alla funzione "vedoNonVedo() " il sottomenù su cui agire ( mostrare /nascondere ) da inserire al posto di " variabile " ? , perche finchè sono 2 menu al limite mi basta scrivere due funzioni uguali che fanno riferimento a due ul diverse , ma se ci sono molti sottomenù la cosa diventa poco logica
aaa
12/11/14 1:08
pierotofy
Mm, per semplificare le cose ti suggerire di guardare le pseudo-classi CSS :hover e le relazioni tra classi. 

.livello1 .livello2{
  display: none;
}
.livello1:hover .livello2{
  display: block;
}
Il mio blog: piero.dev
12/11/14 14:43
Erreg
Postato originariamente da pierotofy:

Mm, per semplificare le cose ti suggerire di guardare le pseudo-classi CSS :hover e le relazioni tra classi. 

.livello1 .livello2{
  display: none;
}
.livello1:hover .livello2{
  display: block;
}



nohhh !!! mi hai demoralizzato , con 4 righe di codice funziona tutto alla grande , però la mia domanda rimane , se voglio passare alla funzione un qualcosa che sia un tag o altro , posso farlo ? se si come ?
nel chiamare una funzione svincolata da addEventListener basta passargli i dati fra parentesi , ma in questo caso ?
ciao e naturalmente grazie .
aaa
12/11/14 14:59
pierotofy
Prova con: 

function vedoNonVedo(event){
   var tag = event.currentTarget;
}


developer.mozilla.org/en-US/docs/Web/API/…
Ultima modifica effettuata da pierotofy 12/11/14 14:59
Il mio blog: piero.dev
13/11/14 15:59
Erreg
Postato originariamente da pierotofy:

Prova con: 

function vedoNonVedo(event){
   var tag = event.currentTarget;
}


developer.mozilla.org/en-US/docs/Web/API/…


ho dato un'okkiata al sito linkato , event si porta dietro un mondo , per me in questo momento è troppo , mi accontento delle pseudo classi css anche se mi è sembrato di capire che hover che è quella che al momento mi interessa di più possa applicare modifiche allo stato soltanto dell'elemento su cui si invoca e ai suoi elementi ( se ci sono ) figli . sbaglio ?
aaa
13/11/14 16:49
pierotofy
Si.
Il mio blog: piero.dev
14/11/14 20:08
Erreg
Postato originariamente da pierotofy:

Si.

hahaha !!!
lo sospettavo , comunque sui vari forum o pagine con esempi e o guide si parla solo dell'elemento su cui si invoca o qualche elemento compreso nell'elemento stesso , cercherò più a fondo .
aaa