Inserire due menu dello stesso tipo

**skyrob** · 11-04-2005, 11:34

Salve
ho provato ad adattare il menu contenuto in questo articolo in modo da avere due menu uno pricipale sul lato sinistro e uno secondario sul lato destro (contestuale all'argomento trattato nel sito), ma il secondo menu in ordine di html non funziona (non si chiude).
Cosa dovrei variare nei css e/o nel javascript che fanno funzionare il menu?
Grazie

**skyrob** · 11-04-2005, 15:51

Questo è lo javascript:
var prev= null;

window.onload=function(){
if(document.getElementsByTagName && document.getElementById){
document.getElementById("nav").className="jsenable ";
BuildList();
}
}

function BuildList(){
var hs=document.getElementById("nav").getElementsByTag Name("h3");
for(var i=0;i<hs.length;i++){
hs[i].onclick=function(){
if(this.parentNode.className!="show"){
this.parentNode.className="show";
if(prev && prev!=this.parentNode) prev.className="hide";
prev=this.parentNode;
}
else this.parentNode.className="hide";
}
}
}

e questi sono i css:
jsmenu.css, legato al funzionamento dello script

div.jsenable h3{cursor: pointer}
div.jsenable ul ul{display:none}
div#nav li.hide ul{display:none}
div#nav li.show ul{display:block}
div#nav li.show h3{background-color: #FF0}

e menu.css che al mio scopo non interessa:
div#nav{width:170px;margin-left: 30px;background: #00005A;
border: 1px solid #00005A; font: 11px Arial, Helvetica, sans-serif}
div#nav h3{font-size: 100%;margin: 0;padding: 4px 10px;
border-top: 1px solid #FFF;color: #000;background-color: #7BA5E7}
div#nav ul,div#nav li{margin: 0;padding: 0;list-style-type: none}
div#nav li{margin: 0 0 1px 0}
div#nav a{display: block;padding-left: 15px;height: 18px;line-height: 18px;
border-top: 1px solid #FFF;background-color: #BDBDBD;color: #000;
text-decoration: none;font-weight: bold}
div#nav a:hover{color: #00005A;background-color: #0099FF}
div#nav ul ul a{color: #333; background-color: #AECDFF;font-weight: normal}

Ho provato ripetutamente a variare javascript e css ma il secondo menu non funziona:
ecco l'html del menu
<div id="nav">
<ul>[*]Home Page[*]<h3>Linguaggi</h3>
<ul>[*]CSS[*]Javascript[*]DOM[*]PHP[/list]
[*]<h3>Software</h3>
<ul>[*]Photoshop[*]Flash[*]Fireworks[*]Dreamweaver[/list]
[*]<h3>Webdesign</h3>
<ul>[*]Webdesign[*]Accessibilità[*]Usabilità[/list]
[/list]
</div>

Cosa devo variare affinché funzioni con due menu...
PS: non ne so molto, soprattutto di Javascript
Grazie

**badaze** · 11-04-2005, 16:10

Boh !!! Prova questo

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<style type="text/css">
<!--
div.jsenable h3{cursor: pointer} 
div.jsenable ul ul{display:none} 

div li.hide ul{display:none} 
div li.show ul{display:block} 
div li.show h3{background-color: #FF0} 

div{width:170px;margin-left: 30px;background: #00005A; 
border: 1px solid #00005A; font: 11px Arial, Helvetica, sans-serif} 
div h3{font-size: 100%;margin: 0;padding: 4px 10px; 
border-top: 1px solid #FFF;color: #000;background-color: #7BA5E7} 
div ul,div#nav li{margin: 0;padding: 0;list-style-type: none} 
div li{margin: 0 0 1px 0} 
div a{display: block;padding-left: 15px;height: 18px;line-height: 18px; 
border-top: 1px solid #FFF;background-color: #BDBDBD;color: #000; 
text-decoration: none;font-weight: bold} 
div a:hover{color: #00005A;background-color: #0099FF} 
div ul ul a{color: #333; background-color: #AECDFF;font-weight: normal} 
-->
</style>

<script language="JavaScript" type="text/javascript">
<!--
var prev= null; 

window.onload=function() { 
if(document.getElementsByTagName && document.getElementById){ 
 // MENU 1
 document.getElementById("nav1").className="jsenable"; 
 BuildList('nav1');
 // MENU 2
 document.getElementById("nav2").className="jsenable";  
 BuildList('nav2'); 
 } 
} 

function BuildList(idDiv){ 
 var hs=document.getElementById(idDiv).getElementsByTagName("h3"); 
 for(var i=0;i<hs.length;i++){ 
  hs[i].onclick=function(){ 
  if(this.parentNode.className!="show"){ 
   this.parentNode.className="show"; 
   if(prev && prev!=this.parentNode) prev.className="hide"; 
    prev=this.parentNode; 
   } else this.parentNode.className="hide"; 
  } 
 } 
} 

//-->
</script>

<head>
<title>Untitled</title>
</head>
<body>
<div id="nav1"> 
<ul> [*]Home Page [*]<h3>Linguaggi</h3> 
<ul> [*]CSS [*]Javascript [*]DOM [*]PHP [/list]
 [*]<h3>Software</h3> 
<ul> [*]Photoshop [*]Flash [*]Fireworks [*]Dreamweaver [/list]
 [*]<h3>Webdesign</h3> 
<ul> [*]Webdesign [*]Accessibilità [*]Usabilità [/list]
 [/list]
</div> 


<div id="nav2"> 
<ul> [*]Home Page [*]<h3>Cucina</h3> 
<ul> [*]Pasta [*]Pizza [*]Carne [*]Pesce [/list]
 [*]<h3>Habitat</h3> 
<ul> [*]Fai da te [*]Falegnameria [*]Piastrelle [*]Legno [/list]
 [*]<h3>Sport</h3> 
<ul> [*]Calcio [*]Rugby [*]Formula 1 [/list]
 [/list]
</div> 

</body>
</html>

**skyrob** · 11-04-2005, 16:37

Il menu sembra funzionare correttamente
Ciao

Discussione: Inserire due menu dello stesso tipo

Strumenti discussione

Ricerca discussione

Visualizza

Inserire due menu dello stesso tipo

Aiutatemi!!!!!!!

Grazie infinite!

Permessi di invio