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.
Sie befinden Sich in der Detailansicht eines Blog-Eintrags.
Um alle Blog-Einträge zu sehen, wechseln Sie bitte zur Nachrichten-Übersicht.
Einen Kommentar schreiben