xtcModified Aktuelle Kategorie im Menü hervorheben

Um den aktuellen Menüpunkt in xtcModified hervorzuheben gibt es verschiedene Möglichkeiten.

Zum einen gibt es dafür das Modul von ‚gunnART‘, welches zusätzlich weitere verschiedene Einstellmöglichkeiten bietet.

Es geht aber auch ohne zusätzliches Modul, da xtcModified eigentlich schon alles mitbringt. Dazu die Datei ‚xtc_show_category.inc.php‘ im Verzeichnis ‚templates/xtc5/source/inc/‘ wie folgt anpassen.

Alle aktiven Menüpunkte im Navigationspfad fett darzustellen

In der Datei ‚xtc_show_category.inc.php‘ nach:


if ( ($id) && (in_array($counter, $id)) ) {
//$categories_string .= '';
}


suchen und durch:


if ( ($id) && (in_array($counter, $id)) ) {
$categories_string .= '<b>';
}
$categories_string .= $foo[$counter]['name'];

if ( ($id) && (in_array($counter, $id)) ) {
$categories_string .= '</b>';
}


ersetzen.

Allen aktiven Menüpunkten im Navigationspfad eine CSS-Klasse zuweisen

In der Datei ‚xtc_show_category.inc.php‘ nach:


$categories_string .= '">';


suchen und durch:


if ( ($id) && (in_array($counter, $id)) ) {$categories_string .= '" class="current'; }
$categories_string .= '">';


ersetzen.

Nur dem aktiven Menüpunkt eine CSS-Klasse zuweisen

Dazu wird die if-Bedingung weiter eingeschränkt. In der Datei ‚xtc_show_category.inc.php‘ nach:


$categories_string .= '">';


suchen und durch:


if ( $counter == $id[count($id)-1] ) {$categories_string .= '" class="current'; }
$categories_string .= '">';


ersetzen.

In der CSS-Datei muss schliesslich die Klasse ‚current‘ noch definiert werden:


ul#categorymenu li a.current {
border-right: 1px solid red;
}


So erreicht man bei einem aktiven Menüpunkt einen dünnen roten Rahmen an der rechten Seite.

Falls alternativ die Hintergrundfarbe der aktuellen Kategorie geändert werden soll, muss das für jeden Menülevel extra geschehen:


ul#categorymenu li.level1 .current {
background-color: #FF0000;
}
/* auch für alle anderen bis zum Level 6 */
ul#categorymenu li.level6 .current {
background-color: #FF0000;
}