...
Thanks to this module it is possible to configure a mega dropdown for desktop navigation. Mega dropdown The mega dropdown displays all categories from a root category.
| Table of Contents |
|---|
Installation
| Info |
|---|
This module is optional |
| Code Block |
|---|
composer require "creativestyle/magesuite-mega-dropdown" ^2.0.0 |
Admin settings
Megadropdoen can be enabled in Stores -> Configuration -> MageSuite -> Navigation
...
Additional settings are added to the category edit form: Catalog -> Categories -> [category]
Settings
Add a new symbol:
Backend
...
Set root category Include in main bar setting ads yes. Category name will be replaced with the name provided Mega dropdown Navigation configuration.
...
| Info |
|---|
Clear Navigation cache type after changes. |
Backend
| Note |
|---|
Backend part of this documentation should be added |
Frontend
...
Scripts
Megadropdoen script I located in components/navigation/navigation-mega-dropdown
It is initialized on HTML element [data-category-identifier="all-categories"]
| Code Block |
|---|
if (
navigationElement.querySelector(
'[data-category-identifier="all-categories"]'
)
) {
NavigationClass = NavigationMegaDropdown;
} |
class NavigationMegaDropdown extends Navigation It modifies the Navigation flyout behavior: skips adjusting column count for "All categories" root list, adjusts the number of submenu columns: the goal is to have as few columns as possible when keeping flyout's height bellow the given max height.
Styling
Html classes are the same as in the standard navigation flyout and styling is provided in navigation.scss file. there is an additional class: cs-navigation__flyout--all-categories that allows styling customizations in a child project.