Detlev Dierse: Newbie hat Problem mit Pull Downmenu

SELF-Forum

Newbie hat Problem mit Pull Downmenu

Detlev Dierse
– Informationen zu den Bewertungsregeln

Hallo,
ich bin Javscript- und CSS Anfänger und  versuche mir grade ein eigenes Pull Downmenu zu stricken. Dabei habe ich das Problem, das beim Öffnen der ersten Menuebene ein unschöner Abstand zu den darunterliegenden Menuebenen entsteht. Bei den Unteroptionen passiert das komischerweise nicht. Ich habe versucht dieses mit Stylesheetangaben zu lösen, aber nichts hat bis jetzt geklappt. Wäre schön, wenn mir einer helfen könnte.
MfG Detlev

P.S. Ich weiss, dass sich in der Funktion menu ein ziemlich fetter Fehler eingeschlichen hat:-)) Fällt bei den heutigen Rechnern aber nicht mehr ins Gewicht.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
 <title>Unbenannt</title>
 <style type="text/css">
 a {margin-bottom:0px;}
 a:hover {color:#0000ff;}
 Body
        {
        scrollbar-base-color:#000000;
  scrollbar-3dlight-color:#FFFFFF;
  scrollbar-arrow-color:#FFFFFF;
  scrollbar-darkshadow-color:#000000;
  scrollbar-face-color:#000000;
  scrollbar-highlight-color:#FFFFFF;
  scrollbar-shadow-color:#000000;
  scrollbar-track-color:#FFFFFF;
}

</style>

<script language="JavaScript1.2" type="text/javascript">
 var hauptmenu = new Array("menu1","menu2","menu3","menu4");
 var haupt = hauptmenu.length;
 var submen = new Array("sub11","sub12","sub13","sub14","sub21","sub22","sub23","sub24",
 "sub31","sub32","sub33","sub34","sub41","sub42","sub43","sub44");
 var subm = submen.length;

function verstecken(){
 for(var i=0; i<haupt; i++){
 document.getElementById(hauptmenu[i]).style.display="none";

}
 }
 function menu(m){
 if(document.getElementById(m).style.display=="block"){
 document.getElementById(m).style.display="none";

}
 else
 for( var i=0; i<haupt; i++){

document.getElementById(hauptmenu[i]).style.display="none";
 document.getElementById(m).style.display="block";
 //alert("Hallo")
 }
 for(i=0; i<subm; i++){
 document.getElementById(submen[i]).style.display="none";
 }

}

function submenu(s){
 if(document.getElementById(s).style.display=="block"){
 document.getElementById(s).style.display="none";
 }
 else
    for( var i=0; i<subm; i++){
 document.getElementById(submen[i]).style.display="none";
 document.getElementById(s).style.display="block";
 }
 }
 </script>
</head>

<body onload="verstecken()">
<a href="javascript:menu('menu1')">Menu1</a>
<div id=menu1>

<a href="javascript:submenu('sub11');">Option1</a><br>
<div id=sub11>
<a href="http://www.uni-koeln.de">Sub1</a><br>
<a href="#">Sub2</a><br>
<a href="#">Sub3</a><br>
</div>

<a href="javascript:submenu('sub12');">Option2</a><br>
<div id=sub12>
<a href="http://www.uni-koeln.de">Sub1</a><br>
<a href="#">Sub2</a><br>
<a href="#">Sub3</a><br>
</div>
<a href="javascript:submenu('sub13');">Option3</a><br>
<div id=sub13>
<a href="http://www.uni-koeln.de">Sub1</a><br>
<a href="#">Sub2</a><br>
<a href="#">Sub3</a><br>
</div>
<a href="javascript:submenu('sub14');">Option4</a><br>
<div id=sub14>
<a href="http://www.uni-koeln.de">Sub1</a><br>
<a href="#">Sub2</a><br>
<a href="#">Sub3</a><br>
</div>

</div>
<br>

<a href="javascript:menu('menu2')" >Menu2</a>
<div id=menu2>
<a href="javascript:submenu('sub21');">Option1</a><br>
<div id=sub21>
<a href="http://www.uni-koeln.de">Sub1</a><br>
<a href="#">Sub2</a><br>
<a href="#">Sub3</a><br>
</div>

<a href="javascript:submenu('sub22');">Option2</a><br>
<div id=sub22>
<a href="http://www.uni-koeln.de">Sub1</a><br>
<a href="#">Sub2</a><br>
<a href="#">Sub3</a><br>
</div>
<a href="javascript:submenu('sub23');">Option3</a><br>
<div id=sub23>
<a href="http://www.uni-koeln.de">Sub1</a><br>
<a href="#">Sub2</a><br>
<a href="#">Sub3</a><br>
</div>
<a href="javascript:submenu('sub24');">Option4</a><br>
<div id=sub24>
<a href="http://www.uni-koeln.de">Sub1</a><br>
<a href="#">Sub2</a><br>
<a href="#">Sub3</a><br>
</div>

</div><br>
<a href="javascript:menu('menu3')">Menu3</a>
<div id=menu3>

<a href="javascript:submenu('sub31');">Option1</a><br>
<div id=sub31>
<a href="http://www.uni-koeln.de">Sub1</a><br>
<a href="#">Sub2</a><br>
<a href="#">Sub3</a><br>
</div>

<a href="javascript:submenu('sub32');">Option2</a><br>
<div id=sub32>
<a href="http://www.uni-koeln.de">Sub1</a><br>
<a href="#">Sub2</a><br>
<a href="#">Sub3</a><br>
</div>
<a href="javascript:submenu('sub33');">Option3</a><br>
<div id=sub33>
<a href="http://www.uni-koeln.de">Sub1</a><br>
<a href="#">Sub2</a><br>
<a href="#">Sub3</a><br>
</div>
<a href="javascript:submenu('sub34');">Option4</a><br>
<div id=sub34>
<a href="http://www.uni-koeln.de">Sub1</a><br>
<a href="#">Sub2</a><br>
<a href="#">Sub3</a><br>
</div>

</div>
<br>
<a href="javascript:menu('menu4')">Menu4</a>
<div id=menu4>

<a href="javascript:submenu('sub41');">Option1</a><br>
<div id=sub41>
<a href="http://www.uni-koeln.de">Sub1</a><br>
<a href="#">Sub2</a><br>
<a href="#">Sub3</a><br>
</div>

<a href="javascript:submenu('sub42');">Option2</a><br>
<div id=sub42>
<a href="http://www.uni-koeln.de">Sub1</a><br>
<a href="#">Sub2</a><br>
<a href="#">Sub3</a><br>
</div>
<a href="javascript:submenu('sub43');">Option3</a><br>
<div id=sub43>
<a href="http://www.uni-koeln.de">Sub1</a><br>
<a href="#">Sub2</a><br>
<a href="#">Sub3</a><br>
</div>
<a href="javascript:submenu('sub44');">Option4</a><br>
<div id=sub44>
<a href="http://www.uni-koeln.de">Sub1</a><br>
<a href="#">Sub2</a><br>
<a href="#">Sub3</a><br>
</div>

</div>

</body>
</html>

Beitrag melden
–
Informationen zu den Bewertungsregeln