Frage von JojoII, 37

HTML-Klassen automatisch vergeben - wie geht das?

Also die Header-Datei binde ich via php in meine seite ein, damit es sehr übersichtlich ist was ja auch weiter nicht schlimm ist. Aber wie kann man da die "aktiv"-Klasse der Navigationspunkte automatisch vergeben , dass man halt nicht so viele, große Header-Dateien erstellen muss, nur um überall die Klasse anders zu vergeben?

(Wenn Nagigationspunkte die aktiv Klasse haben sind sie halt unerstrichen)

Und ist das überhaupt möglich?

Antwort
von threadi, 26

Wenn Du PHP nutzt um den HTML-Code zusammen zu stellen, prüfe an den jeweiligen Stellen den Status ab um den es geht und ergänze den HTML-Code um die von dir gewünschte Klasse. Wenn Du bspw. die aktuelle Seite mit "aktiv" markieren willst, schau dir dieses Beispiel an: http://www.ohne-css.gehts-gar.net/0057.php

Kommentar von JojoII ,

DANKE!!!

Antwort
von Dory1, 13

Naja, du kannst doch mit PHP abfragen welche Seite der User aufgerufen hat. Du kannst dir bspw. mit:

basename($_SERVER['SCRIPT_NAME'], ".php");

den Namen des vom User aufgerufenen php-Skripts holen.

In dem Moment wo du die Navigation erzeugst musst du dann prüfen ob der aktuelle Menüpunkt mit der besuchten Seite übereinstimmt. In diesem Fall kannst du dann z.B. eine CSS-Klasse an den Menüpunkt setzen, mit der du den Punkt dann hervorheben kannst. Stell dir folgende Struktur vor:

startseite.php

<?php 
require_once "navigation.php";

// ... Inhalte der Startseite

unterseite1.php

<?php 
require_once "navigation.php";

// ... Inhalte der Unterseite 1
unterseite2.php
<?php 
require_once "navigation.php";

// ... Inhalte der Unterseite 2

und so weiter...

navigation.php

<?php

// Der Name der aktuellen php-Seite, die der User besucht
$current_page = basename($_SERVER['SCRIPT_NAME'], ".php");

// Alle Links, die in der Navigation auftauchen sollen,
$links = array(
"startseite",
"unterseite1",
"unterseite2"
);

// Navigation aufbauen
?>
<nav>
<ul>
<?php foreach ($links as $link) : ?>
<li>
<a href="<?php echo $link; ?>.php" class="<?php echo $link === $current_page ? "active" : ""; ?>">
<?php echo $link; ?>
</a>
</li>
<?php endforeach; ?>
</ul>
</nav>

So bekommt immer der aktuelle Menüpunkt die Klasse "active", die du dann mit CSS stylen kannst.

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten