codefog/contao-mobile_menu

Contao extension to add the mobile menu to your website easily

contao-mobile_menu's Issues

Module not working with latest Contao 4.x version

Not possible to navigate when using internal redirect

The site structure looks like:

• main point (Internal redirect to link 1)
  • link 1
  • link 2
  • link 3

First click on "main point", "link 1", "link 2" and "link 3" show up.
Second click on "main point" the site of "link 1" opens.
Now the navigation "main point" is a span (Contao 3) or strong (Contao 4) and you can't navigate any more. Is this a bug or do you want us to change the behaviour in the template "nav_default"?

Close menu using escape key

Is there a way to close the menu using the escape key? I try to optimize a page concerning the accessibility of the menu and it would be pretty awesome to be able to close the menu by pressing escape.

Please delete

Please delete - wrong extension...

Consider using "vh" units

Consider using the vh units instead of regular % which seem to have a problem displaying full-height divs on mobile devices.

Contao 4.13. and PHP 8.1

Hello,

may I ask if you are updating your plugin to Contao version 4.13. and PHP 8.1?

collision with Mod Back-2-top

Hi Kamil,

in addition to issue #13 there will be a collision with Back-2-Top from http://codyhouse.co/gem/back-to-top. If mobile_menu is activ, back-2-top doesn't work as usual. The button will stay at the bottom of the site.

Best regards, Detlef

Demo!?!

;-)

greetings from Berlin

Show menu trigger instead of hiding it

Make the mobile menu trigger invisible using CSS and show it using JS, so the trigger is not visible during the page load.

nav_default Anpassung erzeugen Fehler in der Version 1.2.0

Hi,
ich habe in meiner nav_default den LI - Elementen die Klasse von UL mitgegeben und das Template wie folgt angepasst:

<ul class="<?php echo $this->level; ?>" role="<?php echo ($this->level == 'level_1') ? 'menubar' : 'menu'; ?>">
  <?php foreach ($this->items as $item): ?>
    <?php if ($item['isActive']): ?>
      <li class="<?php echo $this->level; ?> <?php echo $item['class']; ?>"><span class="<?php echo $item['class']; ?>" role="menuitem"<?php if (!empty($item['subitems'])): ?> aria-haspopup="true"<?php endif; ?>><?php echo $item['link']; ?></span><?php echo $item['subitems']; ?></li>
    <?php else: ?>
      <li class="<?php echo $this->level; ?> <?php echo ($item['class']) ? $item['class'] : ''; ?>"><a href="<?php echo $item['href']; ?>" title="<?php echo $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']; ?> role="menuitem"<?php if (!empty($item['subitems'])): ?> aria-haspopup="true"<?php endif; ?>><?php echo $item['link']; ?></a><?php echo $item['subitems']; ?></li>
    <?php endif; ?>
  <?php endforeach; ?>
</ul>

in Version 1.1.4 wird diese Änderung akzeptiert, die Version 1.2.0 hat Probleme die passende Klasse zu finden und der Browser beendet die Verarbeitung mit dem Fehler:

Uncaught TypeError: Cannot read property 'className' of null

Vllt. kannst du den "Fehler" beheben oder einen Hinweis hinterlassen das dein Modul nur mit dem Standard-Template funktioniert.

Herzlichen Dank

Contao 4.8.4 version a bug with articles / page assignment

hello, your extension causes a bug in the Contao 4.8.4 version for items associated with an individual rent.

1/1) ErrorCall to a member function query() on null

in tl_article.php line 70
at tl_article_mobile_page_layout_bundle->getActiveLayoutSections(object(DC_Table))in DC_Table.php line 4289
at DC_Table->parentView()in DC_Table.php line 360
at DC_Table->showAll()in Backend.php line 630
at Backend->getBackendModule('article', null)in BackendMain.php line 161
at BackendMain->run()in BackendController.php line 50
at BackendController->mainAction()in HttpKernel.php line 151
at HttpKernel->handleRaw(object(Request), 1)in HttpKernel.php line 68
at HttpKernel->handle(object(Request), 1, true)in Kernel.php line 198
at Kernel->handle(object(Request))in index.php line 31
at require('/home/staktffm/www.domain.de/update/web/index.php')in app.php line 4

Problems with position:fixed elements by using contao-mobile_menu with offcanvas

When using "off canvas effect" it is not possible to place any element on the whole web page with position:fixed.

The cause is the:
transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1);
will-change: transform;

in the div with the id "wrapper", which is entered there by setting the checkmark "off Canvas Effect".

Since navigation menus or other elements like to be fixed, this problem is not so optimally solved, especially in connection with this module. It should still be possible to use position:fixed. I would be happy if there was a solution for this, as the module is otherwise very good.

Update to contao bundle

Can you update the extension to a contao-bundle? This would remove the dependency on the the composer plugin.

Icon to expand the menu link

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?

Off canvas effect doesn't work

Hi codefog.

I updated the mobile_menu to the new version 2.0.0 (Contao 3.5.3) and activated the option "Off canvas effect" (Position Right side) but I can scroll to the right side an see the menu even if not active.

Can you please take a look or give me a hint what I forgot? :)

Thx.
Nicole

Please delete

Please delete - wrong extension...

Prevent content scrolling when menu is active

There should be a way to disable scrolling of the page content when the menu is active. You could toggle overflow: hidden; on <body> via inline-style or toggle a class like mobile_menu_active on <body> so we can control the behaviour in css.

Undefined constant "Codefog\MobileMenu\TL_MODE"

Error:
Undefined constant "Codefog\MobileMenu\TL_MODE"

at vendor/codefog/contao-mobile_menu/src/MobileMenuModule.php:36
at Codefog\MobileMenu\MobileMenuModule->generate()
(vendor/contao/core-bundle/contao/library/Contao/Controller.php:410)
at Contao\Controller::getFrontendModule(object(ModuleModel), 'header')
(vendor/contao/core-bundle/contao/pages/PageRegular.php:170)
at Contao\PageRegular->prepare(object(PageModel))
(vendor/contao/core-bundle/contao/pages/PageRegular.php:46)
at Contao\PageRegular->getResponse(object(PageModel), true)
(vendor/contao/core-bundle/contao/controllers/FrontendIndex.php:76)
at Contao\FrontendIndex->renderPage(object(PageModel))
(vendor/symfony/http-kernel/HttpKernel.php:163)
at Symfony\Component\HttpKernel\HttpKernel->handleRaw(object(Request), 1)
(vendor/symfony/http-kernel/HttpKernel.php:75)
at Symfony\Component\HttpKernel\HttpKernel->handle(object(Request), 1, true)
(vendor/symfony/http-kernel/Kernel.php:202)
at Symfony\Component\HttpKernel\Kernel->handle(object(Request))
(public/index.php:44)

lokale Umgebung contao 5.04 php 8.1.8 neues Projekt

Possible conflict with jQuery SMINT

There seems to be a conflict with the jQuery SMINT plugin (http://www.outyear.co.uk/smint/). I'm not able to run these two scripts together in a project although I tried different "noConflict" setups. Any hints or ideas how to fix this problem?

Position in the source code

Is there a way to change the position of the actual menu code in the source code? I would like to place it directly after the trigger code, so when using the tab key you can jump from the trigger in the menu.

At the moment the menu sits at the bottom of the page. So if you use the trigger you have to jump over all the links in between first to get to the menu items.

Question: Close menu when clicking anchor links

I have an anchor link in the mobile navigation. What do I need to do to close the menu after clicking the anchor link? I know there is an option for one page sites, but I need it for one link only.

Remove the manager plugin

I'm sorry, as you might know we're still working on finalising the Contao Managed Edition. The Manager Plugin is no longer required for Contao 3 modules, as we're again autoloading system/modules. Please remove the plugin file and composer.json adjustments, otherwise the extension might not be able to install.

Feature: Keep .mod_mobile_menu in its place

Hello Kamil,

thank you for your good work on this mobile menu.

Is it possible to add a new feature which keeps the module container in place? All you have to do is to make this line
https://github.com/codefog/contao-mobile_menu/blob/master/assets/js/mobile-menu.jquery.js#L120
dependend on a new option 'keep_in_place'.

I need this because I like to use this menu on all viewport widths as the only one menu that is present. On large viewports it's much easier if it stays in its place where I included it. I then set it to position:relative. Position:fixed also works if it stays in it's place.

Trigger don't work with position:fixed;

Hi Kamil,

great extension! Thank you for this. It work's fine for me but there is an issue:

I find no solution to set the trigger to position:fixed; (or to position:sticky;). In both cases the trigger will scroll with the other content.
I insert the module at the end of my header after some div's. I set this css (no matter !important is set or not):
.mobile_menu_trigger { position:fixed !important; top:30px; }
The trigger content:
<span><i class="fa fa-bars">[nbsp]</i> Menü</span>

If Mobile_menu ist activ, no other statement position:fixed; will work except your mod cookiebar.

Best regards, Detlef

TypeError: $("#mobile-menu-97").mobileMenu is not a function

Hi codefog,
I use the release codefog/contao-mobile_menu 2.7.
I install the module and made the config how in the doc. But I get the following error (Uncaught TypeError: $("#mobile-menu-97").mobileMenu is not a function).
Did you have a workaround.
Thank you

closeOnLinkClick should not close on first click on submenu item

Normally first click on submenu item just expands that submenu. The second click then jumps to the submenu page.
If closeOnLinkClick is activated, I think it should be the same: close the mobile_menu in these cases on the second click. Perhaps this could be done in mobile-menu.jquery.js near line 113, depending on the classes of the parentElement ('submenu_show' or 'submenu_hide'). But I couldn't get it working...

Thanks for any hint

[CSS] Make menu shadow optional

Make initMenuNavigation() trigger optional

Currently the initMenuNavigation() method is triggered when the menu is initialized. This should be made optional so user is not forced to use collapse/expand subitems feature.

Not working with Contao 4.4.20

It seems that this modue is not working with Contao 4.4.20

The mobile Navigation is opening but there is no "content". I added the navigation via Insert nothing, even simple text is not working. The Trigger is shown and works fine. (see Screenshot)

Any ideas? Thanks in advance!