Anstatt die Klassen mit jquery einzufügen, könnte man folgendes nav-template versuchen
HTML-Code:
<?php if($this->level==level_1): ?>
<ul data-breakpoint="800" class="<?php echo $this->level; ?> flexnav">
<?php else: ?>
<ul class="<?php echo $this->level; ?>">
<?php endif; ?>
<?php foreach ($this->items as $item): ?>
<?php if ($item['isActive']): ?>
<li class="<?php echo $item['class']; ?>"><span class="<?php echo $item['class']; ?>"><?php echo $item['link']; ?></span><?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']; ?>><?php echo $item['link']; ?></a><?php echo $item['subitems']; ?></li>
<?php endif; ?>
<?php endforeach; ?>
</ul>
das script sieht dann so aus
HTML-Code:
<script>
(function($) {
$(document).ready(function() {
$(".flexnav").flexNav();
});
})(jQuery);
</script>
allerdings müsste man dann noch etwas das flexnavi.css anpassen zB:
HTML-Code:
.flexnav li a,.flexnav li span.active {
position: relative;
display: block;
padding: .96em;
z-index: 2;
overflow: hidden;
color: #222222;
background: #a6a6a2;
border-bottom: 1px solid rgba(0, 0, 0, 0.15); }
habe es nur kurz getestet, aber grundsätzlich passt es (am css müsste man noch etwas rumfummeln).
Achja, den menü-button für kleine displays kann man einfach per eigenem html-modul einfügen.
PS: Habe gerade gemerkt, dass es nicht mit dem layout-builder.css funktioniert (irgendwas ist ja immer)
Lesezeichen