nicht angemeldet
Hallo zusammen.
Unten ist ein Quellcode.
Er stellt ein Menu dar.
Folgendes möchte ich daran aber noch machen, was ich nicht selber herausfand:
Wenn man auf einen Link geklickt hat und die dazugehörige Seite anschaut, sollte der "Menu-Hover"-Effekt des entsprechenden Links aktiv bleiben, so dass man am Menü sieht, wo man ist.
Ich dachte an folgendes:
Ein PHP-Skript könnte die ID des entsprechenden Links auswechseln, durch eine, die in CSS unter a (ohne hover-Effekt) gleich den Hover-Effekt der anderen Links definiert hätte.
Das würde auch einwandfrei funktionieren, wenn man jedoch mit der Maus dann über die Menüleiste fährt und über einen anderen Link (nicht den aktuell aktiven) geht, bleibt der Aktive unschön auf dem Effekt stehen. Dieser Effekt soll weg, wenn gerade ein anderen Menüpunkt auf dem Effekt ist.
Etwas änliches, so wie es aussehen soll fand ich im Menü von www.plusserver.de
Diese arbeiten jedoch mit Bildern.
Kann mir jemand erklären, wie ich das mache, einfach ohne Bilder?
Gruss und Danke,
NiX
<html>
<head>
<style type="text/css">
div#menu {
width: 86px;
padding-right: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
div#menu a {
display: block;
background: transparent;
padding-top: 11px;
border-bottom: 2px solid #0000ff;
padding-bottom: 5px;
color: #0000ff;
text-decoration: none;
text-align: center;
}
div#menu a:hover {
border-top: 2px solid #0000ff;
border-bottom: 2px solid #FFFFFF;
border-right: 2px solid #0000ff;
border-left: 2px solid #0000ff;
padding-top: 9px;
background: #FFFFFF;
text-decoration: none;
}
div#menu a:active {
border-top: 2px solid #0000ff;
border-bottom: 2px solid #FFFFFF;
border-right: 2px solid #0000ff;
border-left: 2px solid #0000ff;
padding-top: 9px;
background: #FFFFFF;
text-decoration: none;
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0"><tr>
<td><div id="menu"><a href="index.php?action=1">Link1</a></div></td>
<td><div id="menu"><a href="index.php?action=1">Link2</a></div></td>
<td><div id="menu"><a href="index.php?action=1">Link3</a></div></td>
</tr></table>
</body>
</html>