• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Navigationsleiste

Status
Für weitere Antworten geschlossen.

Feldi24

Neues Mitglied
Guten Tag alle zusammen,

leider habe ich mit der Suchfunktion keine Theama zu meinem Problem gefunden.

Ich möchte eine Navigationleiste mit Untermenü erstellen.

Leider weiss ich nicht welche Codes/ Stripte es da gibt....weil ich auch ein Hintergrundbild in den Button setzen möchte mit Rollovereffekt....

Das ganze sollte dann so aus sehen wie hier


Ich hoffe das mir da jemand helfen kann....
Ich würde mich freuen....

Schönen Tag noch.....
 
Werbung:
An sich wird über sowas Ähnliches hier schon gesprochen, das Problem mit den Grafiken und dem Rollovereffekt habe ich hier zu lösen versucht. Ich weiß, ich weiß, das klappt sich nicht wieder ein, darum geht es aber auch in dem Thema, zu dem ich verlinkt habe.
Der gesamte Quelltext der Seite mit dem Menü (der zweite Link):
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><title>Layermenu</title></head>
<body>
<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";
  window.document.m5.visibility="hide";
  window.document.m6.visibility="hide";
  window.document.m7.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';
 layers[8].style.visibility='hidden';
 layers[10].style.visibility='hidden';
 layers[12].style.visibility='hidden';
 layers[14].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";
      window.document.m5.visibility="hide";
      window.document.m6.visibility="hide";
      window.document.m7.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';
    layers[8].style.visibility='hidden';
    layers[10].style.visibility='hidden';
    layers[12].style.visibility='hidden';
    layers[14].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="hide";
     window.document.m5.visibility="hide";
     window.document.m6.visibility="hide";
     window.document.m7.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='visible';
    layers[6].style.visibility='hidden';
    layers[8].style.visibility='hidden';
    layers[10].style.visibility='hidden';
    layers[12].style.visibility='hidden';
    layers[14].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";
     window.document.m5.visibility="hide";
     window.document.m6.visibility="hide";
     window.document.m7.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';
    layers[8].style.visibility='hidden';
    layers[10].style.visibility='hidden';
    layers[12].style.visibility='hidden';
    layers[14].style.visibility='hidden';
     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="hide";
     window.document.m4.visibility="show";
     window.document.m5.visibility="hide";
     window.document.m6.visibility="hide";
     window.document.m7.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='hidden';
    layers[8].style.visibility='visible';
    layers[10].style.visibility='hidden';
    layers[12].style.visibility='hidden';
    layers[14].style.visibility='hidden';
    return;
   }
    case 5:
   {
    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="hide";
     window.document.m4.visibility="hide";
     window.document.m5.visibility="show";
     window.document.m6.visibility="hide";
     window.document.m7.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='hidden';
    layers[8].style.visibility='hidden';
    layers[10].style.visibility='visible';
    layers[12].style.visibility='hidden';
    layers[14].style.visibility='hidden';
    return;
   }
    case 6:
   {
    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="hide";
     window.document.m4.visibility="hide";
     window.document.m5.visibility="hide";
     window.document.m6.visibility="show";
     window.document.m7.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='hidden';
    layers[8].style.visibility='hidden';
    layers[10].style.visibility='hidden';
    layers[12].style.visibility='visible';
    layers[14].style.visibility='hidden';
    return;
   }
    case 7:
   {
    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="hide";
     window.document.m4.visibility="hide";
     window.document.m5.visibility="hide";
     window.document.m6.visibility="hide";
     window.document.m7.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='hidden';
    layers[8].style.visibility='hidden';
    layers[10].style.visibility='hidden';
    layers[12].style.visibility='hidden';
    layers[14].style.visibility='visible';
    return;
   }
 }

}
</script>
<div id="b" style="position:absolute; left:30; top:30; width:340; height:170; z-index:1; visibility: hidden">
[url="#"] [/url]
</div>

<div id="h1" style="position:absolute; left:50; top:50; width:100; height:25;z-index:2; visibility: visible">

[url="#"][img]menu.gif[/img][/url]
</div>

<div id="m1" style="position:absolute; left:50; top:75; width:100; height:100; z-index:3; visibility: hidden" >
[url="#"][img]link.gif[/img][/url]

[url="#"][img]link.gif[/img][/url]

</div>

<div id="h2" style="position:absolute; left:150; top:50; width:100; height:25; z-index:4; visibility: visible">
[url="#"][img]menu.gif[/img][/url]</div>

<div id="m2" style="position:absolute; left:150; top:75; width:100; height:100; z-index:5; visibility: hidden">
[url="#"][img]link.gif[/img][/url]

[url="#"][img]link.gif[/img][/url]

[url="#"][img]link.gif[/img][/url]
</div>

<div id="h3" style="position:absolute; left:250; top:50; width:100; height:25; z-index:6">
[url="#"][img]menu.gif[/img][/url]
</div>

<div id="m3" style="position:absolute; left:250; top:75; width:100; height:100; z-index:7; visibility: hidden">
[url="#"][img]link.gif[/img][/url]

[url="#"][img]link.gif[/img][/url]

[url="#"][img]link.gif[/img][/url]
[url="#"][img]link.gif[/img][/url]
[url="#"][img]link.gif[/img][/url]
[url="#"][img]link.gif[/img][/url]
[url="#"][img]link.gif[/img][/url]
</div>

<div id="h4" style="position:absolute; left:350; top:50; width:100; height:25; z-index:8">
[url="#"][img]menu.gif[/img][/url]
</div>

<div id="m4" style="position:absolute; left:350; top:75; width:100; height:100; z-index:9; visibility: hidden">
[url="#"][img]link.gif[/img][/url]

[url="#"][img]link.gif[/img][/url]

[url="#"][img]link.gif[/img][/url]
[url="#"][img]link.gif[/img][/url]
</div>

<div id="h5" style="position:absolute; left:450; top:50; width:100; height:25; z-index:10">
[url="#"][img]menu.gif[/img][/url]
</div>

<div id="m5" style="position:absolute; left:450; top:75; width:100; height:100; z-index:11; visibility: hidden">
[url="#"][img]link.gif[/img][/url]

[url="#"][img]link.gif[/img][/url]

</div>

<div id="h6" style="position:absolute; left:550; top:50; width:100; height:25; z-index:12">
[url="#"][img]menu.gif[/img][/url]
</div>

<div id="m6" style="position:absolute; left:550; top:75; width:100; height:100; z-index:13; visibility: hidden">
[url="#"][img]link.gif[/img][/url]

[url="#"][img]link.gif[/img][/url]

[url="#"][img]link.gif[/img][/url]
</div>

<div id="h7" style="position:absolute; left:650; top:50; width:100; height:25; z-index:14">
[url="#"][img]menu.gif[/img][/url]
</div>

<div id="m7" style="position:absolute; left:650; top:75; width:100; height:100; z-index:15; visibility: hidden">
[url="#"][img]link.gif[/img][/url]

[url="#"][img]link.gif[/img][/url]

[url="#"][img]link.gif[/img][/url]
[url="#"][img]link.gif[/img][/url]
</div>
</body>
</html>
Die Bildernamen (bei img src="link.gif/menu.gif") müssen natürlich im Einzelnen durch deine Bilder ersetzt werden.
 
Status
Für weitere Antworten geschlossen.
Zurück
Oben