Aiuto per menu DHTML

[andbin]

Non sono cose che faccio tutti i giorni ... quindi chiedo l'aiuto di qualcuno per risolvere questo problema: ho realizzato un menù verticale in XHTML+CSS (vedere allegato) che contiene una voce con un sottomenù. Questo menù devo poi metterlo in un sito che sto sviluppando.

Dal punto di vista della visualizzazione, ho provato con IE6, FF1.5 e Opera7 e si presenta ok, cioè proprio come voglio. Con IE5.5 la visualizzazione è un pochino "sballata" ma per il momento è il problema minore. Ho anche aggiunto nel CSS alcuni "hack" per IE5.x (almeno quelli che io conosco) ma o sono sbagliati oppure non sono sufficienti.

Il problema principale comunque è che vorrei che il sottomenù (quello visualizzato ora a destra) venisse visualizzato solamente quando il mouse si porta sulla voce "Catalogo/Catalog".

Secondo voi è abbastanza facile realizzare questa cosa? Qualche consiglio/suggerimento?
Grazie

[v1ruz]

puoi farlo tramite CSS:

#menu_root li ul { display:none; }
#menu_root li:hover ul { display:block; }

ma devi provarlo su IE..ora sono sotto linux e su firefox funzia perfettamente

[andbin]

Originariamente inviato da v1ruz

puoi farlo tramite CSS:

#menu_root li ul { display:none; }
#menu_root li:hover ul { display:block; }

ma devi provarlo su IE..ora sono sotto linux e su firefox funzia perfettamente

Questa soluzione la conoscevo anche io.
Confermo che su FF 1.5 funziona perfettamente e anche su Opera 7/8. Questo perché FF e Opera rispettano gli "standard" ed hanno un ottimo supporto per :hover, che si può applicare tranquillamente anche a elementi che non sono degli <a>. Putroppo IE gestisce :hover esclusivamente e solamente per i link <a>, almeno per quanto ne so io. Con IE 6, ho provato, infatti non funziona.

La soluzione che hai postato sarebbe quella più logica e valida (e più semplice) ma purtroppo IE è (e resterà) una schifezza.
Grazie comunque!

[v1ruz]

non so conosci questo articolo di Alessandro Fulciniti. Qui presenta un menu espandibile tramite click ed il codice JS e' veramente essenziale ed utilizza un poco CSS. Magari potresti studiarti questo e poi "adattarlo" al tuo menu. di + non saprei dirti anche perche' JS non e' il mio campo

[andbin]

Originariamente inviato da v1ruz

non so conosci questo articolo di Alessandro Fulciniti.

No, non l'avevo mai letto ... leggo subito! Grazie.

EDIT: ho appena letto l'articolo. Non è proprio quello che serve a me. Spiega come gestire un menù espandibile tramite il "click" sull'elemento padre. Questo in effetti è abbastanza facile da realizzare.

[v1ruz]

Originariamente inviato da andbin

No, non l'avevo mai letto ... leggo subito! Grazie.

prego. spero di esserti stato di aiuto

[andbin]

Ho fatto un piccolo passo in avanti:

Nel CSS ho messo visibility: hidden; per #menu_root ul ul

menu.html

<!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">&nbsp;</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

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ù???

[v1ruz]

quando il mouse esce dalla zona del sottomenu. cioe' dovresti "riattivare" visibility:hidden con onmouseout.

<ul id="menu_sub1" onmouseout="hide_menu()">

su firefox questo funzia

modifica: azz..non e' cosi'
dovresti dirgli anche di mostrarlo quando il mouse e' sopra al sotto menu

 <ul id="menu_sub1" onmouseover="menu_over(3)" onmouseout="hide_menu()">

scusa ma sto andando a tentativi anche io

[andbin]

Originariamente inviato da v1ruz

dovresti dirgli anche di mostrarlo quando il mouse e' sopra al sotto menu

 <ul id="menu_sub1" onmouseover="menu_over(3)" onmouseout="hide_menu()">

Giusto! Proprio quello che serviva. Si comporta come dovrebbe, almeno così mi sembra.

Resterebbe ancora da sistemare la visualizzazione su quella ciofeca di IE5.x ma adesso non ne ho davvero voglia.
Grazie 1000.

[v1ruz]

Originariamente inviato da andbin

Giusto! Proprio quello che serviva. Si comporta come dovrebbe, almeno così mi sembra.

Resterebbe ancora da sistemare la visualizzazione su quella ciofeca di IE5.x ma adesso non ne ho davvero voglia.
Grazie 1000.

sempre lieto di aiutare . alla prox