heimrichhannot / contao-menu-bundle
This bundle adds a multi-level menu module for the Contao CMS.
Installs: 1 251
Dependents: 0
Suggesters: 0
Security: 0
Stars: 0
Watchers: 7
Forks: 3
Open Issues: 1
Type:contao-bundle
Requires
- php: ^7.1||^8.0
- contao/core-bundle: ^4.4
- heimrichhannot/contao-encore-contracts: ^1.0
- heimrichhannot/contao-utils-bundle: ^2.116
Requires (Dev)
- contao/manager-plugin: ^2.0
- contao/test-case: 1.1.*
- friendsofphp/php-cs-fixer: ^2.2
- php-http/guzzle6-adapter: ^1.1
- php-http/message-factory: ^1.0.2
- phpunit/php-token-stream: ^1.4|^2.0|^3.0
- phpunit/phpunit: ^6.5
- phpunit/phpunit-mock-objects: ^4.0|^5.0
- satooshi/php-coveralls: ^2.0
- symfony/phpunit-bridge: ^3.2
README
This bundle adds a multi-level menu module for the Contao CMS.
Features
- submenus are opened by hovering (or by tapping on touch devices)
- works both for mouse and for touch-based devices
- includes a preset template for bootstrap 4 (
nav_huh_menu_bs4) - define how many levels are collapsed
- define delays for opening and closing submenus
Behavior
The menu is based on the mouseover event ("hover"). This way it works for both mouse and touch-based devices since mouseover events are triggered by tap events
on most touch devices.
On devices with window.navigator.maxTouchPoints being 0, you can also click the submenu headers because submenus are opened by hovering.
Technical notes
Events
Why can't submenu headers be clicked on multi-touch devices?
Because then submenu entries could never be reached.
On Microsoft Surface
Even in tablet mode the device doesn't throw touch but mouse events. Also it masquerades as a desktop computer with mouse. Hence it tells the browser
that it supports hovering (Modernizr.hovermq is true). So if we'd allow that submenu headers can be tapped and directly opened, this would not only happen
if a mouse is attached but also in tablet mode while the user uses his finger. In this case submenu entries could never be reached.
The menu closes when I hover above a submenu
HTML document have to be in standards mode. Make sure is set!
This is in most cases caused by CSS margins. Please only use paddings to adjust dimensions of the menus items. Please make sure that submenus (ul and li) take the space where the cursor can be over.
Known issues
What about smaller screen dimensions?
Currently this menu is only for dimensions like tablet landscape and larger. So please use another module for this case. Nevertheless it's planned for this bundle to support bootstrap's mobile menu for smaller screen dimensions out of the box.