nicht angemeldet
horizontales Accordion
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>
-
Liebe(r) RIK,
jedoch funktioniert dies anscheinend nur mit Tables
ganz sicher ist das nicht der Fall. Ich vermute stark, dass Du im IE testest (wahrscheinlich Version 6). Da verwundert es nicht, dass Du von diesem Unsinn mit Tabellen schreibst. In welchen Browsern hast Du das beschriebene Anzeigeproblem?
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Hallo Felix,
ich verwende den FF 3.5.9 und möchte sowieso nicht mit tables arbeiten, DIVS wären mir lieber.
Bereits seit einigen Tagen bin ich dabei nur ein Menü zu erstellen, welches von oben nach unten scrollt und mit BG Images arbeiten kann.
Auch mit den MOOTools Tween Effekt habe ich Problem, scheint zu funktionieren, aber mit sobald ich im CSS mit Hintergrundbildern arbeite, bleiben die Menüs mit als Mouseenter öffen, erst wenn ich einmal über alle Menüs fahre, werden diese geschlossen. Ist auch kein sinnvoller Weg.Liebe Grüsse
RIK-
Hi,
[...] und möchte sowieso nicht mit tables arbeiten, DIVS wären mir lieber.
Bereits seit einigen Tagen bin ich dabei nur ein Menü zu erstellenWenn du dir „ein Menü erstellen“ willst, dann fange damit an, dies sinnvoll im HTML auszuzeichen - als Liste, ggf. verschachtelt.
MfG ChrisB
--
“Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
-
-