RIK: horizontales Accordion

Beitrag lesen

SELF-Forum

horizontales Accordion

RIK
– Informationen zu den Bewertungsregeln

Hi,
ich habe ein Problem. Ich benötige ein horizontales Menü, welches sich langsam nach unten bewegt (Rolloeffekt) und dabei sollte sich ein Backgroundimage aufrollen).

Ich habe es beinahe geschafft, jedoch funktioniert dies anscheinend nur mit Tables und diese werden obwohl ich float:left angegeben habe nicht nebeneinander angezeigt. Eine andere Möglichkeit wäre, das eine Menü zuerst zu schliessen und erst dann das zweite zu öffnen. Leider bin ich dabei überfragt wie dies funktionieren kann.

Ich möchte euch bitten mir Ideen zur Lösung zu geben.

Dankend im voraus. RIK

Unten findet Ihr meinen Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
<head>  
<title>Klapptabelle</title>  
<style type="text/css">  
<!--  
div.dyn {  
  position:relative;  
  overflow:hidden;  
  padding:0;  
}  
  
div.dyn table {  
  width:87px;  
  position:absolute;  
  margin:0;  
  border-collapse:collapse;  
}  
  
div.hist {  
  position:relative;  
  margin-left:300px;  
  overflow:hidden;  
  padding:0;  
}  
  
div.hist table {  
  width:87px;  
  position:absolute;  
  margin:0;  
  border-collapse:collapse;  
}  
  
a.dyn {  
  display:block;  
}  
  
-->  
</style>  
<script type="text/javascript">  
<!--  
var Divs = new Array();  
var Toggles = new Array();  
  
function slide(num, flag){  
  obj = Divs[num];  
  window.clearTimeout(obj.motion);  
  var step=32;  
  uobj = obj.getElementsByTagName('TABLE')[0];  
  oht = obj.style.height;  
  oht = oht.substring(0, oht.indexOf('px'));  
  oht = parseInt(oht);  
  uht = uobj.offsetHeight;  
  if(flag>0){  
    step*=(1-oht/uht);  
    step = Math.ceil(step);  
    while ((step-1) > (uht-oht))  
      step--;  
    oht+=step;  
    obj.style.height= oht + 'px';  
    uobj.style.top = oht-uht;  
    if(oht!=uht)  
      obj.motion = window.setTimeout("slide("+ num +","+ flag +")", 83);  
    else  
      window.clearTimeout(obj.motion);  
  } else {  
    step*=(oht/uht);  
    step = Math.ceil(step);  
    while (step-1 > oht)  
      step--;  
    oht-=step;  
    obj.style.height= oht + 'px';  
    uobj.style.top = oht-uht;  
    if(oht!=0){  
      obj.motion = window.setTimeout("slide("+ num +","+ flag +")", 83);  
    } else {  
      window.clearTimeout(obj.motion);  
    }  
  }  
}  
  
function init () {  
  var j = 0;  
  for (i=0; i<document.getElementsByTagName('DIV').length; i++ ) {  
    if(document.getElementsByTagName('DIV')[i].className=="dyn"){  
      Divs[j] = document.getElementsByTagName('DIV')[i];  
      Divs[j].motion=false;  
      Divs[j].style.height="0px";  
      Table = Divs[j].getElementsByTagName('TABLE')[0];  
      Table.style.top = -1*(Table.offsetHeight+Table.offsetTop) + 'px';  
      j++;  
    }  
	  
	if(document.getElementsByTagName('DIV')[i].className=="hist"){  
      Divs[j] = document.getElementsByTagName('DIV')[i];  
      Divs[j].motion=false;  
      Divs[j].style.height="0px";  
      Table = Divs[j].getElementsByTagName('TABLE')[0];  
      Table.style.top = -1*(Table.offsetHeight+Table.offsetTop) + 'px';  
      j++;  
    }  
  }  
  j = 0;  
  for (i=0; i<document.getElementsByTagName('A').length; i++ ) {  
    if(document.getElementsByTagName('A')[i].className=="dyn"){  
      Toggles[j] = document.getElementsByTagName('A')[i];  
      Toggles[j].flag = 1;  
      Toggles[j].j=j;  
      Toggles[j].onclick = function () {  
							 slide(this.j, this.flag);  
                             this.flag*=-1;  
                           }  
      j++;  
    }  
	  
	if(document.getElementsByTagName('A')[i].className=="hist"){  
      Toggles[j] = document.getElementsByTagName('A')[i];  
      Toggles[j].flag = 1;  
      Toggles[j].j=j;  
      Toggles[j].onclick = function () {  
							 slide(this.j, this.flag);  
                             this.flag*=-1;  
                           }  
      j++;  
    }  
  }  
}  
//-->  
</script>  
</head>  
<body onload="init()">  
 <TABLE BORDER="0">  
      <col style="width:87px;"></col>  
      <TR>  
        <TD><a href="javascript:void(0)" class="dyn" style="color:red">1</a></TD>  
        <TD><a href="javascript:void(0)" class="hist" style="color:red">2</a></TD>  
      </TR>  
  </table>  
  
          <div class="dyn">  
            <TABLE BORDER="1" background="dropdown.gif" height="163px">  
              <col style="width:87px; float:left;"></col>  
  
              <TR>  
                <TD>Diese</TD>  
              </TR>  
              <TR>  
                <TD>nur</TD>  
              </TR>  
  
              <TR>  
                <TD>ob</TD>  
              </TR>  
              <TR>  
                <TD>abgebremst</TD>  
              </TR>  
              <TR>  
                <TD>Diese</TD>  
              </TR>  
              <TR>  
                <TD>nur</TD>  
              </TR>  
            </TABLE>  
		</div>  
  
  <div class="hist">  
    <TABLE BORDER="1" background="dropdown.gif" height="163px">  
      <col style="width:87px;"></col>  
  
      <TR>  
        <TD>Historie</TD>  
      </TR>  
      <TR>  
        <TD>nur</TD>  
      </TR>  
  
      <TR>  
        <TD>ob</TD>  
      </TR>  
      <TR>  
        <TD>abgebremst</TD>  
      </TR>  
      <TR>  
        <TD>Diese</TD>  
      </TR>  
      <TR>  
        <TD>nur</TD>  
      </TR>  
    </TABLE>  
  </div>  
  
<table border="1" style="float:left;">  
<tr>  
<td>  
1\.tabelle  
</td></tr></table>  
<table border="1">  
<tr>  
<td>  
2\.tabelle  
</td></tr></table>  
</body>  
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln