Hallo
Ich weis nicht ob das hier das richtige Forum ist für meine Frage aber ich versuch es einfach mal.
Ich bin dabei mir eine Navigationsleiste zu basteln in der der jeweilige Link solange eine andere Farbe hat bis ich einen neuen Link anklicke. Da es sich um ein Menu mit mehreren Untermenus handelt möchte ich auch das immer nur das Hauptmenu seine Untermenus anzeigt welches gerade aktiv ist.
Mein Problem ist nun, das es zwar funktioniert das der Hauptmenulink immer eine andere Farbe hat als die nicht aktiven Links.
Jedoch möchte ich das auch die Untermenulinks eine andere Farbe haben wenn sie aktiv sind und so lange bleiben bis ich einen anderen Link anklicke.
Um das ganze etwas besser darstellen zu können hier nun der HTML Code wie ich ihn bislang habe.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Verzeichnisse</title>
<style type="text/css">
.menu { text-decoration: none;}
.sub { display: none;text-decoration: none;}
div#menuLayer { width: 10em; margin: 0; padding: 0.8em;}
* html div#menuLayer { /* Korrekturen fuer IE 5.x */ width: 11.6em; w\idth: 10em; padding-left: 0; padd\ing-left: 0.8em;}
div#menuLayer li { list-style: none; margin: 0.4em; padding: 0;}
div#menuLayer li ul { margin: 0 0 0 1em; padding: 0;}
div#menuLayer li ul li { margin: 0.1em 0;}
* html div#menuLayer li ul li { /* Korrektur fuer IE 5.x */ margin-left: 1em; ma\rgin-left: 0;}
* html div#menuLayer a { width: 100%; /* Breitenangabe fuer IE 5.x */ w\idth: 8.8em; /* Breitenangabe fuer IE 6 */}
* html div#menuLayer li ul li a { width: 100%; /* Breitenangabe fuer IE 5.x */ w\idth: 7.8em; /* Breitenangabe fuer IE 6 */}
div#menuLayer a { display:block; padding: 0.2em; text-decoration: none; font-weight: bold; border: 1px solid black;
border-left-color: white; border-top-color: white; color: #000000;}
div#menuLayer a:link { border: 1px solid black; border-left-color: white; border-top-color: white;}
div#menuLayer a:visited { border: 1px solid black; border-left-color: white; border-top-color: white;}
div#menuLayer a:hover { border-color: white; border-left-color: black; border-top-color: black; color: white;
background-color: #FF0000;}
div#menuLayer a:active { border-color: white; border-left-color: black; border-top-color: black; color: white; background-color: #FF0000;}
</style>
<script language="JavaScript1.2">
function doMenu(id, display)
{
if(id == 'menu1sub' && display == 'block')
{ document.getElementById('menu_link1').style.backgroundColor = "red";
document.getElementById('menu_link2').style.backgroundColor = "";
}
if(id == 'menu2sub' && display == 'block')
{ document.getElementById('menu_link2').style.backgroundColor = "red";
document.getElementById('menu_link1').style.backgroundColor = "";
}
document.getElementById(id).style.display = display;
}
</script>
</head>
<body>
<div id="menuLayer">
<b id="menu1" style=";cursor:hand;">
<a href="#" id="menu_link1" onmouseup="doMenu('menu1sub','block');doMenu('menu2sub','none');">
<div class="menu"><font size="4">Verzeichnis 1</font></div></a> [/b]
<div id="menu1sub" class="sub">
</div>
<b id="menu2">
<a href="#" id="menu_link2" onmouseup="doMenu('menu2sub','block');doMenu('menu1sub','none');">
<div class="menu"><font size="4">Verzeichnis 2</font></div></a> [/b]
<div id="menu2sub" class="sub">
[*]<font size="3" face="Arial, Helvetica, sans-serif, font-size 8pt">Unterverzeichnis 2.1</font>
[*]<font size="3" face="Arial, Helvetica, sans-serif, font-size 8pt">Unterverzeichnis 2.2</font>
[*]<font size="3" face="Arial, Helvetica, sans-serif, font-size 8pt">Unterverzeichnis 2.3</font>
</div>
</div>
</body>
</html>
Vielen Dank schon mal für Eure mühen
devilduck
Ps.: Entschuldigung das ich hier gleich einen so langen post als meine ersten reinstelle. Ich hoffe das das kein Problem ist. Danke.
