Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/heimrichhannot/contao-buttermenu-bundle
Animated navigation menu for contao with hover-dropdown and off-canvas support.
https://github.com/heimrichhannot/contao-buttermenu-bundle
Last synced: about 2 months ago
JSON representation
Animated navigation menu for contao with hover-dropdown and off-canvas support.
- Host: GitHub
- URL: https://github.com/heimrichhannot/contao-buttermenu-bundle
- Owner: heimrichhannot
- License: lgpl-3.0
- Created: 2018-10-24T08:58:02.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2022-04-28T07:59:17.000Z (over 2 years ago)
- Last Synced: 2024-11-07T03:49:32.405Z (2 months ago)
- Language: PHP
- Size: 33.2 KB
- Stars: 3
- Watchers: 6
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Butter menu
[](https://packagist.org/packages/heimrichhannot/contao-butermenu-bundle)
[](https://packagist.org/packages/heimrichhannot/contao-butermenu-bundle/stats)
A smooth animated navigation menu for contao with hover dropdown (big screens for instance) and off-canvas (mobile for instance) modes.
## Technical Instructions
- Attach the butter menu to your `navigation` front end module by using the `nav_buttermenu_default` template.
- Enable `contao-buttermenu-bundle` as `active entry` at the `page setting` (Encore Fieldset)
- Add `@import "~contao-buttermenu/scss/_buttermenu";` to your project scss file and adjust variables before if required
## Styling
By default no styles are generated, set `$bm-menu-generate-classes` to `true` to style butter menu with defaults, otherwise use the provided mixins as stated below.
Required mixins for the default mode (include inside your media queries):
```
@include media-breakpoint-up(md) {
@include bm-default(theme-color('primary'));
}
```
Required mixins for the compact off-canvas mode (include this inside your media queries):
```
// .header_compact.scss
@include media-breakpoint-down(sm) {
@include bm-compact-basics();
@include bm-compact-backdrop();
@include bm-compact-default(theme-color('primary'));
}
```
### Using the compact off-canvas mode
If you have `data-bm-compact-mode` set to `off-canvas` on your `nav_buttermenu_default` template, you will need an canvas wrapper and for sure an burger menu.
The example below shows how it can work:
```
```
We recommend using animated [Hamburger icons from Jonathan Suh](https://jonsuh.com/hamburgers/). The `is-active` will be added automatically upon off-canvas menu is opened.
### Settings
Attribute | Scope | Default | Description
------ | ---- | ------- | -----------
data-bm-parent-muted | bm-menu | `touch` | Change to `click`, `touch` or `both` to prevent click on parent dropdown links
data-bm-min-left | bm-menu | 15 | Minimum offset to left side of viewport.
data-bm-min-right | bm-menu | 15 | Minimum offset to left side of viewport.
data-bm-columns | bm-menu | 2 | Column count. Limit height for ul > li inside dropdowns to provide flexbox column support with proper height calculation.
data-bm-column-min | bm-menu | 5 | Activate columns from `data-bm-columns` only if more than provided list item count.
data-bm-compact-breakpoint | bm-menu | 768 | The viewport breakpoint width below buttermenu will work in mobile `compact` mode.
data-bm-arrow-alignment | bm-menu | center | Change to left, right or center to align arrow with navigation text.
data-bm-compact-mode | bm-menu | off-canvas | Change to `default` for normal hover/touch dropdown-toggle, or to off-canvas for an mobile menu with burger menu.
data-bm-compact-canvas | bm-menu | null | Declare the css-selector for the canvas container e.g. `.bm-compact-canvas`
data-bm-compact-toggle | any off-canvas open/close trigger | null | Declare the off-canvas container css selector e.g. `.bm-compact-canvas` on any open/close trigger like the burger menu button.
data-bm-compact-show-current | bm-menu | false | If tru, upon open buttermenu in compact mode current active submenu is active (set to false for proper accessibility support)