menu dinamico in js

**tarini** · 14-12-2004, 13:52

ragazzi sto provando a crearmi un menu col le mie manine... niente di che deve essere un menu a comparsa attivato dall'evento onmouseover

guardano altri siti sono arrivato a questa conclusione (lasciate stare la mancanza di alcuni tag fondamentali come <html> e <body>):

codice:

<script>

function mostra(cosa) {
 cosa.style.visibility='visible';
}

function rispristina() {
menu1.style.visibility='hidden';
menu2.style.visibility='hidden';
menu3.style.visibility='hidden';
menu4.style.visibility='hidden';
}


</script>
<body onload="ripristina()">

<table border=1>

<tr>

<td>
 <div>
  <div onmouseover="mostra(menu1)" onmouseout="rispristina()"><a href=#>2</div>
  <div onmouseover="mostra(menu3)" onmouseout="rispristina()"><a href=#>4</div>
 </div>
</td>
<td width=50>

 <div id="menu1">
  <div><a href=#>1-B</div>
  <div><a href=#>1-D</div>
 </div>
 <div id="menu2">
  <div><a href=#>2-B</div>
  <div><a href=#>2-D</div>
 </div>
 <div id="menu3">
  <div><a href=#>3-B</div>
  <div><a href=#>3-D</div>
 </div>
 <div id="menu4">
  <div><a href=#>4-B</div>
  <div><a href=#>4-D</div>
 </div> 

</td>
</table>

qualcosa di corretto cè???
ho però due problemini...
- all'apertura della pagina i menu si vedono mentre dovrebbero essere hidden
- quando vado sopra un link onmouseover il menu che deve comparire viene posizionato (giustamente) in basso (tranne per il menu1 :-) )...come risolto sto problema??

grazie a tutti

**Kreatore** · 14-12-2004, 14:02

codice:

...
<script type="text/javascript">
<!--
window.onload=monta;
function monta(id) {
var d = document.getElementById(id);//assegna alla variabile d l'oggetto indicato da id
	for (var i = 1; i<=10; i++) { //partendo da smenu1 fino a smenu9 nascondi tutti
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';} //se d esiete assegnali il block;
}
//-->
</script>
...
<div id="navbar">
 <div id="menu" > 
    <dl>
      <dt onmouseover="javascript:monta('smenu1');">1menu</dt>
	  <dd id="smenu1"> 
        <ul>
			[*]Prima
			<li onMouseOver="javascript:monta();">
		[/list]
      </dd>
    </dl>
    <dl>
        <dt onmouseover="javascript:monta('smenu2');">2menu</dt>
      	<dd id="smenu2"> 
        <ul>
			[*]2.1menu[*]2.2menu
			[*]2.3menu
			[*]2.4menu
			[*]2.5menu
			<li onMouseOver="javascript:monta();">
		[/list]
      </dd>
    </dl>
    <dl>
      <dt onmouseover="javascript:monta('smenu3');">3menu</dt>
      <dd id="smenu3"> 
        <ul>[*]3.1menu[*]3.2menu[*]3.3menu[*]3.4menu
		  <li onMouseOver="javascript:monta();">
		[/list]
      </dd>
    </dl>
  </div>
</div>

usa questo codice, è validato dal w3c ed in più è crossbrowser. Ha un solo difetto che in parte l'ho corretto io. Quando ti si apre un sottomenu, si chiude solo se vai su un'altro titolo. Con l'aggiunta alla fine del sottomenu, di una linea vuota e di una chiamata vuata, uscendo dal sottomenu, dal fondo ti si chiude.

Prova e se hai problemi posta.

**tarini** · 14-12-2004, 16:39

tutto ok grazie

potresti spiegarmi cosa fa bene il "block"??

ciao

**Kreatore** · 14-12-2004, 17:50

guarda qui:
http://www.w3schools.com/css/pr_class_display.asp

comunque crea una linea ativa per il codice:

----------------------------------------------------------
| testo in block |
----------------------------------------------------------

-------------------
|testo senza block|
-------------------

questa èla visualizzazione di come lavora il block

Discussione: menu dinamico in js

Strumenti discussione

Ricerca discussione

Visualizza

menu dinamico in js

Permessi di invio