Supportnet Computer
Planet of Tech

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.

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!

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.
    #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.

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?

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 !!!

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?

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.

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.

Ich möchte kostenlos eine Frage an die Mitglieder stellen:


Ähnliche Themen:


Suche in allen vorhandenen Beiträgen: