Contaos Navigationstemplate angepasst: Aktiven Menüpunkt als Link anzeigen

von Oliver Richter (Kommentare: 0)

Ich finde es seit jeher ungünstig, dass in der Contao-Navigation die aktive Seite in einer Navigation nicht als Link ausgegeben wird.

Um auch die aktive Seite in der Navigation als Link auszugeben und die folgende Markup-Struktur (siehe folgenden Code und dort die Verschachtelung von <li>-, <a>- und <span>-Tags) für alle Menüpunkte beizubehalten, habe ich das Navigationstemplate etwas angepasst. Das Ergebnis ist folgendes Markup in der Ausgabe (der Link wird also auch durch einen <a>-Tag ausgegeben):

<ul class="level_1">
 <li class="first"><a href="s1.html" title="S1" class="first"><span>S1</span></a></li>
 <li><a href="s2.html" title="S2"><span>S2</span></a></li>
 <li><a href="s3.html" title="S3"><span>S3</span></a></li>
 <li class="active last"><a href="s4.html" title="S4" class="active last"><span class="active last">S4</span></a></li>
</ul>

Das Template nav_defaul.xhtml sieht dann wie folgt aus: 

<ul class="<?php echo $this->level; ?>">
<?php foreach ($this->items as $item): ?>
<?php if ($item['isActive']): ?>
<li class="active<?php if ($item['class']): ?> <?php echo $item['class']; ?><?php endif; ?>"><a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>" class="active <?php if ($item['class']): ?> <?php echo $item['class']; ?><?php endif; ?>"<?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?php echo $item['target']; ?>><span class="active<?php if ($item['class']): ?> <?php echo $item['class']; ?><?php endif; ?>"><?php echo $item['link']; ?></span></a><?php echo $item['subitems']; ?></li>
<?php else: ?>
<li<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?>><a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?php echo $item['target']; ?>><span><?php echo $item['link']; ?></span></a><?php echo $item['subitems']; ?></li>
<?php endif; ?>
<?php endforeach; ?>
</ul>

Edit (vom 01.03.2013): Hier auch das Template für Contao 3.0.1:

<ul class="<?php echo $this->level; ?>">
<?php foreach ($this->items as $item): ?>
<?php if ($item['isActive']): ?>
<li class="<?php echo $item['class']; ?>"><a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?php echo $item['target']; ?>><span class="<?php echo $item['class']; ?>"><?php echo $item['link']; ?></span></a><?php echo $item['subitems']; ?></li>
<?php else: ?>
<li<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?>><a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?php echo $item['target']; ?>><span><?php echo $item['link']; ?></span></a><?php echo $item['subitems']; ?></li>
<?php endif; ?>
<?php endforeach; ?>
</ul>

Hinweis: Für die Einhaltung der Richtlinien zur Barrierefreiheit ist die obige Anpassung etwas problematisch. Der aktive Menüpunkt sollte strukturell gekennzeichnet werden als solcher.
Ich setze hier ggf. eine Javascript-Lösung ein oder verwende eine noch optimiertere Anpassung des Templates. 

Zurück

Einen Kommentar schreiben

Was ist die Summe aus 5 und 2?

Bachten Sie: Für die Zuordnung Ihrer Nachricht werden die hier anzugebenden Daten Name, E-Mailadresse, Ihr Kommentar gespeichert. Sofern Sie den Wunsch der E-Mail-Benachrichtigung angegeben haben, wird aufgrund technischer Notwendigkeit auch dieser Wert gespeichert. Durch Absenden des Formulars erklären Sie sich damit einverstanden. Alternativ kontaktieren Sie mich bitte über meine E-Mailadresse oder Telefon.
Detaillierte und weitere Hinweise, insb. zum Widerrufsrecht finden Sie in der Datenschutzerklärung.

Sie befinden Sich in der Detailansicht eines Blog-Eintrags.

Um alle Blog-Einträge zu sehen, wechseln Sie bitte zur Nachrichten-Übersicht