Ho bisogno di un menu con le voci principali visibili ed i sottomenu che compaiono (e scompaiono) al click sulla voce principale con relativo spostamento in alto o in basso delle voci principali chiuse.
Tipo quello di flashmx.it!
Si può fare in javascript?
Se si come si fà?
Grazie a tutti.
Claudio
se tralasci l' animazione è leggero e crossbrowser
ciaocodice:<html> <head> <title></title> <script type="text/javascript"> function mmenu(ID) { var menu = document.getElementById(ID); var display = menu.style.display; menu.style.display = (display == "block") ? "none" : "block"; var nodoUL=document.getElementById(ID).parentNode.parentNode; var nodo=nodoUL.childNodes; for (var i=0;i<nodo.length;i++) { if ((nodo[i].tagName=="LI")&&(nodo[i].hasChildNodes())) { for (var j=0;j<nodo[i].childNodes.length;j++) { if((nodo[i].childNodes[j].tagName=="UL")&&(nodo[i].childNodes[j].id!=ID)) { nodo[i].childNodes[j].style.display="none"; } } } } } /* inizializzazione del menu */ window.onload = function() { var uls = document.getElementsByTagName("ul"); for (i=0;i<uls.length;i++) { if(uls[i].getAttribute("class")=="submenu")uls[i].style.display = "none"; if(uls[i].getAttribute("id") && uls[i].getAttribute("id").search("submenu-")!= -1) uls[i].style.display = "none"; } } </script> </head> <body> <ul> <li class="menu">Main <ul class="submenu" id="submenu-1"> [*]Home [*]Disclaimer [/list] <li class="menu">Roms <ul class="submenu" id="submenu-2"> [*]GB [*]GBC [*]GBA [*]N64 [/list] <li class="menu">Emulatori <ul class="submenu" id="submenu-3"> [*]GBC/A [*]N64 [/list] <li class="menu">Midi <ul class="submenu" id="submenu-4"> [*]Giochi [*]TV [*]Films [/list] <li class="menu">Video <ul class="submenu" id="submenu-5"> [*]Episodi [*]Episodi AG [*]Films [*]PokèVideoClip [/list] <li class="menu">MP3 <ul class="submenu" id="submenu-6"> [*]TV [*]Films [*]CD [/list] <li class="menu">Sfondi <ul class="submenu" id="submenu-7"> [*]800x600 [*]1024x768 [/list] [/list] </p> </body> </html>
Ciao Xinod...
A colpo d'occhio sembra proprio (animazione a parte) quel che cercavo.
Dico a colpo d'occhio, ma sarebbe più preciso ad intuito, poiché se clicco su una voce principale di menu non compaiono i sotto menu ma il browser carica la finestra "Impossibile trovare pagina".
Sbaglio qualcosa.
Forse devo creare delle classi nel file .css?
Come non detto...
solo un errore di compilazione.
Non so come ringraziarti Xinod.
A presto!
Claudio
di nulla
Xinod...abbi pazienza
ho fatto questa modifica al tuo script:
<html>
<head>
<title></title>
<script type="text/javascript">
function mmenu(ID) {
var menu = document.getElementById(ID);
var display = menu.style.display;
menu.style.display = (display == "block") ? "none" : "block";
var nodoUL=document.getElementById(ID).parentNode.pare ntNode;
var nodo=nodoUL.childNodes;
for (var i=0;i<nodo.length;i++) {
if ((nodo[i].tagName=="TD")&&(nodo[i].hasChildNodes())) {
for (var j=0;j<nodo[i].childNodes.length;j++) {
if((nodo[i].childNodes[j].tagName=="TABLE")&&(nodo[i].childNodes[j].id!=ID)) {
nodo[i].childNodes[j].style.display="none";
}
}
}
}
}
/* inizializzazione del menu */
window.onload = function() {
var uls = document.getElementsByTagName("table");
for (i=0;i<uls.length;i++) {
if(uls[i].getAttribute("class")=="submenu")uls[i].style.display = "none";
if(uls[i].getAttribute("id") && uls[i].getAttribute("id").search("submenu-")!= -1) uls[i].style.display = "none";
}
}
</script>
</head>
<body>
<LINK rel="stylesheet" type="text/css" href="Ericsoft.css">
<table width="300" border="0">
<tr><td class="menu">Gestione Schede Clienti</td></tr>
<tr>
<td>
<table width="300" border="0" class="submenu" id="submenu-1">
<tr><td>Gestione </td></tr>
<tr><td>Uso Interno</td></tr>
<tr><td>Allegati</td></tr>
</table>
</td>
</tr>
<tr><td class="menu">Piantine</td></tr>
<tr>
<td>
<table width="300" border="0" class="submenu" id="submenu-2">
<tr><td>Gestione </td></tr>
<tr><td>Uso Interno</td></tr>
<tr><td>Allegati</td></tr>
</table>
</td>
</tr>
<tr><td class="menu">Piantine</td></tr>
<tr>
<td>
<table width="300" border="0" class="submenu" id="submenu-3">
<tr><td>Gestione </td></tr>
<tr><td>Uso Interno</td></tr>
<tr><td>Allegati</td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Ho due problemi però...ossia:
cliccando su una delle voci principali il sottomenu si apre...e fin qui tutto bene.
se provo a cliccare su uno dei sottomenu il menu si chiude???
se invece provo a cliccare su di un altra voce principale avendone già cliccata una, la precedente rimane aperta.
Dove sbaglio?
Grazie ancora Xinod!
ti sei voluto complicare un po' la vita,
spero sia comprensibile il perchè dei passaggi
ciao ciaocodice:<script type="text/javascript"> function mmenu(ID) { var menu = document.getElementById(ID); var display = menu.style.display; menu.style.display = (display == "block") ? "none" : "block"; // ID <- td <- tr <- tbody <- table principale var nodoUL=document.getElementById(ID).parentNode.parentNode.parentNode.parentNode; // figli del tbody (tr) var nodo=nodoUL.childNodes[0].childNodes // ciclo trai tr saltando i pari for (var k=1;k<nodo.length;k+=2){ // setto nascosto il primo figlio (table) del primo figlio (td) del tr var c=nodo[k].childNodes[0].childNodes[0] // se non ha l' id che è stato passato alla funzione if(c.id!=ID) c.style.display='none' } } /* inizializzazione del menu */ window.onload = function() { var uls = document.getElementsByTagName("TABLE"); for (i=0;i<uls.length;i++) { if(uls[i].getAttribute("id") && uls[i].getAttribute("id").search("submenu-")!=-1) uls[i].style.display = "none"; } } </script>
MA VIENI....
Grazie Xinod, per il tempo la pazienza e per il sonno (ho visto l'orario del post)...notturnauta anche tu, eh!?!
A presto!
notturnauta un po' fuso:
rileggendo lo script non c' è bisogno di risalire alla tabella principale,
sono tutti figli del tbody...
Ciao Xinod...
ho scopiazzato il tuo menu, purtroppo non mi funziona. Se clicco su una voce principale di menu non compaiono i sotto menu ma il browser carica la finestra "Impossibile trovare pagina".
Sbaglio qualcosa?
Permessi di invio
Rispondi quotando