Seite 1 von 1

Navigation mit JavaScript - brauche Hilfe!

Verfasst: 05.02.2006 15:17
von ShateHunter
Ich hab zwar gesucht, aber nichts gefunden, was mir weiterhelfen könnte...

Mein "Problem":
Ich will eine Navigation für Wordpress machen. In der soll nur Seiten - Kategorien - Archiv - Intern stehen. Wenn man mit der Maus z. B. auf "Seiten" geht, soll darunter
Seite 1
Seite 2 etc.

erscheinen (so ähnlich wie bei der Navigation hier). Jetzt meine Frage: Wie krieg ich das hin? Ich kann leider kein JavaScript und bin deshalb in dieser Hinsicht völlig hilflos^^.
Freue mich auf Antworten! :)

Verfasst: 06.02.2006 18:37
von ShateHunter
Ok, ich hab jetzt dieses Script:

Code: Alles auswählen

<script language="JavaScript">

function clean ()
{
  if ((navigator.appName=='Netscape') && (navigator.appVersion.charAt (0)<'5'))
  {
  window.document.b.visibility="hide";
  window.document.m1.visibility="hide";
  window.document.m2.visibility="hide";
  window.document.m3.visibility="hide";
  window.document.m4.visibility="hide";
  return;
  }
 if (navigator.appVersion.charAt (0)<'5')
    {
    var layers=document.all.tags ("div");
    }
    else {
    var layers=document.getElementsByTagName("div");
    }
 layers[0].style.visibility='hidden'; 
 layers[2].style.visibility='hidden';
 layers[4].style.visibility='hidden';
 layers[6].style.visibility='hidden';
 return;
}

function menu (i)
{

switch(i)
 {
  case 1:
   {
    if ((navigator.appName=='Netscape') && (navigator.appVersion.charAt(0)<'5'))
     {
      window.document.b.visibility="show";
      window.document.m1.visibility="show";
      window.document.m2.visibility="hide";
      window.document.m3.visibility="hide";
	  window.document.m4.visibility="hide"; 
     return;
     }
    if (navigator.appVersion.charAt (0)<'5')
    {
    var layers=document.all.tags ("div");
    }
    else {
    var layers=document.getElementsByTagName("div");
    }
    layers[0].style.visibility='visible'; 
    layers[2].style.visibility='visible';
    layers[4].style.visibility='hidden';
    layers[6].style.visibility='hidden';
    return;
   }
  case 2:
   {
    if ((navigator.appName=='Netscape') && (navigator.appVersion.charAt(0)<'5'))
     {
     window.document.b.visibility="show";
     window.document.m1.visibility="hide";
     window.document.m2.visibility="show";
     window.document.m3.visibility="hide";
	 window.document.m4.visibility="show";
     return;
     }
    if (navigator.appVersion.charAt (0)<'5')
    {
    var layers=document.all.tags ("div");
    }
    else {
    var layers=document.getElementsByTagName("div");
    }
    layers[0].style.visibility='visible';
    layers[2].style.visibility='hidden';
    layers[4].style.visibility='visible';
    layers[6].style.visibility='hidden';
    return;
   }
  case 3:
   {
    if ((navigator.appName=='Netscape') && (navigator.appVersion.charAt(0)<'5'))
     {
     window.document.b.visibility="show";
     window.document.m1.visibility="hide";
     window.document.m2.visibility="hide";
     window.document.m3.visibility="show";
	 window.document.m4.visibility="hide";
     return;
     }
    if (navigator.appVersion.charAt (0)<'5')
    {
    var layers=document.all.tags ("div");
    }
    else {
    var layers=document.getElementsByTagName("div");
    }
    layers[0].style.visibility='visible';
    layers[2].style.visibility='hidden';
    layers[4].style.visibility='hidden';
    layers[6].style.visibility='visible';
    return;
   }
  case 4:
   {
    if ((navigator.appName=='Netscape') && (navigator.appVersion.charAt(0)<'5'))
     {
     window.document.b.visibility="show";
     window.document.m1.visibility="hide";
     window.document.m2.visibility="hide";
     window.document.m3.visibility="show";
	 window.document.m4.visibility="show";
     return;
     }
    if (navigator.appVersion.charAt (0)<'5')
    {
    var layers=document.all.tags ("div");
    }
    else {
    var layers=document.getElementsByTagName("div");
    }
    layers[0].style.visibility='visible';
    layers[2].style.visibility='hidden';
    layers[4].style.visibility='hidden';
    layers[6].style.visibility='visible';
    return;
   }
 }

}
</script>

<div id="b" style="position:absolute; left:30; top:30; width:340; height:170; z-index:1; visibility: hidden">
<a href="#" onmouseover="clean()" onmouseout="clean()"> </a>
</div>

<div id="h1" style="position:absolute; left:50; top:50; width:100; height:25;z-index:2; visibility: visible">
<a href="#" onmouseover="menu(1)">Menu 1</a>
</div>

<div id="m1" style="position:absolute; left:50; top:75; width:100; height:100; z-index:3; visibility: hidden" >
<a href="#">Punkt 1</a><br>
<a href="#">Punkt 2</a><br>
<a href="#">Punkt 3</a><br>
<a href="#">Punkt 4</a>
</div>

<div id="h2" style="position:absolute; left:150; top:50; width:100; height:25; z-index:4; visibility: visible">
<a href="#" onmouseover="menu(2)">Menu 2</a></div>

<div id="m2" style="position:absolute; left:150; top:75; width:100; height:100; z-index:5; visibility: hidden">
<a href="#">Punkt 1</a><br>
<a href="#">Punkt 2</a><br>
<a href="#">Punkt 3</a><br>
<a href="#">Punkt 4</a>
</div>

<div id="h4" style="position:absolute; left:350; top:50; width:100; height:25; z-index:8 visibility: visible">
<a href="#" onmouseover="menu(4)">Intern</a>
</div>

<div id="m4" style="position:absolute; left:350; top:75; width:100; height:100; z-index:9; visibility: hidden">
<a href="#">TS²</a><br>
<a href="#">Login für Newsposter</a>
</div>

<div id="h3" style="position:absolute; left:250; top:50; width:100; height:25; z-index:6">
<a href="#" onmouseover="menu(3)">Menu 3</a>
</div>

<div id="m3" style="position:absolute; left:250; top:75; width:100; height:100; z-index:7; visibility: hidden">
<a href="#">Punkt 1</a><br>
<a href="#">Punkt 2</a><br>
<a href="#">Punkt 3</a><br>
<a href="#">Punkt 4</a>
</div>
Allerdings linkt das "Menu 3" bei Mouseover auf "Intern"... Wenn ich das Menu-"Intern" als letztes stelle (nur im Code, wegen der Positionierung der DIV-Kontainer ändert das ja an der Darstellung nichts) linkt "Intern" auf "Menu 3". Wo liegt da der Fehler?