Баг при использовании off-canvas menu

DedMazay74
3 Posts
DedMazay74 posted this 09 May 2018

Здравствуйте!
При использовании off-canvas menu становятся неактивными элементы управления в контенте (кнопки, спойлеры и т.д.). Для решения этой проблемы пришлось внести изменения в двух фалах. В файле тема/css/template.css в классе bd-menu-overlay вместо position: fixed; нужно прописать position: absolute;. А в файле тема/script.js в функцииях

 $.fn.emulateTransitionEnd = dummyTransitionEnd(parseTiming(menu.data('offcanvasDuration')) + parseTiming(menu.data('offcanvasDelay')));
        requestAnimationFrame(function () {
            var width = menu.find('.navbar-collapse')[0].style.width;

            menu.find('.bd-menu-overlay')
                .css('opacity', 1)
                .css('z-index', 100)
                .css('margin-left', width);
            if (offcanvasShift) {
                $body.css('left', width);
            }
            $.fn.emulateTransitionEnd = emulateTransitionEnd;
        });
    });

    $body.on('shown.bs.collapse', '.navbar-collapse.width', function (event) {
        $(event.target).css('width', '');
    });

    $body.on('hide.bs.collapse', '.navbar-collapse.width', function (event) {
        var menu = $(event.target).closest('nav');
        var offcanvasShift = menu.data('responsiveType') === 'offcanvas-shifted';
        menu.find('.bd-menu-overlay')
            .css('opacity', '')
            .css('z-index', '')
            .css('margin-left', '');

        if (offcanvasShift) {
            $body.css('left', '0');
        }

добавить пару строчек

 $.fn.emulateTransitionEnd = dummyTransitionEnd(parseTiming(menu.data('offcanvasDuration')) + parseTiming(menu.data('offcanvasDelay')));
        requestAnimationFrame(function () {
            var width = menu.find('.navbar-collapse')[0].style.width;

            menu.find('.bd-menu-overlay')
                .css('opacity', 1)
                .css('z-index', 100)
                .css('position', 'fixed')
                .css('margin-left', width);
            if (offcanvasShift) {
                $body.css('left', width);
            }
            $.fn.emulateTransitionEnd = emulateTransitionEnd;
        });
    });

    $body.on('shown.bs.collapse', '.navbar-collapse.width', function (event) {
        $(event.target).css('width', '');
    });

    $body.on('hide.bs.collapse', '.navbar-collapse.width', function (event) {
        var menu = $(event.target).closest('nav');
        var offcanvasShift = menu.data('responsiveType') === 'offcanvas-shifted';
        menu.find('.bd-menu-overlay')
            .css('opacity', '')
            .css('z-index', '')
            .css('position', 'absolute')
            .css('margin-left', '');

        if (offcanvasShift) {
            $body.css('left', '0');
        }

Возможно, есть более элегантное решение, но я додумался только до такого))

Здравствуйте! При использовании off-canvas menu становятся неактивными элементы управления в контенте (кнопки, спойлеры и т.д.). Для решения этой проблемы пришлось внести изменения в двух фалах. В файле тема/css/template.css в классе bd-menu-overlay вместо position: fixed; нужно прописать position: absolute;. А в файле тема/script.js в функцииях $.fn.emulateTransitionEnd = dummyTransitionEnd(parseTiming(menu.data('offcanvasDuration')) + parseTiming(menu.data('offcanvasDelay'))); requestAnimationFrame(function () { var width = menu.find('.navbar-collapse')[0].style.width; menu.find('.bd-menu-overlay') .css('opacity', 1) .css('z-index', 100) .css('margin-left', width); if (offcanvasShift) { $body.css('left', width); } $.fn.emulateTransitionEnd = emulateTransitionEnd; }); }); $body.on('shown.bs.collapse', '.navbar-collapse.width', function (event) { $(event.target).css('width', ''); }); $body.on('hide.bs.collapse', '.navbar-collapse.width', function (event) { var menu = $(event.target).closest('nav'); var offcanvasShift = menu.data('responsiveType') === 'offcanvas-shifted'; menu.find('.bd-menu-overlay') .css('opacity', '') .css('z-index', '') .css('margin-left', ''); if (offcanvasShift) { $body.css('left', '0'); } добавить пару строчек $.fn.emulateTransitionEnd = dummyTransitionEnd(parseTiming(menu.data('offcanvasDuration')) + parseTiming(menu.data('offcanvasDelay'))); requestAnimationFrame(function () { var width = menu.find('.navbar-collapse')[0].style.width; menu.find('.bd-menu-overlay') .css('opacity', 1) .css('z-index', 100) .css('position', 'fixed') .css('margin-left', width); if (offcanvasShift) { $body.css('left', width); } $.fn.emulateTransitionEnd = emulateTransitionEnd; }); }); $body.on('shown.bs.collapse', '.navbar-collapse.width', function (event) { $(event.target).css('width', ''); }); $body.on('hide.bs.collapse', '.navbar-collapse.width', function (event) { var menu = $(event.target).closest('nav'); var offcanvasShift = menu.data('responsiveType') === 'offcanvas-shifted'; menu.find('.bd-menu-overlay') .css('opacity', '') .css('z-index', '') .css('position', 'absolute') .css('margin-left', ''); if (offcanvasShift) { $body.css('left', '0'); } Возможно, есть более элегантное решение, но я додумался только до такого))
Vote to pay developers attention to this features or issue.
1 Comments
Order By: Standard | Newest
Support Team
Support Team posted this 10 May 2018

Hi,

Position менять не нужно. Достаточно просто убрать один display и стилей (.bd-hmenu-1 .bd-menu-overlay { display: inline-block; }) и в скрипте проставлять этот display на открытии меню и убирать при закрытии. Это так, на скорую руку. Мы поправим это в будущих версиях.
Изначально, проблема в том, что меню лежит в контейнере (в Header, например) с position и z-index. Если это дело убрать, то проблема будет не заметна.

Thank you,
Olivia

Hi, Position менять не нужно. Достаточно просто убрать один display и стилей (`.bd-hmenu-1 .bd-menu-overlay { display: inline-block; }`) и в скрипте проставлять этот display на открытии меню и убирать при закрытии. Это так, на скорую руку. Мы поправим это в будущих версиях. Изначально, проблема в том, что меню лежит в контейнере (в Header, например) с position и z-index. Если это дело убрать, то проблема будет не заметна. Thank you, Olivia
You must log in or register to leave comments