codefog / contao-mobile_menu Goto Github PK
View Code? Open in Web Editor NEWContao extension to add the mobile menu to your website easily
License: MIT License
Contao extension to add the mobile menu to your website easily
License: MIT License
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
Make the mobile menu trigger invisible using CSS and show it using JS, so the trigger is not visible during the page load.
Please delete - wrong extension...
The site structure looks like:
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"?
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.
Please delete - wrong extension...
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.
Consider using the vh
units instead of regular %
which seem to have a problem displaying full-height divs on mobile devices.
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.
;-)
greetings from Berlin
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.
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
Can you update the extension to a contao-bundle? This would remove the dependency on the the composer plugin.
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
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?
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
Hello,
may I ask if you are updating your plugin to Contao version 4.13. and PHP 8.1?
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.
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
hello, your extension causes a bug in the Contao 4.8.4 version for items associated with an individual rent.
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
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.
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
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.
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?
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.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.