Как отобразить подкатегории на той же высоте, что и родительская категория в Magento 2-меню

Question

Как отобразить подкатегории на той же высоте, что и родительская категория в Magento 2-меню

Итак, у меня есть несколько категорий, у которых есть свои подкатегории, и у которых есть свои подкатегории и т. Д. И т. Д.. Поэтому прямо сейчас, когда я перемещаюсь по вертикальному меню и навожу курсор на категорию, подкатегории всегда отображаются В ВЕРХНЕЙ части меню. Даже если родительская категория была далеко внизу в меню. Я хочу, чтобы подкатегории открывались на той же высоте, что и родительская категория. Я добавил и текст, и картинку, чтобы решить проблему.

Вот как работает меню на данный момент:

 - menu________subcategory
 - menu________subcategory2
 - menu
 - menu
 - opened menu

И вот как я хочу, чтобы это работало:

 - menu
 - menu
 - menu
 - menu
 - opened menu|subcategory
 - ____________subcategory2

Что я должен сделать?

1

css category topmenu custom-menu

Author: Jaimin Parikh, 2016-07-14

Source

1 answers

score 0 · Accepted Answer

Я хотел бы, чтобы это было так же просто, как изменить некоторые CSS, к сожалению, это не так...

В _navigation.less Magento устанавливает свойство top элементов подменю как 0 !important. Он делает это в микшере "библиотека-главная-навигация-рабочий стол".

Чтобы изменить это, ваша тема должна перезаписать _navigation.less. Вы делаете это, копируя поставщика/magento/тему-интерфейс-пустой/веб/css/источник/_navigation.меньше в вашей пользовательской теме в разделе {каталог тем}/web/css/источник/_navigation.меньше. Следующий, откройте lib/web/css/исходный код/lib/_навигация.меньше и найдите .lib-main-navigation-desktop (строка 219-443). Скопируйте весь этот блок кода в начало _navigation.меньше файлов в вашей теме. Переименуйте его во что-то вроде .my-main-navigation-desktop.

Найдите этот код в миксине:

.submenu {
    top: 0 !important;
    left: 80% !importatn;
}

Удалите строку top: 0 !important;. Теперь найдите строку .lib-main-navigation-desktop(); в нижней части файла и замените ее на .my-main-navigation-desktop(); или как вы там назвали миксин.

Теперь, когда мы удалили жестко запрограммированное свойство top, если вы перекомпилировали css на этом точка, в которой вы обнаружите, что подменю теперь расположены вертикально под родительским, а это не то, что мы хотим. Чтобы они были на правильном уровне, нам нужно внести некоторые изменения в javascript, который управляет меню.

Для этого мы создаем новый модуль с типичными шаблонными файлами.

Копия lib/web/mage/menu.js в {ваш_модуль_дир}/view/frontend/web/js/menu.js . В этом файле найдите этот раздел кода (строки 335-344):

"mouseenter .ui-menu-item": function (event) {
                    var target = $(event.currentTarget),
                        ulElement,
                        ulElementWidth,
                        width,
                        targetPageX,
                        rightBound;

                    if (target.has('ul')) {
                        ulElement = target.find('ul');

Сразу после этого последнего строка, вставьте это:

if (ulElement[0] && !ulElement[0].classList.contains('level0')) {
    var cssTop = event.target.offsetTop,
        ele = $(ulElement[0]);                         

    window.setTimeout(function () {                        
        ele.css('top', cssTop).animate({top: cssTop}, 20);                        
    }, this.options.delay-10);                        
}

Причина, по которой мы используем тайм-аут и анимацию, заключается в том, что где-то на линии есть скрипт, который устанавливает свойство css top (я не могу найти, где это происходит), и поэтому мы должны "заставить" его использовать правильное значение.

В нашем модуле нам нужно указать magento использовать этот скрипт, чтобы мы создали requirejs-config.js файл здесь: {module_dir}/view/frontend/web/requirejs-config.js с этим содержимым:

var config = {
    map: {
        "*": {
            menu: "Your_Module/js/menu"
        }
    }
};

Теперь нам просто нужно запустить несколько команд оболочки из magento корень:

rm -rf pub/static/*
rm -rf var/view_preprocessed/*
php bin/magento setup:upgrade
php bin/magento cache:flush

Хорошо, этого должно хватить!