Взять dropdown и доопределить раскрытие по наведению. Не вижу проблемы с этим.

С помощью доопределения блока dropdown получилось сделать меню с одним уровнем вложенности. А вот два уже проблема, может кто поможет?

Вот что у меня получилось для одного уровня:

BEMJSON:

{
    block : 'dropdown',
    mods  : {
        switcher : 'link'

    },
    switcher : 'Выпадающий список',
    popup: {
        block   : 'popup',
        content : [
            {
                block   : 'menu-item',
                content : 'Первый пункт'
            },
            {
                block : 'dropdown',
                mods  : {
                    switcher : 'link',
                    theme    : 'main-menu'
                },
                switcher : 'Вложенный выпадающий список',
                popup    : {
                    block      : 'popup',
                    directions : ['right-top'],
                    content : [
                        {
                            block   : 'menu-item',
                            content : 'Первый подпункт'
                        },
                        {
                            block   : 'menu-item',
                            content : 'Второй подпункт'
                        }
                    ]
                }
            },
            {
                block   : 'menu-item',
                content : 'Второй пункт'
            }
        ]
    }
}

JS:

modules.define(
    'dropdown',
    ['next-tick'],
    function(provide, nextTick, dropdown)
    {
        provide(dropdown.decl(this.name,
        {
            onSetMod : {
                js : {
                    inited : function()
                    {
                        this._initListeners();
                    }
                }
            },

            _initListeners : function ()
            {
                var dropdownLink    = this.findBlockInside('link');
                var popup           = this.getPopup();
                var onDelModHovered = this._onDelModHovered.bind(this, dropdownLink, popup);

                popup.on({ modName : 'hovered', modVal : false }, onDelModHovered.bind(this, true))

                dropdownLink
                    .on({ modName : 'hovered', modVal : true }, this._onSetModHovered.bind(this))
                    .on({ modName : 'hovered', modVal : false }, onDelModHovered.bind(this, false));
            },

            _onDelModHovered : function (dropdownLink, popup, isFromPopup)
            {
                var self = this;

                nextTick(function() {

                    if (!dropdownLink.hasMod('hovered')
                        && !popup.hasMod('hovered')
                    ) {
                        self.delMod('opened');
                    }
                });
            },

            _onSetModHovered : function ()
            {
                this.setMod('opened');
            }
        },
        {
            live: false
        }));
    }
);

Еще есть код, который добавляет модификатор hovered для блока popup, который тут используется, приводить его не буду.

Помогите советом в каком направлении двигаться для многоуровнего меню, спасибо!

P.S С открытием вложенных подменю проблем нету, приведенный код делает это прекрасно. А вот с правильным закрытием возникает проблема. Т.е я не могу закрыть например все попапы открытые, т.к dropdown видет только свое popup, а до родительского хз как добраться.

Если разобраться как скрывать хотя бы все открытые попап, то остальное я уже допилю.

Хотелось бы использовать только i-bem функционал в идеале, без jquery

На неделе поделюсь 2уровневым меню. Правда оно не на дропдаунах, а выезжающее. Но мало ли чего полезного почерпнуть получится.

А popup autoclosable смотрели?

https://github.com/bem/bem-components/blob/v2/common.blocks/popup/_autoclosable/popup_autoclosable.js

Вообщем все получилось - немного кода с использованием dropdown. @Guria и popup_autoclosable пригодился в том числе, жалко конечно, что в этом классе, статическая переменная, которая копит стек всех открытых попапов, описана не в специальном блоке предназначенным для статики в inherit, а просто описана до класса и соответственно до нее не добраться на другом уровне переопределения, ну это так к слову, обошелся и без нее.

Если кому необходимо - выложу по просьбе.

Намучился уже с многоуровневым меню, руки опускаются

Выложи решение, пожалуйста.

@DjonyBastone

modules.define(
    'dropdown-menu',
    ['i-bem__dom'],
    function dropdownMenu(provide, bemDom) {
        const MOD_NAME_HOVERED = 'hovered';
        const MOD_NAME_OPENED = 'opened';

        const SET_MOD_HOVERED = { modName : MOD_NAME_HOVERED, modVal : true };
        const DEL_MOD_HOVERED = { modName : MOD_NAME_HOVERED, modVal : false };

        const POPUP_BEFORE_CLOSE_TIMEOUT_MS = 100;

        provide(bemDom.decl(this.name, {

            _onDropdownSetModHoveredLive(e) {

                if (this._dropdowns) {
                    return;
                }

                this._dropdowns = this
                    .findBlocksInside('dropdown')
                    .reverse();

                this._dropdowns.forEach(dropdown => {
                    dropdown
                        .on(SET_MOD_HOVERED, this._onDropdownSetModHovered, this)
                        .on(DEL_MOD_HOVERED, this._onDropdownDelModHovered, this);
                });

                this._onDropdownSetModHovered(e);
            },

            _onDropdownSetModHovered(e) {
                e.target.setMod(MOD_NAME_OPENED);
            },

            _onDropdownDelModHovered(e) {

                setTimeout(() => {

                    this._dropdowns.forEach(dropdown => {

                        if (dropdown.hasMod(MOD_NAME_OPENED)) {
                            const popup = dropdown.getPopup();
                            const isPopupDropdownOpen = popup
                                .findBlocksInside('dropdown')
                                // Exclude current popup
                                .slice(1)
                                .some(popupDropdown => popupDropdown.hasMod(MOD_NAME_OPENED));

                            if (!(dropdown.hasMod(MOD_NAME_HOVERED)
                                || popup.hasMod(MOD_NAME_HOVERED)
                                || isPopupDropdownOpen
                            )) {
                                dropdown.delMod(MOD_NAME_OPENED);
                            }
                        }
                    })
                }, POPUP_BEFORE_CLOSE_TIMEOUT_MS);
            }
        }, {
            live() {
                this.liveInitOnBlockInsideEvent(
                    SET_MOD_HOVERED, 'dropdown',
                    this.prototype._onDropdownSetModHoveredLive
                );
            },
        }));
    }
);