menu a tendina in javascript?

**mygametech** · 06-09-2012, 13:06

ho fatto un menu a tendina in javascript tramite i div comparsa, il codice e' il seguente:

codice:

<html>

    <head>
    
   <script type="text/javascript" language="javascript">
	function visualizza(id){
  	if (document.getElementById){
    if(document.getElementById(id).style.display == 'none')
    // se l'elemento Ã¨ invisibile
    {
      document.getElementById(id).style.display = 'block';
      // rendi visibile l'elemento; non sulla stessa linea
      
      
      if (id == 'sottomenu_game') {document.getElementById('sottomenu_tec').style.display = 'none'; } 
					// se clicchi su game nascondi tec
					
		if (id == 'sottomenu_tec') {document.getElementById('sottomenu_game').style.display = 'none'; }
					// se clicchi su tec nascondi game
    }
    else{
      document.getElementById(id).style.display = 'none';
    }
  }
}

function nascondi(id) {

	document.getElementById('sottomenu_game').style.display = 'none';
	// se togli il mouse dal menu scompare
	
	
	document.getElementById('sottomenu_tec').style.display = 'none'
	// se togli il mouse dal menu scompare
}


</script>
    
 	</head>
 	
    <body>

    
    
<div >

<a href="#" id="categoria_game" onmouseover="visualizza('sottomenu_game');" onmouseout="nascondi()">

gaming</a>

<a href="#" id="categoria_tec" onmouseover="visualizza('sottomenu_tec'); " onmouseout="nascondi()">

tecnologia</a></div>





<div id="sottomenu_game" style="display:none;">

action
avventura
sparatutto
rpg
sport
other




</div>





<div ></div>




<div id="sottomenu_tec" style="display:none">

apple
smartphone
linux
other
software
other

</div>




    </body>

    </html>

si può notare che passando il mouse sopra il link "gaming" si aprono le sue sottocategorie come fps, rpg ed altro mentre passando il mouse su "tecnologia" si aprono le sue sottocategorie come software,apple ecc...
Il problema però sta nel fatto che togliendo il mouse dai due link i sottomenu scompaiono. Nessun problema, meglio così direte voi, purtroppo anche passando dal menu gaming ai suoi sottomenu (fps,rpg,sport) questi ultimi scompaiono rendendo impossibile la scelta degli stessi

**mygametech** · 07-09-2012, 00:32

Nessuno che risponde? ne ho veramente bisogno

**cavicchiandrea** · 07-09-2012, 00:50

Forse usando mouseleave/mouseenter di jquery

**mygametech** · 07-09-2012, 13:58

cavicchiandrea grazie della risposta, sei l' unico che mi risponde sempre... veramente grazie mille ora provo e ti faccio sapere

**mygametech** · 07-09-2012, 14:07

cavicchiandrea grazie del tuo aiuto, si potrebbe fare pero' qualcosa senza includere librerie jquery o altre? ti spiego: il sito non lo faccio da solo ma con un amico che si occupa della parte in php e lui non sopporta l' uso di codici creati da altri ma vuole codici fatti da noi

**cavicchiandrea** · 07-09-2012, 14:50

Probabilmente si, ma sarebbe molto più complesso se hai voglia di provarci forse trovi spunti "smontando" un menu a tendina funzionante vedi tu.

P.S. Un po strana la logica del tuo amico, definire jquery script fatto da altri e come dire che la Fiat è una carrozzeria

**mygametech** · 07-09-2012, 16:18

grazie della risposta provero' come dici tu, se poi proprio non ci riesco faccio con le librerie e cerco di convincerlo

**mygametech** · 08-09-2012, 11:57

risolto senza usare librerie jquery o altre ma usando questo codice:

codice:

<html>
<head>

		<LINK REL="stylesheet" TYPE="text/css" HREF="header.css" >
		<LINK REL="stylesheet" TYPE="text/css" HREF="Stile/body_part.css" >
		<LINK REL="stylesheet" TYPE="text/css" HREF="Stile/footer.css" >
		<LINK rel="stylesheet" TYPE="text/css" HREF="Stile/style_slider.css">
		<LINK rel="stylesheet" TYPE="text/css" HREF="Stile/sidebar.css">
		
		<script type="text/javascript" language="javascript">
	function visualizza(id){
  	if (document.getElementById){
    if(document.getElementById(id).style.display == 'none')
    // se l'elemento Ã¨ invisibile
    {
      document.getElementById(id).style.display = 'block';
      // rendi visibile l'elemento; non sulla stessa linea
      
      
      if (id == 'sottomenu_game') {document.getElementById('sottomenu_tec').style.display = 'none'; } 
					// se clicchi su game nascondi tec
					
		if (id == 'sottomenu_tec') {document.getElementById('sottomenu_game').style.display = 'none'; }
					// se clicchi su tec nascondi game
    }
    else{
      document.getElementById(id).style.display = 'none';
    }
  }
}

function nascondi(id) {

	document.getElementById('sottomenu_game').style.display = 'none';
	// se togli il mouse dal menu scompare
	
	
	document.getElementById('sottomenu_tec').style.display = 'none';
	// se togli il mouse dal menu scompare
}

</script>

</head>

<body>
<div id="div_totale">
<div class="menu_completo">
				<div class="menu_header">
						<a href="http://mygametech.altervista.org/index.php" target="_blank">
							<div class="td_header">HOME</div>
						</a>
						</div>
						<div class="menu_header" id="categoria_game" onmouseover="visualizza('sottomenu_game');" onmouseout="nascondi()">
						<a href="http://mygametech.altervista.org/index.php?content=gaming" target="_blank">
							<div class="td_header">GAMING</div>
						</a>
						</div>
						<div class="menu_header" id="categoria_tec" onmouseover="visualizza('sottomenu_tec');" onmouseout="nascondi()">
						<a href="http://mygametech.altervista.org/index.php?content=tecnologia" target="_blank">
							<div class="td_header">TECNOLOGIA</div>
						</a>
						</div>
						<div class="menu_header" >
						<a href="http://mygtsocial.altervista.org" target="_blank">
							<div class="td_header">MYGTSOCIAL</div>
						</a>
						</div>
						<div class="menu_header">
						<a href="http://mygametech.altervista.org/archivio.php" target="_blank">
							<div class="td_header">ARCHIVIO</div>
						</a>
						</div>
						<div class="menu_header">
						<a href="http://mygametech.altervista.org/contattaci.php" target="_blank">
							<div class="td_header">CONTATTACI</div>
						</a>
						</div>

</div>




<div id="sottomenu_game" style="display:none;" onmouseover="visualizza('sottomenu_game');" onmouseout="nascondi()" class="menu_completo">



<div  class="sottomenu_gaming">
						<a href="#" target="_blank">
							<div class="td_header">AVVENTURA</div>
						</a>
						</div>
						<div class="sottomenu_gaming">
						<a href="#" target="_blank">
							<div class="td_header">AZIONE</div>
						</a>
						</div>
						<div class="sottomenu_gaming">
						<a href="#" target="_blank">
							<div class="td_header">SPARATUTTO</div>
						</a>
						</div>
						<div class="sottomenu_gaming">
						<a href="#" target="_blank">
							<div class="td_header">RPG</div>
						</a>
						</div>
						<div class="sottomenu_gaming">
						<a href="#" target="_blank">
							<div class="td_header">SPORT</div>
						</a>
						</div>
						<div class="sottomenu_gaming">
						<a href="#" target="_blank">
							<div class="td_header">STRATEGIA</div>
						</a>
						</div>
						<div class="sottomenu_gaming">
						<a href="#" target="_blank">
							<div class="td_header">OTHER</div>
						</a>
						</div>




</div>









<div id="sottomenu_tec" style="display:none;" onmouseover="visualizza('sottomenu_tec');" onmouseout="nascondi()" class="menu_completo">

<div  class="sottomenu_tecnologia">
						<a href="#" target="_blank">
							<div class="td_header">APPLE</div>
						</a>
						</div>
						<div class="sottomenu_tecnologia">
						<a href="#" target="_blank">
							<div class="td_header">SOFTWARE</div>
						</a>
						</div>
						<div class="sottomenu_tecnologia">
						<a href="#" target="_blank">
							<div class="td_header">PERSONAL COMPUTER</div>
						</a>
						</div>
						<div class="sottomenu_tecnologia">
						<a href="#" target="_blank">
							<div class="td_header">HARDWARE</div>
						</a>
						</div>
						<div class="sottomenu_tecnologia">
						<a href="#" target="_blank">
							<div class="td_header">LINUX</div>
						</a>
						</div>
						<div class="sottomenu_tecnologia">
						<a href="#" target="_blank">
							<div class="td_header">OTHER</div>
						</a>
						</div>

</div>


</div>
</body>
</html>

potete chiudere la discussione

Discussione: menu a tendina in javascript?

Strumenti discussione

Ricerca discussione

Visualizza

menu a tendina in javascript?

Permessi di invio