Supportnet / Forum / Webseiten/HTML
Rollover-Effekt eines Links soll nach Anklicken bleiben
Frage
Hallo, liebe Spezialisten!
Meine Frage bezieht sich auf ein Menü, das ich erstellt habe. Ist ´ne ganz normale Tabelle, darin dann die Grafiken mit den Links ("Über mich", "Impressum" usw.). Nun habe ich mittels jeweils zweier Grafiken einen Rollover-Effekt eingebaut (Normalzustand: Schrift schwarz auf weiss und linksbündig, Hover: Schrift weiss auf schwarz und nach links eingerückt).
Wenn nun ein Menüpunkt angeklickt und damit die entsprechende Seite geladen ist, soll der Menüpunkt wie beim Hovern aussehen, so dass man weiß, "wo man gerade ist" (wie hier auf dieser Seite, da sind die Menüpunkte nach dem Anklicken fett und man weiß genau, wo man ist).
Eine Lösung mittels CSS wäre prima!!!
Habt ihr eine Idee? Vielen, lieben Dank im Voraus!
Antwort 1 von Toadie
Wenn du nicht grade Frames verwendest könntest du einfach eine weiteren Selektor bestimmen der gleich aufgebaut ist wie der des hovers und dem aktiven Menüpunkt diesen Selektor zuweisen.
Du kannst auch beim aktiven Menüpunkt das Attribut style="" angeben und in diesem deine neuen Eigenschaften hinterlegen.
Du kannst auch beim aktiven Menüpunkt das Attribut style="" angeben und in diesem deine neuen Eigenschaften hinterlegen.
Antwort 2 von Marilena
Hi Toadie,
vielen Dank für die schnelle Antwort! Frames verwende ich nicht, das steht alles in ´ner Tabelle. Da ich noch Anfängerin bin, kann ich mit "Selektor" leider nix anfangen. Kannst Du mir ein kurzes Beispiel zeigen, wie der CSS-Befehl mit Selektor aussehen muss?
Vielen, vielen Dank!
vielen Dank für die schnelle Antwort! Frames verwende ich nicht, das steht alles in ´ner Tabelle. Da ich noch Anfängerin bin, kann ich mit "Selektor" leider nix anfangen. Kannst Du mir ein kurzes Beispiel zeigen, wie der CSS-Befehl mit Selektor aussehen muss?
Vielen, vielen Dank!
Antwort 3 von Toadie
Ein Selektor kann man als Gruppenbezeichnung der Eigenschaften ansehen den man im HTML-Element per ID- oder CLASS-Tag angibt.
Also z.B.
Deine CSS-Datei ist also so aufgebaut:
Also z.B.
- #links
.links
a.links
Deine CSS-Datei ist also so aufgebaut:
Selektor
{
Eigenschaft: Wert;
}
Selektor
{
Eigenschaft: Wert;
}
Antwort 4 von rfb
kurz gesagt - in der Hofnung, dass dein Rollover per CSS stattfindet - ergänze dein CSS so
a:hover, a.aktuell { .... }
und den betreffenden Link im HTML:
<a href="..." class="aktuell">Linktext</a>
dann erhalten alle Links der Klasse "aktuell" das gleiche Layout wie die hover-Links. Welchem Link du die Klasse verpasst steht dir frei.
a:hover, a.aktuell { .... }
und den betreffenden Link im HTML:
<a href="..." class="aktuell">Linktext</a>
dann erhalten alle Links der Klasse "aktuell" das gleiche Layout wie die hover-Links. Welchem Link du die Klasse verpasst steht dir frei.
Antwort 5 von Marilena
Ich bin begeistert, rfb! Es funktioniert einwandfrei, vielen Dank! Muss das class="aktuell" immer zu jedem Link geschrieben werden oder kann das auch in´s CSS mit rein?
Antwort 6 von Marilena
ach herrje, das war etwas voreilig. geht leider doch nicht, nach dem Anklicken bleibt der Menüpunkt nicht "stehen":
HTML:
<a href="../test.htm" class="aktuell">test</a>
CSS:
div#menulinks a:hover, a.aktuell {
border-left: #E67031 10px solid;
background: white;
color: #A82B24;
margin-left: 0px;
font-weight: bold;
}
Gibt´s vielleicht doch eine Lösung bzw. was mach ich falsch?
HTML:
<a href="../test.htm" class="aktuell">test</a>
CSS:
div#menulinks a:hover, a.aktuell {
border-left: #E67031 10px solid;
background: white;
color: #A82B24;
margin-left: 0px;
font-weight: bold;
}
Gibt´s vielleicht doch eine Lösung bzw. was mach ich falsch?
Antwort 7 von Toadie
Hast du die class="aktuell" auch in der aufgerufenen Seite eingetragen oder nur in der Seite von der aus du verlinkst?
Antwort 8 von Marilena
Naja, das Menu befindet sich in einem Template und die verlinkte Seite basiert auf diesem Template. Reicht das schon aus oder muss die class="aktuell" in die verlinkte Seite mit rein, wenn ja: wie/wo?
Das ist wahrscheinlich super simple, aber als Anfängerin tut man sich sehr schwer.
Vielen Dank für die Hilfe !!!
Das ist wahrscheinlich super simple, aber als Anfängerin tut man sich sehr schwer.
Vielen Dank für die Hilfe !!!
Antwort 9 von rfb
Zitat:
das Menu befindet sich in einem Template
nutzt du PHP oder sowas um die Seiten dynamisch zu generiren oder bedeutet Template nur, dass du eine Vorlage hast und die einzelnen Seiten da von Hand rein schreibst?das Menu befindet sich in einem Template
Antwort 10 von Marilena
ich nutze kein PHP, mit Template meine ich eine Vorlage in Dreamweaver, die dann auf die Seiten angewendet wird.
Antwort 11 von Toadie
Wenn ich das richtig verstehe hast du ein fertiges Menü, das mit Dreamweaver in jede neue Seite eingefügt wird?
Antwort 12 von Marilena
yes, so ist es. Das Menu ist in der Vorlagen-Datei und erscheint dann auf jeder auf dieser Vorlage erstellten Seite. Wenn sich am Menü was ändert, mach ich eine Änderung in der Vorlagen-Datei und dann werden die anderen Seiten aktualisiert. Ich hoffe, das hilft weiter ...
Antwort 13 von Toadie
Ja das hilft. Die Änderung im Template wird nicht viel nützen, das ja auf jeder Seite ein anderer Link als aktiv markiert sein soll.
Du musst in jeder erstellten HTML-Seite diesen Eintrag manuell im entsprechenden Link nachtragen.
Du musst in jeder erstellten HTML-Seite diesen Eintrag manuell im entsprechenden Link nachtragen.
Antwort 14 von Marilena
Das würde ich sofort machen, aber ich komm ja an HTML-Code des entsprechenden Links gar nicht dran, um den Eintrag manuell zu ändern, weil der ja Code ja in der Vorlage - nicht veränderbar - "feststeckt".
?!?!?!?!?!!?
?!?!?!?!?!!?
Antwort 15 von Toadie
Letzten Endes hast du doch als Ergebnis HTML-Dateien die du auf deinen Webspace lädst. In jeder dieser HTML-Dateien muss Frontpage dein Menü integriert haben. Wenn du die mit dem Editor öffnest kannst du auch den Quelltext bearbeiten.