Menü mit verschiedenen Bildern --> class="active"

[pepepy]

Hallo,

eine Frage: Ich habe ein CSS-Menü, eine Liste. Jede li bekommt durch die ID ein eigenes Bild verpasst.
Bei hover wechseln die Bilder. Das funktioniert ganz gut.
Bei class="active" aber soll das hover-Bild genommen werden und aktiv bleiben so lange ich auf der Seite bin.

Das lässt sich sicher prima durch PHP erstellen. Habe schon viel herumgesucht, aber
nicht das passende gefunden.
Wie fange ich hier am besten an?

Das Menü:

   <ul id="menu">
      <li id="punkt1" class="active">
     <a href="/index.html">
     <span>home</span>
     </a>
     <li id="punkt2">
     <a href="/seite2.php">
     </a>
     </li>
     <li id="punkt3">
     <a href="/seite3.php">
     </a>
     </li>
     <li id="punkt4">
     <a href="/seite4.php">
     </a>
     </li>
    </ul>

 

[gKar]

Wozu brauchst Du PHP oder eine serverseitige Skriptsprache?
Weise doch einfach "#menu li.active a:link" die Anzeige der Grafik zu, so wie Du es beim "#menu a:hover" auch machst. Oder verstehe ich da was falsch? Du verrätst ja auch Deinen CSS-Code nicht.

 

[pepepy]

Hier habe ich ein PHP-Menü gefunden: http://www.apfeltalk.de/forum/php-class-nderung-t37738.html, kann es aber nicht auf mein spezielles umstricken.
Wie geht das? Was muss ich tun?
Bitte um Hilfe.

Viele Grüße
pepepy

 

[pepepy]

Das Menü ist ein separates Template, dass in alle Seiten über include eingefügt wird.
Manuell kann ich nichts machen.
Meine CSS, beispielhaft der erste Menüpunkt (Home = Punkt 1 im oberen Beispiel):

ul#menu {
	height: 146px;
	width: 684px;
	text-align: right;
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	padding: 0;
	margin: 0;
}	

ul#menu li, ul#menu li a {
	float: left;
	list-style: none;
	padding: 0;
	margin: 0;
	width: 114px;
	height: 146px;
	text-align: right;
}
ul#menu li a span {
	visibility: hidden;
}

ul#menu li#home a {
	background: url(/inc/img/menu/menu_01.jpg) no-repeat;
}
	
ul#menu li#home a:hover,
ul#menu li#home.active a {
	background: url(/inc/img/menu/menu-over_01.jpg);
}

 

[gKar]

ul#menu li#home.active a {
background: url(/inc/img/menu/menu-over_01.jpg);
}

Das ist im Prinzip genau das, was ich meinte. Das funktioniert nicht?

 

[pepepy]

Das funktioniert. Aber nur manuell eingetragen auf jeder Seite.
Da das Menü ja nur einmal vorhanden ist und in jede Seite eingefügt wird, kann ich es nicht für jede Seite separat einfügen.
Ein PHP-Script müsste also erkennen auf welcher Seite ich mich befinde und dann das richtige Bild auf .active setzen.
Vielleicht kann der Seitentitel ausgelesen werden oder Dateiname.

 

[pepepy]

Dieses Beispiel aus dem oben genannten Thread kann ich ein wenig verstehen:

$menuArray = array();
$menuArray[1] = "punkt 1";
$menuArray[2] = "punkt 2";
$menuArray[3] = "punkt 3";
$menuArray[4] = "punkt 4";

foreach($menuArray as $key => $value)
{
$sel = "";

if($key == $menu)
$sel = ' class="active" ';

echo '<a href="index.php?menu='.$key.'" '.$sel.'>'.$value.'</a><br/>';
}
Kann es aber nicht umstricken. Bei mir kommt ja die Klasse vor dem Link und jedes Bild (Menüpunkt) hat eine andere ID.
Und wozu wird in dem Bsp. FONT gebraucht?

 

[gKar]

Das funktioniert. Aber nur manuell eingetragen auf jeder Seite.
Da das Menü ja nur einmal vorhanden ist und in jede Seite eingefügt wird, kann ich es nicht für jede Seite separat einfügen.

Aah, jetzt verstehe ich Dein Problem.
OK, eine Serverskriptsprache, die das dynamisch macht, wäre eine Möglichkeit.
Ich persönlich mache sowas statisch: D.h. ich schreibe meine Hauptinhalte, Menüs etc. als XML und lasse dann daraus per XSLT die fertigen HTML-Seiten generieren, wobei automatisch bei der Erzeugung einer HTML-Seite eine entsprechende Active-Klasse für den gewünschten Menüpunkt eingefügt wird. Anschließend werden die generierten Seiten auf den Server hochgeladen. So erfolgt diese Berechnung auch nur einmalig bei der Seitengenerierung und nicht jedes Mal neu bei der Seitenauslieferung.

 

[pepepy]

So, so – da verstehe ich erst recht nix.

 

[_linx_]

1. Du definierst deine Seite im XML-Stil... (ganz übertrieben kurz)

<xml>
<key>Seite 1</key>
<string>Ein Text</string>
</xml>

2. Du rufst einen Parser auf, der dir aus diesen XML-Dateien HTML-Dateien macht, bei dem das class="active" gleich von alleine immer richtig gesetzt wird. Du hast nun für jede Seite eine HTML-Datei die den ganzen Inhalt besitzt, es wird kein Menü mehr zentral abgeholt.

 

[pepepy]

Hm, es ist aber schon alles fertig. Fehlt nur noch das active.

 

[pepepy]

Hallo, hallo, hallo... :-c