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?