✔ Aktiver Link

Status
Nicht offen für weitere Antworten.
E

Eaden

Mitglied
Moin!
Ich habe mein Menü mit css aufgebaut, so dass es eine Art rollover-effekt gibt. Nun meine Frage:
Kann ich es irgendwie nur mit HTML, SSI und CSS realisieren dass ein Link des Menüs, auf den geklickt wurde und der somit aktiv ist, eine andere Hintergundfarbe hbekommt? a:active gilt ja nur solange ihn man gedrückt hält.
Javascript möchte ich eigentlich nicht so gerne benutzen.

Dankeschön
 
Du musst auf jeder Seite den aktiven Link im HTML kennzeichnen, z.B. durch eine ID oder eine Klasse. Beispiel:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>
<meta http-equiv="Content-Type"
    content="application/xhtml+xml; charset=UTF-8" />
<title>Test</title>
<style type="text/css" media="screen">
#menu ul {list-style-type:none; margin:0; padding:0;}
#menu a:link {background:#eee; color:#000;}
#menu a:visited {background:#eee; color:#000;}
#menu a:hover {background:#00f; color:#000;}
#menu a:active {background:#0f0; color:#000;}

#menu #active a:link {background:#f00; color:#000;}
#menu #active a:visited {background:#f00; color:#000;}
#menu #active a:hover {background:#00f; color:#000;}
#menu #active a:active {background:#0f0; color:#000;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">link 1</a></li>
<li id="active"><a href="#">link 2</a></li>
</ul>
</div>
<div id="content">
<h1><a href="#">&Uuml;berschrift</a></h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent ultricies accumsan dolor. Vivamus pede magna, eleifend ultrices, tempus non, accumsan sed, nulla. Aenean eu augue vitae lorem lacinia rhoncus. Maecenas dignissim magna ut mi. Donec dictum dui vitae dolor. Pellentesque metus tortor, fermentum ac, gravida a, molestie tristique, mi. Morbi a ligula. Phasellus ante odio, pharetra a, dapibus vitae, feugiat non, nunc. Nulla facilisi. Curabitur ultricies facilisis wisi. Nulla facilisi. Suspendisse enim urna, tincidunt a, malesuada eu, ultrices in, dolor. Curabitur sed neque a purus varius hendrerit. Maecenas purus. Aliquam erat volutpat. Integer nec justo.</p>
</div>
</body>
</html>
 
Es gibt aber auch noch eine andere Möglichkeit aktive Verweise zu selektieren: Dabei erhält sowohl jeder Verweis der Navigation als auch jede Seite eine eigene ID. Somit lässt sich dann anhand geschickter Selektoren der entsprechende Verweis anders formatieren. (Vgl. Jon Hicks: Highlighting current page with CSS)
 
Ich habe das Menu per SSI includet. Also kann ich das nicht auf jeder Seite einzeln feslegen welcher Link aktiv sein soll.
 
Ich habe selbst noch nicht mit SSI gearbeitet, aber ein Teil des Tutorials könnte Dir helfen. Du setzt in der Seite eine Variable activePage und in dem Menü prüfst Du diese und gibst Fallweise id="active" oder nichts aus. Evtl. kannst Du mit der Condition auch die aktive Seite (URI) als Condition verwenden.
Ansonsten hilft der Link von Gumbo vielleicht weiter.
@Gumbo: Danke dafür, auf die Idee bin ich noch nicht gekommen.

Gruß hpvw
 
Hey hpvw: das gefällt mir. Das ist ja fast wie PHP

Aber so wie ich mir das gedacht habe klappt das wohl nicht.
Code: 
<!--#if expr="$DOCUMENT_NAME = index.shtml"-->
	<div class="h_menu_act">
		<a href="index.shtml"><span class="h_menucontent">Startseite</span></a>
	</div>
<!--#else-->
	<div class="h_menu">
		<a href="index.shtml"><span class="h_menucontent">Startseite</span></a>
	</div>
<!--#endif-->

<!--#if expr="$DOCUMENT_NAME = hotel.shtml"-->
	<div class="h_menu_act">
		<a href="hotel.shtml"><span class="h_menucontent">Hotel</span></a>
	</div>
<!--#else-->
	<div class="h_menu">
		<a href="hotel.shtml"><span class="h_menucontent">Hotel</span></a>
	</div>
<!--#endif-->

Ich weiss aber nicht was daran falsch sein sollte. Oder denk ich zu sehr PHP :)

Die Fehlermeldung ist übrigens sehr aussagekräftig:
[an error occurred while processing this directive]
 
Zuletzt bearbeitet:
Ich kann auch nur aus dem Tutorial raten, aber das mit den geschweiften Klammern scheint mir plausibel:
${DOCUMENT_NAME} wird dort in den Beispielen bei Variablen mit Unterstrich immer verwendet. Oder der Variablenname stimmt nicht.
 
mh
Klappt alles nicht so wie ich will.

Ich werd dann erstma Gumbo´s Methode ausprobieren. Trotzdem danke. Wenn ich doch noch weiterkomme sag ich nochma bescheid.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück