Aktiven Menüpunkt hervorheben, obwohl die Navigation includiert wurde?

rockpianist · #1 (**permalink**) 06.12.2008, 11:20

Ich habe mein Webprojekt modularisiert und Kopfbereich, Navigation usw. ausgelagert:

PHP-Code:


			
<?php 

    include("_included/navigation.html"); 

?>

Das funktioniert alles hervorragend. Allerdings "sieht" die Navigation ja nicht, in welchem Menüpunkt (z.B. index.php, kontakt.php, standort.php) ich mich befinde. Demzufolge kann ich den aktiven Menüpunkt auch nicht in einer anderen Farbe hervorheben. Das ist schlecht für die Usability!

Gibt es einen Trick, (php, CSS-Liste, inline-css oder Ähnliches) den aktiven Menüpunkt farblich anders zu gestalten obwohl die Navigation "ausgelagert" wurde?
Danke rp

Praktikant · #2 (**permalink**) 06.12.2008, 11:22

Kannste beispielsweise über ne GET-Variable machen

Die dann in der Navi abrufen und einfach mit ner IF-Struktur prüfen welchen Punkt er hervorheben soll ^^

javaFreak · #3 (**permalink**) 06.12.2008, 11:39

Es gibt auch einen CSS-Trick.
Du weist auf jeder Seite dem Body-Tag eine andere Id zu. Z.B.

HTML-Code:

<body id="kontakt">

Dann weist du noch jedem Menüpunkt eine Id zu z.B:

HTML-Code:

<li id="kontakt-link"></li>

Wenn du jetzt in deine CSS-Datei folgende Regeln schreibst:

Code:

#kontakt #kontakt-link
{
   color:red;
}

#impressum #impressum-link
{
   color:red;
}

Müsste es klappen. Ich habe es so im Kopf, kann sein, dass es noch etwas einfacher geht..

rockpianist · #4 (**permalink**) 06.12.2008, 14:13

Danke euch beiden, da eXHTML schneller war, habe ich die php-Variante genommen. Ist vielleicht auch ein wenig effektiver, weil der größte Aufwand in der includierten Navigationsdatei erfolgt.

Für alle, die ebenfalls kaum php-Kenntnisse haben, es funktioniert wie folgt: Die Einbindung in der aufrufenden Datei:

PHP-Code:


			
<?php 

    $active_menu="audio";

    include("../_included/navigation.php"); 

?>

Die aufgerufene Datei navigation.php sieht so aus:

PHP-Code:


			
<ul>

<li<?php if ($active_menu == "home") { echo ' class="active"';} ?>>

    <a href="/" title="Home">Home</a></li>

<li<?php if ($active_menu == "audio") {echo ' class="active"';} ?>>

    <a href="/audio" title="Hören">Audio</a></li>

<li<?php if ($active_menu == "kontakt") {echo ' class="active"';} ?>>

    <a href="/kontakt" title="Kontakt">Kontakt</a></li>

</ul>

rp

inta · #5 (**permalink**) 06.12.2008, 15:17

Wozu eine Variable deklarieren? Mit „basename($_SERVER['PHP_SELF'])“ bekommst du die aktuell aufgerufene Datei heraus, dann musst du nur noch deine Navigation anpassen und nicht jede einzelne Seite.

Gumbo · #6 (**permalink**) 06.12.2008, 15:27

„PHP_SELF“ liefert aber den URL-Pfad zum ausgeführten PHP-Skript und nicht den angefragten URL-Pfad. Der steht nämlich unter anderem in „REQUEST_URI“. Deswegen mein Vorschlag:

PHP-Code:


			
$nav = array(
    '/'        => array('Home', 'Home'),
    '/audio'   => array('Audio', 'Hören'),
    '/kontakt' => array('Kontakt', 'Kontakt'),
);
$_SERVER['REQUEST_PATH'] = preg_replace('/\?.*/', '', $_SERVER['REQUEST_URI']);
foreach ($nav as $url => $desc) {
    echo '<li' . ($url == $_SERVER['REQUEST_PATH'] ? ' class="active"' : '') . '><a href="' . $url . '" title="' . $desc[1] . '">' . $desc[0] . '</a></li>';
}

inta · #7 (**permalink**) 06.12.2008, 15:37

Zitat:

Zitat von Gumbo

„PHP_SELF“ liefert aber den URL-Pfad zum ausgeführten PHP-Skript und nicht den angefragten URL-Pfad.

Ja, ich habe ihn auch so verstanden, dass er den aktiven Punkt anhand der aktuell ausgeführten Datei bestimmen möchte.

Ich würde die Navigation aber auch mit eine Schleife anhand eines Arrays erstellen, alles einzeln anzulegen ist mehr Aufwand.

rockpianist · #8 (**permalink**) 06.12.2008, 20:13

Danke, das ist jetzt die Profilösung, ich musste noch einen Slash hinter /audio und /kontakt schreiben:, das ist der geänderte Code:

PHP-Code:


			
$nav = array(

    '/'        => array('Home', 'Home'),

    '/audio/'   => array('Audio', 'Hören'),

    '/kontakt/' => array('Kontakt', 'Kontakt'),

);

$_SERVER['REQUEST_PATH'] = preg_replace('/\?.*/', '', $_SERVER['REQUEST_URI']);

foreach ($nav as $url => $desc) {

    echo '<li' . ($url == $_SERVER['REQUEST_PATH'] ? ' class="active"' : '') . '><a href="' . $url . '" title="' . $desc[1] . '">' . $desc[0] . '</a></li>';

}

javaFreak · #9 (**permalink**) 06.12.2008, 22:08

Die CSS-Lösung ist insofern in deinem Fall sinnvoller, als dass die navigation.php eben nicht weiß, von welcher Datei aus sie included wurde.

Aber du hast eine Lösung die funktioniert also gut ist^^

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Problem mit Navigation	safari	CSS	12	20.04.2011 11:11
Float-Problem?	mischaef	CSS	33	20.10.2010 16:20
Hilfe: navigation included - wie kann man den aktiven menüpunkt highlighten?	nea23	Serveradministration und serverseitige Scripte	20	18.10.2010 17:08
Javascript UL Navigation im IE6	ven	CSS	7	29.04.2008 15:29
Container mit 2 Container darin -> Hintergrund anzeigen	bendar	CSS	4	05.04.2005 18:18