Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Icon to expand the menu link #30

Open
Werbeagentur-Kopfnuss opened this issue Jan 30, 2024 · 0 comments
Open

Icon to expand the menu link #30

Werbeagentur-Kopfnuss opened this issue Jan 30, 2024 · 0 comments

Comments

@Werbeagentur-Kopfnuss
Copy link

Werbeagentur-Kopfnuss commented Jan 30, 2024

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant