codefog/contao-mobile_menu

Icon to expand the menu link

Opened this issue · 0 comments

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?