https://github.com/heimrichhannot/contao-menu-bundle

https://github.com/heimrichhannot/contao-menu-bundle

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/heimrichhannot/contao-menu-bundle
• Owner: heimrichhannot
• Created: 2019-10-17T08:56:49.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2024-01-30T14:41:52.000Z (11 months ago)
• Last Synced: 2024-11-13T19:36:18.759Z (about 1 month ago)
• Language: PHP
• Size: 55.7 KB
• Stars: 0
• Watchers: 7
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# Contao Menu Bundle

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

Event             | Description

------------------|------------

`huhMenu:opening` | Thrown after the menu started opening

`huhMenu:opened`  | Thrown after the menu has been opened

`huhMenu:closing` | Thrown after the menu started closing

`huhMenu:closed`  | Thrown after the menu has been closed

### 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.