Aiuto per menu DHTML

andbin · 11-04-2006, 14:27

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 · 11-04-2006, 14:58

puoi farlo tramite CSS:

Codice:

#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 · 11-04-2006, 15:25

Quote:

Originariamente inviato da v1ruz

puoi farlo tramite CSS:

Codice:

#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 · 11-04-2006, 15:40

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 · 11-04-2006, 15:48

Quote:

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 · 11-04-2006, 15:55

Quote:

Originariamente inviato da andbin

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

prego. spero di esserti stato di aiuto

andbin · 11-04-2006, 16:06

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">&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

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

v1ruz · 11-04-2006, 16:23

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

Codice:

<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

Codice:

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

scusa ma sto andando a tentativi anche io

andbin · 11-04-2006, 16:49

Quote:

Originariamente inviato da v1ruz

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

Codice:

 <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 · 11-04-2006, 16:54

Quote:

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

11-04-2006, 14:58	#2
v1ruz Senior Member Iscritto dal: Nov 2004 Città: $HOME Messaggi: 1213	puoi farlo tramite CSS: Codice: #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 __________________ Last.fm: My Profile / GamerTag XBL: Martcus / Flickr / deviantArt iBook 12'' / MacBook Pro 13'' / iPhone 3G 16GB Black / iPod 5G 30GB / iPod Nano 2G 4GB

11-04-2006, 15:40	#4
v1ruz Senior Member Iscritto dal: Nov 2004 Città: $HOME Messaggi: 1213	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 __________________ Last.fm: My Profile / GamerTag XBL: Martcus / Flickr / deviantArt iBook 12'' / MacBook Pro 13'' / iPhone 3G 16GB Black / iPod 5G 30GB / iPod Nano 2G 4GB

11-04-2006, 16:23	#8
v1ruz Senior Member Iscritto dal: Nov 2004 Città: $HOME Messaggi: 1213	quando il mouse esce dalla zona del sottomenu. cioe' dovresti "riattivare" visibility:hidden con onmouseout. Codice: <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 Codice: <ul id="menu_sub1" onmouseover="menu_over(3)" onmouseout="hide_menu()"> scusa ma sto andando a tentativi anche io __________________ Last.fm: My Profile / GamerTag XBL: Martcus / Flickr / deviantArt iBook 12'' / MacBook Pro 13'' / iPhone 3G 16GB Black / iPod 5G 30GB / iPod Nano 2G 4GB Ultima modifica di v1ruz : 11-04-2006 alle 16:26.

Strumenti
Mostra una versione stampabile Invia questa pagina per email