login  Naam:   Wachtwoord: 
Registreer je!
 Scripts:
Scripts > JS > Navigatie > Dynamisch menu

Dynamisch menu

Auteur: Leejoo - 19 februari 2005 - 14:19 - Gekeurd door: Joel - Hits: 11429 - Aantal punten: 4.39 (9 stemmen)



Wijzig alleen de dingen in de body verder moet je in de head niets wijzigen.

Dekin.

Code:
Zet dit in de Head.

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <head>
  2. <script language="JavaScript">
  3. function goToURL() { history.go(-1); }
  4. </script>
  5. <style>
  6.   .menu
  7.   {
  8.    background-color:#6666FF;
  9.    border:1px solid darkblue;
  10.    width:150px;
  11.    font-size:11px;
  12.    font-family:verdana;
  13.    position: absolute;
  14.    font:bold;
  15.    color: #ffffff;
  16.    cursor: hand;
  17.   }
  18.   .item_panel
  19.   {
  20.     width:150px;
  21.     border-left:1px solid darkblue;
  22.     border-right:1px solid darkblue;
  23.     clip:rect(0,150,0,0);
  24.     position:absolute;
  25.   }
  26.   .item_panel a
  27.   {
  28.    text-decoration:none;
  29.    color:black;
  30.    cursor:hand;
  31.   }
  32.   .item
  33.   {
  34.    background-color: #99CCFF;
  35.    width: 148px;
  36.    font-size: 10px;
  37.    font-family: verdana;
  38.  
  39.   }
  40.   </style>
  41.  
  42.   <script language="JavaScript">  
  43.   var height = 20; // Hoogte van de hoofdmenu linken
  44.   var iheight = 15; // hoogte van de menu elementen 
  45.   var bgc = "#D8D8D8" // Achtergrondkleur menu element
  46.   var tc = "black" // text kleur van het menu element 
  47.   var over_bgc = "#FFFFFF";//achtergrondkleur menu item bij mouse-over
  48.   var over_tc = "#FF0000"; //teskt kleur bij mouse-over
  49.   var speed = 0;
  50.   var timerID = "";
  51.   var N = (document.all) ? 0 : 1;
  52.   var width = 152;
  53.   var self_menu = new Array();
  54. function write_menu()
  55. {
  56.   smc = 0; 
  57.   document.write("<div style='position:absolute'>");
  58.   mn = 0;
  59.   mni = 1;
  60.   start = -1;  
  61.   for(i=0;i<Link.length;i++)
  62.   {
  63.    la = Link[i].split("|");
  64.    if (la[0] == "0")
  65.    {
  66.     if(start == 0) 
  67.      {
  68.       document.write("</div>");
  69.       h =  csmc * iheight;
  70.       tmn = mn; //-h
  71.       self_menu[smc] = new Array(tmn,h,0,-2);
  72.       smc++;
  73.       mn--;
  74.      }
  75.      csmc = 0;
  76.     document.write("<div class='menu' style='top:"+mn+";height:"+height+"' id='down"+smc+"' onclick='pull_down("+smc+","+mni+")'> "+ la[1] + "</div>");
  77.     self_menu[smc] = new Array(mn,height,0,mni);
  78.     smc++;
  79.     mni++;
  80.     mn+=height;
  81.     start = 1;
  82.    }
  83.    else
  84.    {
  85.     if(start == 1) 
  86.      {
  87.       if(N)mn+=2;
  88.        document.write("<div class='item_panel' id='down"+smc+"' style='top:"+mn+"'>");
  89.        start = 0;
  90.      }
  91.  
  92.     document.write("<a href='"+la[2]+"'");
  93.     if (la[3] != "") document.write(" target='" + la[3] + "' ");
  94.     document.write("><div class='item' id='d"+i+"' style='height:"+iheight);
  95.     if (N) document.write(";width:150");
  96.     document.write("' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>  "+ la[1] + "</div></a>");
  97.     csmc++;
  98.    }
  99.   }
  100.   if (start == 0) 
  101.    {
  102.      document.write("</div>");
  103.      h =  csmc * iheight;
  104.      tmn = mn + 5; //-h
  105.      self_menu[smc] = new Array(tmn,h,0);
  106.      name = "down" + (self_menu.length-1);
  107.      obj = document.getElementById(name);
  108.      obj.style.borderBottomColor = "darkblue";
  109.      obj.style.borderBottomWidth = 1;
  110.      obj.style.borderBottomStyle = "solid";
  111.    }
  112.   document.write("</div>");}
  113. function color(obj)
  114. {
  115.  document.getElementById(obj).style.backgroundColor = over_bgc;
  116.  document.getElementById(obj).style.color = over_tc
  117. }
  118.  
  119. function uncolor(obj)
  120. {
  121.  document.getElementById(obj).style.backgroundColor = bgc;
  122.  document.getElementById(obj).style.color = tc
  123. }
  124.  
  125. function pull_down(nr,c)
  126. {
  127.  if (timerID == "")
  128.  {
  129.  to = self_menu[nr+1][1]
  130.  begin = nr + 2;
  131.  if (timerID != "") clearTimeout(timerID);
  132.  if (self_menu[nr+1][2] == 0)
  133.  {
  134.   self_menu[nr+1][2] = 1;
  135.   if(nr == self_menu.length-2) {to++;}
  136.   epull_down(begin,to,0);
  137.  }
  138.  else
  139.  {
  140.   to = 0;
  141.   self_menu[nr+1][2] = 0;
  142.   name = "down"+(nr+2);
  143.   open_item = 0;
  144.   for(i=0;i<nr;i++)
  145.   {
  146.    if(self_menu[i][2] == 1) 
  147.     {open_item += self_menu[i][1];
  148.     }
  149.   }
  150.   if (N == false) {open_item-= (c*1)};
  151.   if (nr== self_menu.length-2) {val = self_menu[self_menu.length-1][1];to=-1;}
  152.   else  val = parseInt(document.getElementById(name).style.top) -(open_item)-(c*height);
  153.   epull_up(begin,to,val);
  154.  }
  155.  }
  156. }
  157.  
  158. function epull_down(nr,to,nowv)
  159. {
  160.  name = "down" + (nr-1);
  161.  obj = document.getElementById(name).style.clip = "rect(0,"+width+","+(nowv+1)+",0)";
  162.  for (i=nr;i<self_menu.length;i++)
  163.  {
  164.   name = "down" + i;
  165.   obj = document.getElementById(name);
  166.   obj.style.top = parseInt(obj.style.top)+1;
  167.  }
  168.  nowv++;
  169.  if(nowv < to) timerID = setTimeout("epull_down("+nr+","+to+","+nowv+")",speed);
  170.  else timerID = "";
  171. }
  172.  
  173. function epull_up(nr,to,nowv)
  174. {
  175.  name = "down" + (nr-1);
  176.  obj = document.getElementById(name).style.clip = "rect(0,"+width+","+nowv+",0)";
  177.  for (i=nr;i<self_menu.length;i++)
  178.  {
  179.   name = "down" + i;
  180.   obj = document.getElementById(name);
  181.   obj.style.top = parseInt(obj.style.top)-1;
  182.  }
  183.  nowv--;
  184.  if(nowv > to) timerID = setTimeout("epull_up("+nr+","+to+","+nowv+")",speed);
  185.  else timerID = "";
  186. }
  187.  
  188. function startup(nr)
  189. {
  190.  write_menu();
  191.  if (nr != 0)
  192.  {
  193.  for(i=0;i<self_menu.length;i++)
  194.  {
  195.   if(self_menu[i][3] == nr) pull_down(i,nr)
  196.   i==self_menu.length;
  197.  }
  198.  }
  199. }  
  200. </script>


Zet dit in de Body.
php code - Bekijk de code zonder highlighting - Klap code in 
  1. </Body>
  2. <center>
  3. <table width=140>
  4. <tr>
  5. <td>
  6. <script language="JavaScript">
  7.       //Link[nr] = "positie [0 is menu/1 is een item],Link naam ,url,target (blank|top|frame_naam)"
  8.       // je kunt eenvoudig items toevoegen, gewoon doornummeren
  9.   var Link = new Array();
  10.   Link[0] = "0|Sitemasters links";
  11.   Link[1] = "1|Sitemasters|http://www.sitemasters.be";
  12.   Link[2] = "1|Startpagina|http://www.startpagina.nl";
  13.   Link[3] = "1|Wanadoo|http://www.wanadoo.nl";
  14.   Link[4] = "1|Leejoo|http://www.leejoo.nl|blank";
  15.   Link[5] = "0|Hoofd link 2";
  16.   Link[6] = "1|Sublink 2|http://www.leejoo.nl|blank";
  17.   Link[7] = "1|Sublink 2|http://www.leejoo.nl|blank";
  18.   Link[8] = "1|Sublink 2|http://www.leejoo.nl|blank";
  19.   Link[9] = "1|Sublink 2|http://www.leejoo.nl|blank"
  20.   Link[10] = "0|Hoofd link 3";
  21.   Link[11] = "1|Sublink 3|http://www.leejoo.nl|blank";
  22.   Link[12] = "1|Sublink 3|http://www.leejoo.nl|blank";
  23.   Link[13] = "0|Hoofd link 4";
  24.   Link[14] = "1|Sublink 4|http://www.leejoo.nl|blank";
  25.   Link[15] = "1|Sublink 4|http://www.leejoo.nl|blank";
  26.   Link[16] = "1|Sublink 4|http://www.leejoo.nl|blank";
  27.   Link[17] = "1|Sublink 4|http://www.leejoo.nl|blank";
  28.   Link[18] = "0|Hoofd link 5";
  29.   Link[19] = "1|Sublink 5|http://www.leejoo.nl|blank";
  30.   Link[20] = "1|Sublink 5|http://www.leejoo.nl|blank";
  31.   Link[21] = "1|Sublink 5|http://www.leejoo.nl|blank";
  32.   Link[22] = "1|Sublink 5|http://www.leejoo.nl|blank";
  33.   startup(0);
  34.   </script>
  35.   </td>
  36.  </tr>
  37. </table>

Download code! Download code (.txt)

 Bekijk een voorbeeld van dit script!
 Stemmen
Niet ingelogd.

 Reacties
Post een reactie
Lees de reacties (5)
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.048s