Sottomenu'

[guliver81]

salve a tutti, volevo chiedervi se qualcuno sa come si impostamo i menù, che una volta cliccati compaiono altri sotto menù:Qui c'e il codice, ma in questo nn è come ho scritto prima:
[*]Sede
<ul>
<div id="hormenu">[*]Inserisci[*]Modifica[*]Cancella[*]Visualizza</div>[/list]

Ci sarà qualche cosa da aggiungere nel primo link Sede..ma nn so..
Grazie in anticipo...

[salasir]

Solitamente questa tecnica prevede l'utilizzo della pseudoclasse :hover sulle liste, che IE non gestisce. Per cui è necessario js.

Guarda qui:

Suckerfish Dropdowns

[guliver81]

Allora ho provato il codice che mi hai indicato ma è come l'ho faccio io, cioè i sottomenù ci sono sempre;io invece voglio che cliccando sul menù princip gli altri compaiono...

[salasir]

Certo. Devi agire a livello di CSS. Verso la metà dell'articolo c'è questo codice:

#nav li ul { position: absolute; 
        width: 10em; left: -999em; } 
#nav li:hover ul { left: auto; }

La prima dichiarazione sposta le liste figlie di un elemento lista (li ul) fuori dallo schermo
(-999em), mentre la seconda rende visibile la sottolista all':hover.

Poi c'è da inserire il codice js ed altre dichiarazioni CSS per far funzionare quel testone di IE

[guliver81]

Scusami, dove devo mettere quello che mi hai scritto tu, nel codice che ti ho mandato??

[salasir]

Guarda il codice della pagina di esempio creata nel link che ti ho indicato prima:
Pagina Esempio

Vedi tutto quello che sta tra <style ...> e </style> serve a dare la forma grafica (poi puoi estrarlo in un file esterno che è meglio!) e quello che sta tra <script ...> e </script> è il codice che ti consente di far funzionare IE (anche qui puoi estrarlo in un file esterno).

Ovviamente colori, font, dimensioni, immagini di sfondo ecc... li modifichi come meglio ti aggrada.

[guliver81]

Scusami per la mia insistenza,
il codice che ho visto nn fa cliccare sul menù e poi compaiono altri sottomenù
ad esempio

Valore (cliccandoci di sopra spuntano)
Valore1
Valore2.

E poi il codice che dici tu si scrive cosi':
<style
#nav, #nav ul { padding: 0; margin: 0; list-style: none; } #nav a { display: block; width: 10em; } #nav li { float: left; width: 10em; }
#nav li ul { position: absolute; width: 10em; left: -999em; } #nav li:hover ul { left: auto; }
#nav li:hover ul, #nav li.sfhover ul { left: auto; }
>
</style>

<script sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagNam e("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>


<ul id="nav">[*]<a href=per.php>Persona</a>[/list]
<ul><div id="hormenu">[*]Anagrafica[*]Contratto[*]Sede[*]Ubicazione[*]Gestione Carriera[/list]</div>

Perchè cosi' nn mi succede niente, cioè nn si visualizza niente...
GRAZIE SEMPRE

[salasir]

Aspetta! VVoVe: I tag <style> e <script> devono contenere le dichiarazioni:

Originariamente inviato da guliver81
<style type=text/css>
#nav, #nav ul { padding: 0; margin: 0; list-style: none; } #nav a { display: block; width: 10em; } #nav li { float: left; width: 10em; }
#nav li ul { position: absolute; width: 10em; left: -999em; } #nav li:hover ul { left: auto; }
#nav li:hover ul, #nav li.sfhover ul { left: auto; }
</style>

<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagNam e("LI");
for (var i=0; i<sfEls.length; i++)
{ sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function()
{ this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } }
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>

Poi, se estrai CSS e js li includi così:

<link type="text/css" href="tuostile.css" rel="stylesheet" />

<script src="filejs.js" type="text/javascript"></script>

Ovviamente devi indicare il percorso prima del nome file se non risiedono nella stessa cartella!