Aiuto per menu DHTML [Archivio] - Hardware Upgrade Forum

View Full Version : Aiuto per menu DHTML

andbin

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

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

11-04-2006, 14:25

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 perfettamenteQuesta 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, 14:40

non so conosci questo articolo (http://pro.html.it/articoli/id_544/idcat_11/pro.html) 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 :muro:

andbin

11-04-2006, 14:48

non so conosci questo articolo (http://pro.html.it/articoli/id_544/idcat_11/pro.html) 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, 14:55

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

prego. spero di esserti stato di aiuto :cool:

andbin

11-04-2006, 15:06

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)">Home </a></li>
<li><a href="#" onmouseover="menu_over(2)">Dove siamoWhere we are</a></li>
<li>
<a href="#" onmouseover="menu_over(3)">CatalogoCatalog</a>
<ul id="menu_sub1">
<li><a href="#">SpineJacks</a></li>
<li><a href="#">PresePlugs</a></li>
<li><a href="#">CaviCables</a></li>
<li><a href="#">FiltriFilters</a></li>
<li><a href="#">VarieVarious</a></li>
</ul>
</li>
<li><a href="#" onmouseover="menu_over(4)">NotizieNews</a></li>
<li><a href="#" onmouseover="menu_over(5)">ContattiContacts</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

11-04-2006, 15:23

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 :D

modifica: azz..non e' cosi' :D
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 :asd:

andbin

11-04-2006, 15:49

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. :p
Grazie 1000.

v1ruz

11-04-2006, 15:54

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. :p
Grazie 1000.

sempre lieto di aiutare :). alla prox