nicht angemeldet
Menüeffekt in Kombination mit CSS/PHP/Javascript
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>
-
Hallo,
warum dafür php benutzen?
Benutze doch einfach ein anderes css-Style.
(Ich hoffe, ich habe Dein Problem korrekt verstanden!?)Gruss,
Turtle-
Hallo
warum dafür php benutzen?
Benutze doch einfach ein anderes css-Style.Der CSS-Style würde durch PHP ausgetauscht.
Aber schau doch mal den Effekt unter www.pluserver.de an
Dort siehst du, dass wenn man auf z.B. "Angebot klickt", dass nachher beim lesen "Angebot" aktiv bleibt.
Das dachte ich mit PHP zu machen, da ich so <div id=x> durch <div id=y> auswechseln könnte, und das andere Style dann dem aktiven Effekt entsprechen würde.Wenn man jedoch dann mit der Maus über einen anderen Menüeintrag fährt, bleibt mit dieser Methode der andere weiterhin im aktiven Hover-Effekt, was unschön wirkt.
Dieser sollte nocht mehr im Hover-Effekt sein, wenn einer anderer im Hover-Effekt ist.Kannst du mir da helfen?
Gruss,
NiX-
Hi,
Du könntest für ein aktiven Link auch ein anders Style als den Hover-Style benutzen.
Dann hättest Du 3 Zustände: normal, hover und aktiv.Aber Dein geschildertes Problem würde ich - spontan gedacht - mit JavaScript lösen.
Gruss,
Turtle-
Hallo
Du könntest für ein aktiven Link auch ein anders Style als den Hover-Style benutzen.
Dann hättest Du 3 Zustände: normal, hover und aktiv.Ja, das ginge auch, ist jedoch nicht das primäre Problem.
Ob es schlussendlich mit PHP oder dieser Methode ist, ist eigentlech eher zweit rangig.
Deiner Vorschlag wäre aber ein bisschen schöner :-)Aber Dein geschildertes Problem würde ich - spontan gedacht - mit JavaScript lösen.
Ja, darum habe ich das auch unter dem Thema Javascript hineingetan.
Aber wie mache ich das??Gruss,
NiX-
Vielleicht hilft Dir das weiter?
http://de.selfhtml.org/javascript/objekte/style.htm-
Vielleicht hilft Dir das weiter?
http://de.selfhtml.org/javascript/objekte/style.htmJa, das hilft ein bisschen weiter.
Jedoch nicht ganz:function freehover() {
if (document.all) {
document.all.hover.style.setAttribute("borderBottom","2px solid #0000FF","false");
} else {
document.getElementById("hover").style.borderBottom = "2px solid #0000FF";
}Fügt unten zusätzlichen einen Rahmen hinzu, statt dass es den besteheden ändern würde (in der Farbe).
Wie ändere ich Attribute?
Mit dieser "setAttribute" Variante kann ich nur Elemente hinzufügen, aber etwas bestehendes wie ein Hintergrund nicht ändern.Ich sollte Definitionen ändern können, die in einer Klasse (id) sind und nachher auch diese ganze id betreffen.
Gruss,
NiX
-
-
-
-
-
-
Hi,
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.
Du verwechselst zum einen wohl :hover mit :active und zum anderen wird doch nach dem Klicken ohnehin eine neue Seite geladen; diese kannst Du nach Deinen Wünschen anders formatieren (wobei ein Link auf die bereits angezeigte Seite unsinnig ist und Du die Verlinkung des Menüpunktes gleich mitentfernen solltest). Aber ich vermute, Du hast einen wesentlichen Punkt unterschlagen.
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.
oder - wie gesagt - besser aus dem A ein SPAN machen, welches entsprechend formatiert ist.
freundliche Grüße
Ingo -
hi,
<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>mehrmals die gleiche ID innerhalb eines dokumentes zu benutzen, ist nicht erlaubt. eine ID soll schliesslich dazu dienen, ein element _eindeutig_ zu identifizieren.
nutze eine klasse stattdessen, um die CSS-formatierung anzuwenden.evtl. hängt auch dein problem aus https://forum.selfhtml.org/?t=88389&m=526916 mit dieser nicht erlaubten mehrfachnutzung der id zusammen.
gruß,
wahsaga--
"Look, that's why there's rules, understand? So that you _think_ before you break 'em."