Ho fatto un piccolo passo in avanti:
Nel CSS ho messo
visibility: hidden; per
#menu_root ul ul
menu.html
Codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="it-IT" />
<title>Prova menų</title>
<link rel="stylesheet" type="text/css" media="screen,print" href="menu.css" />
<script type="text/javascript" src="menu.js"></script>
</head>
<body>
<div id="menu_root">
<ul>
<li><a href="#" onmouseover="menu_over(1)"><span class="ita">Home</span><span class="eng"> </span></a></li>
<li><a href="#" onmouseover="menu_over(2)"><span class="ita">Dove siamo</span><span class="eng">Where we are</span></a></li>
<li>
<a href="#" onmouseover="menu_over(3)"><span class="ita">Catalogo</span><span class="eng">Catalog</span></a>
<ul id="menu_sub1">
<li><a href="#"><span class="ita">Spine</span><span class="eng">Jacks</span></a></li>
<li><a href="#"><span class="ita">Prese</span><span class="eng">Plugs</span></a></li>
<li><a href="#"><span class="ita">Cavi</span><span class="eng">Cables</span></a></li>
<li><a href="#"><span class="ita">Filtri</span><span class="eng">Filters</span></a></li>
<li><a href="#"><span class="ita">Varie</span><span class="eng">Various</span></a></li>
</ul>
</li>
<li><a href="#" onmouseover="menu_over(4)"><span class="ita">Notizie</span><span class="eng">News</span></a></li>
<li><a href="#" onmouseover="menu_over(5)"><span class="ita">Contatti</span><span class="eng">Contacts</span></a></li>
</ul>
</div>
</body>
</html>
menu.js
Codice:
var menu_obj = null;
function get_obj_by_id (id)
{
if (document.getElementById)
return document.getElementById (id);
else if (document.all)
return document.all[id];
}
function show_menu (id)
{
obj = get_obj_by_id (id);
obj.style.visibility = 'visible';
menu_obj = obj;
}
function hide_menu ()
{
if (menu_obj != null)
{
menu_obj.style.visibility = 'hidden';
menu_obj = null;
}
}
/*---- Parte specifica ----*/
function menu_over ()
{
if (menu_over.arguments.length == 1 && menu_over.arguments[0] == 3)
show_menu ("menu_sub1");
else
hide_menu ();
}
Adesso se vado sulla voce Catalogo, il sottomenų viene visualizzato. Se vado in una delle altre voci del menų principale, il sottomenų, correttamente, viene nascosto.
Rimane ancora 1 cosa: se il sottomenų č aperto, ma non vado nelle altre voci del menų principale, quale evento (e dove) devo gestire per far sparire il sottomenų???