mehrer DIV-Tags verschieben

fanste

Erfahrenes Mitglied
Hallo.
Hab da n Problem. Und zwar:
Ich bin grad dabei mir ein Menü in Javascript für meine Seite zu Programmieren.
Mit meinem Code kann schaffe ich es so, dass wenn an auf einen DIV-Tag geht, ein anderer eingeblendet wird, bei dem die "verborgenen" Links stehen, gleichzeitig wird er Nächste sichtbare DIV-Tag nach unten verschoben, damit alles wieder in einer Reihe ist.
Aber ich schaffe es halt nur so, das der NÄCHSTE DIV-Tag verschoben wird. Wie mache ich es so, dass alle darauffolgeneden Tags verschoben werden

Hier die Codes:

Die Linkseite:
Code:
<HTML>
<HEAD>
<TITLE>Ihr Menü</TITLE>
<style TYPE='text/css'>
<!--
A:LINK {text-decoration: none;}
A:VISITED {text-decoration: none;}
A:ACTIVE {text-decoration: none}
-->
.Menu
{
position: absolute;
z-index: 2;
}
.SubMenu
{
position: absolute;
z-index: 0;
visibility: hide;
visibility: hidden;
}
</style>
<script type="text/javascript" src="menu.js"></script>
</HEAD>
 
<body>
 
<!-- Menüpunkt Nr.1 -->
<div id="menue0" class="Menu" style="left: 5; top:1; z-index: 2" onmouseover=show_layer('untermenue0','49','2') onmouseout=hide_layer('untermenue0','26','2')>
<table bgcolor="#C0C0C0" cellspacing=0 cellpadding=2 border=0 width=100 style="border-collapse: collapse" > 
<tr height=25><td><b><font color="#2F4914">Verwaltung</font></b>
</table></div>
 

<!-- Untermenü von Menü Nr.1 -->
<div id="untermenue0" class="SubMenu" style="left: 5; top: 26; z-index: 0;" onmouseover=show_layer('untermenue0','49','2') onmouseout=hide_layer('untermenue0','26','2')>
<table bgcolor="#DDDDDD" cellpadding=2 border=0 width=100 style="border-collapse: collapse">
<tr height=20><td><a href="http://blabla.de" target="_self"><font color="#000000">Stundenplan</font></a>
</table></div>
 
<!-- Menüpunkt Nr.2 -->
<div id="menue1" class="Menu" style="left: 5; top:26; z-index: 2" onmouseover=show_layer('untermenue1','1','0') onmouseout=hide_layer('untermenue1','1','0')>
<table bgcolor="#C0C0C0" cellpadding=2 border=0 width=100 style="border-collapse: collapse" > 
<tr height=25><td><b><font color="#2F4914">bla</font></b>
</table></div>
 
<!-- Untermenü von Menü Nr.2 -->
<div id="untermenue1" class="SubMenu" style="left: 5; top: 51; z-index: 0;" onmouseover=show_layer('untermenue1','1','0') onmouseout=hide_layer('untermenue1','1','0')>
<table bgcolor="#DDDDDD" cellpadding=2 border=0 width=100 style="border-collapse: collapse">
<tr height=20><td><a href="http://www.blabla.de" target="_self"><font color="#000000">blu</font></a>
</table></div>
 
</body>
</html>

die menu.js:
Code:
function show_layer(x,y,z)
{
if(document.layers)
document.layers[x].visibility='show';
else
document.all[x].style.visibility='visible';
if(y != null)
document.getElementsByTagName('div')[z].style.top=y;
}
function hide_layer(x,y,z)
{
if(y != null)
document.getElementsByTagName('div')[z].style.top=y;
if(document.layers)
document.layers[x].visibility='hide';
else
document.all[x].style.visibility='hidden';
}
var old;
var memold;
if(document.layers)
{
window.captureEvents(Event.MOUSEUP);
window.onmouseup=do_out;
}
else
{
document.onmouseup=do_out;
}
function do_out()
{
if(old)
hide_layer(old);
memold=old;
old='';
}

hoffentlich war das nicht zu kompliziert erklärt.
mb fanste
 
Am Einfachsten liesse sich das Ganze lösen, wenn du die Ganzen <div>'s relative positionierst und dann statt der visibility das display jeweils in none oder block änderst.
Dabei sparst du auch das umständliche Positionieren jedes einzelnen Menupunktes.
 
Zurück