Automatische active-Klasse in der Navigation?
Moin,
ich habe bei mir eine Navigation, die wie folgt aussieht:
<nav id="navigation">
<ul>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
</ul>
</nav>
Ich möchte dort gerne eine active-Klasse einfügen, sodass es immer automatisch auf der aktuellen Seite der Hintergrund des Menüpunktes eine andere Farbe erhält. Ich benutze jQuery.
Kann mir hier jemand weiterhelfen, wie man so etwas hinbekommt?
1 Antwort
Dafür brauchst du kein JavaScript. Füge einfach den Listenelement der aktuellen Seite eine Klasse - etwa active - hinzu und ändere diese Klasse in der Seite. Also die Nav würde in Seite Home so aussehen
<nav id="navigation">
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">test</a></li>
</ul>
</nav>
und bei Seite test so:
<nav id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a class="active" href="#">test</a></li>
</ul>
</nav>
Ich nehme an, du benutzt PHP. Dann:
<li class="<?php echo ($_SERVER['PHP_SELF'] == "/index.php" ? "active" : "");?>">
<a href="index.php">Home</a>
</li>
<li class="<?php echo ($_SERVER['PHP_SELF'] == "/test.php" ? "active" : "");?>">
<a href="test.php">test</a>
</li>
Vielen Dank. Ist ja eigentlich echt leicht. Noch eine Frage... wie bekommt man auf den jeweiligen Seiten die .php-Endung in der Adresszeile entfernt?
Dafür musst du deine URLs umschreiben. Dafür gibt es genügend Online-Materialien. Du könntest beispielsweise mal nach .htaccess mod rewrite googeln.
Vielen Dank. Nun ist es ja so, dass der aktive Menüpunkte die Farbe #fff hat, wenn ich mit der Maus über die anderen Menüpunkte fahre erscheint die Hintergrundfarbe #000, ist auch gewollt. Allerdings kann ich mit der Maus auch über den aktiven Menüpunkt gehen und der Hintergrund wird dann #000, obwohl der aktuelle Menüpunkt immer weiß bleiben soll, auch wenn man mit der Maus rüberfährt, wie bekommt man sowas hin?
@jaannippon kannst du mir nicht weiterhelfen? :)
Danke, aber die Navigation ist bei mir via include auf allen Seiten eingefügt. So kann ich das garnicht umsetzen... deshalb mein Problem :)