Icon to expand the menu link
Opened this issue · 0 comments
Werbeagentur-Kopfnuss commented
Hey,
I have a naviagtion where I can expand the menu with a click and close it again. To make this work, I have to customize your "mobile-menu.jequery.js".
from line: 175:
subMenus.each(function () {
var item = $(this);
var link = item.children("a.submenu, span.submenu, strong.submenu").eq(0);
var linkIcon = item.children("span").eq(0);
// Open the submenu of the active item
if (link.hasClass("active") || link.hasClass("trail")) {
item.addClass(self.settings.menuSubNavigationShowCssClass);
} else {
item.addClass(self.settings.menuSubNavigationHideCssClass);
}
// Open the submenu on click
/*link.on("click", function (e) {
var parent = $(this).parent();
if (!parent.hasClass(self.settings.menuSubNavigationShowCssClass)) {
e.preventDefault();
subMenus
.removeClass(self.settings.menuSubNavigationShowCssClass)
.addClass(self.settings.menuSubNavigationHideCssClass);
parent
.removeClass(self.settings.menuSubNavigationHideCssClass)
.addClass(self.settings.menuSubNavigationShowCssClass);
} else if (self.settings.parentTogglers) {
e.preventDefault();
parent
.addClass(self.settings.menuSubNavigationHideCssClass)
.removeClass(self.settings.menuSubNavigationShowCssClass);
}
});*/
// Open the submenu on click - icon - start
linkIcon.on("click", function (e) {
var parent = $(this).parent();
if (!parent.hasClass(self.settings.menuSubNavigationShowCssClass)) {
subMenus
.removeClass(self.settings.menuSubNavigationShowCssClass)
.addClass(self.settings.menuSubNavigationHideCssClass);
parent
.removeClass(self.settings.menuSubNavigationHideCssClass)
.addClass(self.settings.menuSubNavigationShowCssClass);
} else {
parent
.addClass(self.settings.menuSubNavigationHideCssClass)
.removeClass(self.settings.menuSubNavigationShowCssClass);
}
});
// Open the submenu on click - icon - end
var subNavigation = item.children("ul").eq(0);
// Recursively init sub navigation
if (subNavigation) {
self.initMenuNavigation(subNavigation);
}
});
In the "nav_default.html5" template I add a span with the class "nav-icon":
<ul class="<?= $this->level ?>">
<?php foreach ($this->items as $item): ?>
<?php if ($item['isActive']): ?>
<li class="<?= $item['class'] ?>"><span class="nav-icon"><?php if ($item['subitems']): ?><span class="nav-icon-inside"></span><?php endif; ?></span><strong class="<?= $item['class'] ?>"<?php if (!empty($item['subitems'])): ?> aria-haspopup="true"<?php endif; ?>><?= $item['link'] ?></strong><?= $item['subitems'] ?? '' ?></li>
<?php else: ?>
<li<?php if ($item['class']): ?> class="<?= $item['class'] ?>"<?php endif; ?>><span class="nav-icon"><?php if ($item['subitems']): ?><span class="nav-icon-inside"></span><?php endif; ?></span><a href="<?= $item['href'] ?: './' ?>" title="<?= $item['pageTitle'] ?: $item['title'] ?>"<?php if ($item['class']): ?> class="<?= $item['class'] ?>"<?php endif; ?><?php if ('' !== $item['accesskey']): ?> accesskey="<?= $item['accesskey'] ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?= $item['tabindex'] ?>"<?php endif; ?><?= $item['target'] ?><?= $item['rel'] ?? '' ?><?php if (!empty($item['subitems'])): ?> aria-haspopup="true"<?php endif; ?>><?= $item['link'] ?></a><?= $item['subitems'] ?? '' ?></li>
<?php endif; ?>
<?php endforeach; ?>
</ul>
Now I can open the submenu by clicking on the plus or minus icon.
Example: http://www.demo.werbeagentur-kopfnuss.de/startseite.html
Can you add this to the extension to make it update-proof?