Skip to content

Icon to expand the menu link #30

Open
@Werbeagentur-Kopfnuss

Description

@Werbeagentur-Kopfnuss

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?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions