Problema mneù verticale e css

[fabiodm75]

Ciao a tutti,
premetto che sono partito da uno script già fatto... è un menù fatto quasi completamente con i CSS e XHTML con una minima parte di JAVASCRIPT.
Le voci del menù erano disposte in maniera verticale e cliccando su una singola voce si "tiravano" giù le relative sottovoci, io lo vorrei modificare in maniera orizzontale questo è il codice originale:
-------------------------------------------------
<div class="menu-tendina-verticale">


Esempio di menu a dinamico, clicca sui link per mostrare le altre voci del menu</p>
<ul>
[*]Sezione 1
<ul id="s-m1">[*]Voce Menu 1.1[*]Voce Menu 1.2[*]Voce Menu 1.3[/list]

</div>
-------------------------------------------------

Questo è il codice del CSS:

-------------------------------------------------
/* menu tendina */
.menu-tendina-verticale ul {
list-style: none;
padding:0;margin:0;
background:#ccc;color:#000;
border:solid #900;border-width:2px 2px 1px 2px;
width:200px
}
.menu-tendina-verticale ul li {
padding:0;margin:0;
display:inline;
}
.menu-tendina-verticale a {
text-decoration:none;
background:#ccc;color:#000;
display:block;padding:.3em 1em;
font-weight:bold;
border-bottom:1px solid #900
}
.menu-tendina-verticale a:hover {
text-decoration:none;
background:#ff0;color:#000
}
.menu-tendina-verticale ul li ul {border:none;border-top:2px solid #fff;border-bottom:1px solid #900}
.menu-tendina-verticale ul li ul li {
display:block;
border:2px solid #fff;
border-top:none;
}
.menu-tendina-verticale ul li ul li a {
display:block;
padding:.3em 0;
width:100%;
text-indent:2em;
border:none;
background:#ddd;color:#900;
font-weight:normal
}
-------------------------------------------------

Questo è quello che ho aggiunto io:

-------------------------------------------------
.menu-tendina-verticale {
display:inline; /* In questo modo continuo sulla stessa linea senza mandare a capo il menù */
list-style: none;
padding:0;margin:0;
background:#ccc;color:#000;
border:solid #900;border-width:2px 2px 1px 2px;
width:200px
}
-------------------------------------------------

Il menù funziona infatti le voci si dispongono verticalmente, ma il problema è che quando faccio un click su una voce per visualizzare le relative sottovoci si "muove anche la grafica del sito!!!", quindi vorrei sapere se c'è qualche proprietà nei CSS che faccia in modo che sottovoci "passino sopra la grafica" (tipo layer... non ricordo se assoluti o relativi).

Spero di essere stato abbastanza chiaro.
Ciao e grazie
Fabio

[Mich_]

Non e` che il problema sia il JS che fa spostare tutto? In tal caso non credo che con modifiche dei CSS puoi fare qualcosa.

Ciao
Michele

[fabiodm75]

Questo è il Javascript:

function init() {
var menuID = ["m1","m2","m3"];
for (var i in menuID)
document.getElementById("s-"+menuID[i]).style.display = "none";
}
function mostra(id) {
if (document.getElementById("s-"+id).style.display == "none") {
init();
document.getElementById("s-"+id).style.display = "block";
}
else init()
}
window.onload = function(e) { init() }

Può essere questo? Se si posso modificarlo?
Ciao
Fabio

[Mich_]

Quello script (in particoalre la funzione mostra() ) nasconde tutti i layer con identificatore s-m1 s-m2 s-m3 e visualizza quello con il codice passato nella chiamata alla funzione.

Non so quindi se e` quello il problema.
Ma se gli altri layer sono sotto i vari s-m1 ... e per far posto a quelli si devono spostare allora si`.

Con quali eventi viene chiamata la funzione mostra() ?

Ciao
Michele

[fabiodm75]

La fuzione mostra() viene richiamata qui:
--------------------------------------------------------
<div class="menu-tendina-verticale">


Esempio di menu a dinamico, clicca sui link per mostrare le altre voci del menu</p>
<ul> [*]Sezione 1
<ul id="s-m1">[*]Voce Menu 1.1[*]Voce Menu 1.2[*]Voce Menu 1.3[/list]

</div>
----------------------------------------------------------

Ciao e grazie per l'aiuto.
Fabio

[Mich_]

Forse e` meglio cambiare il nome della variabile interna: id potrebbe essere parola riservata.

Comunque ancora non riesco a determinare se e` quella funzione che crea lo spostamento. Dipende dalla sistemazione dei vari <div> e se sono tutti nella stessa scatola base.

Puoi provare a modificare lo stato di visibility dei vari div anziche` il display:

tu usi:
display: 'block' | 'none'

prova invece ad usare:
visibility: 'visible' | 'hidden'

Se con tale modifica non ti sposta i blocchi (anche se magari non e` quello che vuoi), allora e` un problema di CSS, altrimenti e` qualcosa altro.

Ciao
Michele

[fabiodm75]

Allora... giocando con i CSS ho im parte risolto il problema grazie a:

position:absolute;
left:12%;
top:16.5%;

inserito nella classe .menu-tendina-verticale, ora il problema rimane sulla gestione delle sottovoci, infatti ho modificato leggermente il codice nella pagina html in questo modo:

<div class="menu-tendina-verticale">
<ul>[*]
Sezione 3
<ul id="s-m3" onclick="mostra(m3.id);return false">[*]Voce Menu 1.1
[*]Voce Menu 1.2
[*]Voce Menu 1.3[/list]
[/list]
</div>

Il problema è che non riesco a trovare l'associazione di eventi mouse in grado di gestire correttamente il menù, infatti in questo modo se vado sulla voce principale si vedono le sottovoci (che vanno "sopra" la grafica ora) e posso anche scorrerle, ma se esco con il mouse dalle sottovoci queste restano tirate giù, mentre se torno con il mouse sulla voce principale si chiude regolarmente... insomma devo trovare la "combinazione esatta" per gli eventi del mouse!!!
Ciao e grazie per l'aiuto
Fabio

[Mich_]

OK.

Non ti so aiutare direttamente, ma ti posso dare degli stimoli (che potrebbero essere sbagliati).

1. Ho visto degli identificatori uguali nel tuo codice: i vari id="..." devono essere tutti diversi.
2. nei campi s-m1 ecc deve esserci l'evento onmouseout (e forse anceh onmouseover.
3. tali eventi onmouseout devono gestire un timeout (resettato da eventuali mouseover), che elimina (nasconde, chiude) il div dopo qualche millisecondo (inizia da 500, poi regolati)

Ciao
Michele