Submenu binnen een submenu

Status
Niet open voor verdere reacties.
D

DEWCAP

Gebruiker
Lid geworden
14 dec 2006
Berichten
79
Heren/Dames,

Ik heb op het wereldwijde web een mooie javascript gevonden die een dropdown menu voorstelt. Nu had ik graag deze code een beetje aangepast, maar daarvoor heb ik natuurlijk kennis van Javascript nodig :-)

Wat wil ik nu precies? Onderstaande code geeft een hoofdmenu met daaronder een submenu. Ik zou nu graag, indien mogelijk, onder het submenu nog een sub sub menu.
Bv 1 > 1.1 > 1.1.1.

Kan iemand mij hiermee helpen? Alvast bedankt!!

Code: 
<html>

<head>
<script language="JavaScript">
function goToURL() { history.go(-1); }
</script>
<style>
  .menu
  {
   background-color:#6666FF;
   border:1px solid darkblue;
   width:150px;
   font-size:11px;
   font-family:verdana;
   position: absolute;
   font:bold;
   color: #ffffff;
   cursor: hand;
  }
  .item_panel
  {
    width:150px;
    border-left:1px solid darkblue;
    border-right:1px solid darkblue;
    clip:rect(0,150,0,0);
    position:absolute;
  }
  .item_panel a
  {
   text-decoration:none;
   color:black;
   cursor:hand;
  }
  .item
  {
   background-color: #99CCFF;
   width: 148px;
   font-size: 10px;
   font-family: verdana;
   
  }
  </style>
  
  <script language="JavaScript">  
  var height = 20; // Hoogte van de hoofdmenu linken
  var iheight = 15; // hoogte van de menu elementen 
  var bgc = "#D8D8D8" // Achtergrondkleur menu element
  var tc = "black" // text kleur van het menu element 
  var over_bgc = "#FFFFFF";//achtergrondkleur menu item bij mouse-over
  var over_tc = "#FF0000"; //teskt kleur bij mouse-over
  var speed = 0;
  var timerID = "";
  var N = (document.all) ? 0 : 1;
  var width = 152;
  var self_menu = new Array();
function write_menu()
{
  smc = 0; 
  document.write("<div style='position:absolute'>");
  mn = 0;
  mni = 1;
  start = -1;  
  for(i=0;i<Link.length;i++)
  {
   la = Link[i].split("|");
   if (la[0] == "0")
   {
    if(start == 0) 
     {
      document.write("</div>");
      h =  csmc * iheight;
      tmn = mn; //-h
      self_menu[smc] = new Array(tmn,h,0,-2);
      smc++;
      mn--;
     }
     csmc = 0;
    document.write("<div class='menu' style='top:"+mn+";height:"+height+"' id='down"+smc+"' onclick='pull_down("+smc+","+mni+")'> "+ la[1] + "</div>");
    self_menu[smc] = new Array(mn,height,0,mni);
    smc++;
    mni++;
    mn+=height;
    start = 1;
   }
   else
   {
    if(start == 1) 
     {
      if(N)mn+=2;
       document.write("<div class='item_panel' id='down"+smc+"' style='top:"+mn+"'>");
       start = 0;
     }
    
    document.write("<a href='"+la[2]+"'");
    if (la[3] != "") document.write(" target='" + la[3] + "' ");
    document.write("><div class='item' id='d"+i+"' style='height:"+iheight);
    if (N) document.write(";width:150");
    document.write("' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>  "+ la[1] + "</div></a>");
    csmc++;
   }
  }
  if (start == 0) 
   {
     document.write("</div>");
     h =  csmc * iheight;
     tmn = mn + 5; //-h
     self_menu[smc] = new Array(tmn,h,0);
     name = "down" + (self_menu.length-1);
     obj = document.getElementById(name);
     obj.style.borderBottomColor = "darkblue";
     obj.style.borderBottomWidth = 1;
     obj.style.borderBottomStyle = "solid";
   }
  document.write("</div>");}
function color(obj)
{
 document.getElementById(obj).style.backgroundColor = over_bgc;
 document.getElementById(obj).style.color = over_tc
}

function uncolor(obj)
{
 document.getElementById(obj).style.backgroundColor = bgc;
 document.getElementById(obj).style.color = tc
}

function pull_down(nr,c)
{
 if (timerID == "")
 {
 to = self_menu[nr+1][1]
 begin = nr + 2;
 if (timerID != "") clearTimeout(timerID);
 if (self_menu[nr+1][2] == 0)
 {
  self_menu[nr+1][2] = 1;
  if(nr == self_menu.length-2) {to++;}
  epull_down(begin,to,0);
 }
 else
 {
  to = 0;
  self_menu[nr+1][2] = 0;
  name = "down"+(nr+2);
  open_item = 0;
  for(i=0;i<nr;i++)
  {
   if(self_menu[i][2] == 1) 
    {open_item += self_menu[i][1];
    }
  }
  if (N == false) {open_item-= (c*1)};
  if (nr== self_menu.length-2) {val = self_menu[self_menu.length-1][1];to=-1;}
  else  val = parseInt(document.getElementById(name).style.top) -(open_item)-(c*height);
  epull_up(begin,to,val);
 }
 }
}

function epull_down(nr,to,nowv)
{
 name = "down" + (nr-1);
 obj = document.getElementById(name).style.clip = "rect(0,"+width+","+(nowv+1)+",0)";
 for (i=nr;i<self_menu.length;i++)
 {
  name = "down" + i;
  obj = document.getElementById(name);
  obj.style.top = parseInt(obj.style.top)+1;
 }
 nowv++;
 if(nowv < to) timerID = setTimeout("epull_down("+nr+","+to+","+nowv+")",speed);
 else timerID = "";
}

function epull_up(nr,to,nowv)
{
 name = "down" + (nr-1);
 obj = document.getElementById(name).style.clip = "rect(0,"+width+","+nowv+",0)";
 for (i=nr;i<self_menu.length;i++)
 {
  name = "down" + i;
  obj = document.getElementById(name);
  obj.style.top = parseInt(obj.style.top)-1;
 }
 nowv--;
 if(nowv > to) timerID = setTimeout("epull_up("+nr+","+to+","+nowv+")",speed);
 else timerID = "";
}

function startup(nr)
{
 write_menu();
 if (nr != 0)
 {
 for(i=0;i<self_menu.length;i++)
 {
  if(self_menu[i][3] == nr) pull_down(i,nr)
  i==self_menu.length;
 }
 }
}  
</script>
</head>

<body>
<center>
<table width=140>
<tr>
<td>
<script language="JavaScript">
      //Link[nr] = "positie [0 is menu/1 is een item],Link naam ,url,target (blank|top|frame_naam)"
      // je kunt eenvoudig items toevoegen, gewoon doornummeren
  var Link = new Array();
  Link[0] = "0|Hoofd link 1";
  Link[1] = "1|Sublink 1|http://www.leejoo.nl|blank";
  Link[2] = "1|Sublink 1|http://www.leejoo.nl|blank";
  Link[3] = "1|Sublink 1|http://www.leejoo.nl|blank";
  Link[4] = "1|Sublink 1|http://www.leejoo.nl|blank";
  Link[5] = "0|Hoofd link 2";
  Link[6] = "1|Sublink 2|http://www.leejoo.nl|blank";
  Link[7] = "1|Sublink 2|http://www.leejoo.nl|blank";
  Link[8] = "1|Sublink 2|http://www.leejoo.nl|blank";
  Link[9] = "1|Sublink 2|http://www.leejoo.nl|blank"
  Link[10] = "0|Hoofd link 3";
  Link[11] = "1|Sublink 3|http://www.leejoo.nl|blank";
  Link[12] = "1|Sublink 3|http://www.leejoo.nl|blank";
  Link[13] = "0|Hoofd link 4";
  Link[14] = "1|Sublink 4|http://www.leejoo.nl|blank";
  Link[15] = "1|Sublink 4|http://www.leejoo.nl|blank";
  Link[16] = "1|Sublink 4|http://www.leejoo.nl|blank";
  Link[17] = "1|Sublink 4|http://www.leejoo.nl|blank";
  Link[18] = "0|Hoofd link 5";
  Link[19] = "1|Sublink 5|http://www.leejoo.nl|blank";
  Link[20] = "1|Sublink 5|http://www.leejoo.nl|blank";
  Link[21] = "1|Sublink 5|http://www.leejoo.nl|blank";
  Link[22] = "1|Sublink 5|http://www.leejoo.nl|blank";
    startup(0);
  </script>
  </td>
 </tr>
</table>

</body>

</html>
 
Dit is maar een gok, maar probeer dit eens. Het zou zomaar kunnen werken :P
Code: 
  Link[19] = "1|Sublink 5|http://www.leejoo.nl|blank";
  Link[20] = "2|SubSublink?|http://www.leejoo.nl|blank";
  Link[21] = "2|SubSublink|http://www.leejoo.nl|blank";
  Link[22] = "2|SubSublink|http://www.leejoo.nl|blank";
 
Hey Glest,

Bedankt voor het antwoord maar dit helpt niet. Het menu/submenu blijft hetzelfde, enkel de tekst veranderd.

Niemand die hier ervaring mee heeft?

Mvg,
Kevin
 
dit werkt!

DEWCAP zei:
Hey Glest,

Bedankt voor het antwoord maar dit helpt niet. Het menu/submenu blijft hetzelfde, enkel de tekst veranderd.

Niemand die hier ervaring mee heeft?

Mvg,
Kevin
Klik om te vergroten...


ik ben sinds kort het XML curcuit ingestapt hahaha en heb er een beetje mee zitten spelen en bij mij werkt dit :


<menu id="menu3" keytip="A" screentip="ABC" supertip="AAA" description="Menu" label="Templates" showImage="false" itemSize="normal">
<menu id="menu6" keytip="e" screentip="ABC" supertip="AAA" description="Menu" label="&amp;Res-Q Service" showImage="false" itemSize="normal">
<menu id="menu61" keytip="e" screentip="ABC" supertip="AAA" description="Menu" label="&amp;Template1" showImage="false" itemSize="normal">
<button id="button611" label="button611"/>
</menu>
<menu id="menu62" keytip="e" screentip="ABC" supertip="AAA" description="Menu" label="&amp;Template2" showImage="false" itemSize="normal">
<button id="button622" label="button622"/>
</menu>

</menu>
</menu>

hiermee LUKT het! ;) het is de manier waarop je alle menus verdeeld
maar ik heb zelf nog een vraag waar je mij dan mee moet helpen :p
ik heb ook een dropdown functie maar die staat nu niet in mijn submenu.
maar hij moet er dus om het makkelijk te zeggen zo komen uit te zien menu>submenu>dropdown. mij wilt het maar niet lukken jij enig idee?
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan