# JavaScript Menü, Funktion hinzufügen



## Chriz (22. Dez 2003)

Hallo an Alle!

Habe ein tolles JavaScript Menü gefunden und in meine Homepage eingebaut.
Sehr viele Links sind auf meiner Site und mich stört, dass der User das Menü voll ausklappen kann.
Das Ende der Site ist dann schnell erreicht und ab da ist der Aufbau leider sehr langsam.
Ich würde mir wünschen das immer nur ein Menüpunkt mit seinen Unterpunkten geöffnet werden kann.
Klickt der User auf einen weiteren sollte sich der aktive wieder schließen.
Vielleicht kann mir jemand weiterhelfen, habe mit Java noch kaum Erfahrung.

Vielen Dank im Vorraus! Chriz

Der Quellcode der Site:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<div align="center">






          <script LANGUAGE="JavaScript"> 
function goToURL() { history.go(-1); } 
</script>
          <style> 
  .menu 
  { 
   position:relative; 
   background-color:#0099FF; 
   border:1px solid darkblue; 
   width:150; 
   font-size:11px; 
   font-family:verdana; 
   font:bold; 
   position:absolute; 
   cursor:se-resize; 
  } 
  .item_panel 
  { 
    width:150; 
    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:#FFFF00; 
   width:148; 
   font-size:10px; 
   font-family:verdana; 
  } 
  </style>
          <script language="JavaScript" src="slidemenu.js"></script><center>
          </p>
        </div>
      <table width=150 align="center">
        <tr><td> 


<script language="JavaScript"> 
  //Link[nr] = "position [0 is menu/1 is item],Link name,url,target (blank|top|frame_name)" 
  var Link = new Array(); 
  Link[0] = "0|Schriftzug"; 
  Link[1] = "1|Link1|http://www.chip.de|blank"; 
  Link[2] = "1|Link2|http://www.astalavista.de|blank"; 
  Link[3] = "0|Test"; 
  Link[4] = "1|Link3|http://www.google.de|blank"; 
  Link[5] = "1|link4|http://www.web.de|blank"; 
  Link[6] = "0|Neu|";
  Link[7] = "1|Link5|http://www.google|blank";
  Link[8] = "1|Link6|http://www.yahoo.de|blank";
  startup(1); 
  </script> 
</body>
</html>





Das JavaScript:

  var height = 20; // height of the menu headers 
  var iheight = 15; // height of the menu_items 


  var bgc = "lightyellow" // background color of the item 
  var tc = "black" // text color of the item 


  var over_bgc = "silver"; 
  var over_tc = "red"; 


  var speed = 0; 
  var timerID = ""; 
  var N = (document.all) ? 0 : 1; 
  var width = 151 



  var self_menu = new Array(); 
function write_menu() 
{ 
  smc = 0; // count the position of the self_menu 
  document.write("<div style='position:absolute'>"); 
  mn = 0; 
  mni = 1; 
  start = -1; 


  for(i=0;i<Link.length;i++) 
  { 
   la = Link_.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[2] == 1) 
    {open_item += self_menu[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[3] == nr) pull_down(i,nr) 
  i==self_menu.length; 
 } 
 } 
} 
[/b]_


----------



## bo (22. Dez 2003)

hallo !

schon mal gehöft ? :

*java != javascript !*

es gibt extra n forum für javascript bei java-forum ! (siehe ganz unten bei der foremübersicht)

greez bezzi


----------



## el_barto (22. Dez 2003)

@bo:

jetzt kann ich mich mal revanchieren siehe http://www.java-forum.net/viewtopic.php?t=1360
-> ist bereits ins javascript-forum verschoben, nur hier noch nicht gelöscht


----------



## bo (22. Dez 2003)

@el_barto

das : http://www.java-forum.net/viewtopic.php?t=1360
ist Senejas beitrag ;-)

wünsch dir noch was   

greeez bezzi


----------



## Chriz (22. Dez 2003)

Meinen Beitrag/Frage habe ich eigenständig rüberkopiert.
Das hier kann man dann also Löschen.
Sorry nochmal!

Bis dann! Peace!

Chriz


----------



## el_barto (22. Dez 2003)

@bo

jojo, ist schon richtig. der link sollte auf den beitrag von seneja gehen. damit du weißt, was ich mit revanche meine  :wink:


----------

