Hierarchische Navigation mit Hervorhebung der aktuellen Seiten

Question

Hallo,
ich habe eine Navigation in meinen Fragebogen eingebaut und mich dabei an der Anleitung https://www.soscisurvey.de/help/doku.php/de:create:navigation orientiert. In meinem Fragebogen hätte ich allerdings gern eine hierarchische Navigation, also ein Haupt- und ein Submenü. Dies scheint ja an sich möglich zu sein und ich habe es auch (z.B. aktuell über zwei Methoden navigation() und subNavigation() auf den Seiten des Fragebogens) mit PHP+CSS hinbekommen. Allerdings habe ich Probleme mit dem Highlighten der aktuellen Seiten, bei euch steht "buttonToPage() belegt den Knopf, welcher auf die aktuelle Seite verweist, mit der CSS-Klasse currentPage", aber ich kriege es nicht hin, dass gleichzeitig der aktuelle Subeintrag und der dazugehörige Haupteintrag hervorgehoben wird. Ist dies grundsätzlich überhaupt möglich? Und gibt es eine gute/erprobte Strategie bzw. habt ihr zufällig Tipps an der Hand, um eine hierarchische Navigation zu implementieren? Vielleicht hab ich in eurer Dokumentation auch nur noch nicht den richtigen Eintrag gefunden...

Vielen Dank!

Answer 1

Sie können als vierten Parameter in buttonToPage() eine CSS-Klasse festlegen - und damit manuell für das Hervorheben des Knopfes sorgen.

Allerdings muss Ihr PHP-Code dafür wissen, welchen Knopf er hervorheben soll. Das könnten Sie z.B. erledigen, indem Sie in navigation() einen Parameter definieren, welcher Knopf hervorgehoben werden soll. Wenn Sie z.B. die CSS-Klasse .active entsprechend definieren, könnte die PHP-Funktion wie folgt aussehen:

function navigation($page)
{
    $pages = ['start', 'kontakt', 'studium', 'leistungen'];

    $html = '<div>';
    foreach ($pages as $pageID) {
        if ($pageID === $page) {
            $cssClass = 'active';
        } else {
            $cssClass = '';
        }
        $html. = buttonToPage($pageID, NULL, NULL, $cssClass);
    }
    $html.= '</div>';

    html($html);
}

Und der Aufruf im Fragebogen wäre entsprechend:

navigation('studium');

Answer 2

Vielen Dank, das hat mir sehr weitergeholfen, auch wenn es über die Klasse active nicht funktioniert hatte. Um den Hauptmenüeintrag gleichzeitig mit dem zugehörigen Submenüeintrag zu highlighten, habe ich ausgenutzt, dass buttonToPage() dem aktiven Button die CSS-Klasse currentPage zuweist. Da es vielleicht auch für andere interessant ist, ich habe es in meinem Code für zwei Navigationsleisten (im CSS dann mainmenu und submenu) so gelöst

function navigation($currentPage) {
    $navigationItems = getNavigationItems();
    replace('%menucolor%',$navigationItems[$currentPage]['color'],'html');
    $output = '<nav><ul class="mainmenu">';
    // Hauptnavigation
    foreach ($navigationItems as $mainKey => $mainItem) {
        $isActiveMain = ($currentPage === $mainKey) ? 'currentPage' : '';
        $output .= '<li><div class="s2flex navButtons" style="flex-wrap: wrap;">'.buttonToPage($mainItem['link'],$mainItem['label'], NULL, $isActiveMain).'</div></li>';
    }
    $output .= '</ul><ul class="submenu">';
    foreach ($navigationItems[$currentPage]['sub'] as $subKey => $subItem) {
        // buttonToPage setzt Seite automatisch auf current, wenn sie angeklickt ist
        $output .= '<li><div class="s2flex navButtons" style="flex-wrap: wrap;">'.buttonToPage($subItem['link'],$subItem['label'], NULL, NULL).'</div></li>';
    }
    $output .= '</ul></nav>';
    html($output);
}

wobei meine Funktion für die Navigationseinträge von Haupt- und Subnavigation zum Beispiel so

function getNavigationItems() {
  return [
   'method' => [
        'label' => 'Methoden', 
        'link' => 'method', 
        'color' => '#979796',
        'sub' => [
            'method1' => ['label' => 'Erste Methode', 'link' => 'method1'],
            'method2' => ['label' => 'Zweite Methode', 'link' => 'method2'],
            'method3' => ['label' => 'Dritte Methode', 'link' => 'method3']
        ]
    ], //etc
];
}

aussieht. Der Aufruf im Fragebogen auf jeder Seite ist dann (je nach Kennug der Seite)

navigation('method');

Jeder Haupteintrag bekommt bei mir noch eine Farbe zugewiesen für das Styling und im CSS könnte es beispielsweise so genutzt werden

.mainmenu .buttonToPage.currentPage {
   color: %menucolor%; 
   font-weight: bold;
   height: 80px;
}