Bootstrap 4 flexible responsive navbar menu

后端未结

关注

 2  1957

NOTE that I\'m not asking how to align items in navbr menu (left or right), but how to dynamically move items from navbar to dropdown.

I\'m using Bootst

相关标签:

2条回答

暗喜

2021-01-28 06:38

Above response from @Zim works as I expected. Thank you, @Zim! I've made some changes for my project's needs, like:

Add "fixed" items in dropdown menu, regardless the screen resolution. They will be always in dropdown;
On mobile, move out all items from the dropdown, to work with default Bootstrap's mobile navbar;
Add a dropdown-divider, to show above the "fixed" items.

Demo here

$(function() {
var autocollapse = function (menu, maxHeight) {
    var nav = $(menu);

    if ($(window).width() <= 768) {
        $(menu + ' .additional-dropdown-menu').children(menu + ' li').each(function() {
            _moveDropdownItemToNavbar(this, nav, menu);
        });
        $(menu + ' .additional-menu').hide();
    }
    else {
        $(menu + ' .additional-menu').show();
        var navHeight = nav.innerHeight();
        if (navHeight >= maxHeight) {
            while (navHeight > maxHeight) {
                var children = nav.children(menu + ' li:not(:last-child)');
                var count = children.length;
                $(children[count - 1]).prependTo(menu + ' .additional-dropdown-menu').removeClass("nav-item").find("a").toggleClass("nav-link dropdown-item");
                navHeight = nav.innerHeight();
                $(menu + ' .additional-dropdown-menu .extra-divider').removeClass("d-md-none"); //show the extra divider when items is added to the additional dropdown
            }
        }
        else {
            var collapsed = $(menu + ' .additional-dropdown-menu').children(menu + ' li');

            if (collapsed.not(".additional-item-locked").length == 0) { //if there are only locked items - hide the extra divider. 
                $(menu + ' .additional-dropdown-menu .extra-divider').addClass("d-md-none");
            }
            while (navHeight < maxHeight && (nav.children(menu + ' li').length > 0) && collapsed.length > 0) {
                collapsed = $(menu + ' .additional-dropdown-menu').children('li:not(.additional-item-locked)');
                _moveDropdownItemToNavbar(collapsed[0], nav, menu);
                navHeight = nav.innerHeight();
            }

            if (navHeight > maxHeight) {
                autocollapse(menu, maxHeight);
            }
        }
    }
};

function _moveDropdownItemToNavbar(item, nav, menu) {
    $(item).insertBefore(nav.children(menu + ' li:last-child')).addClass("nav-item").find("a").toggleClass("nav-link dropdown-item");
}

autocollapse('#navbar > ul', 50);

// when the window is resized
$(window).on('resize', function () {
    autocollapse('#navbar > ul', 50);
});

});

0 讨论(0)

梦谈多话

2021-01-28 06:47

Instead use height to detect when the Navbar items have wrapped. You'll may need to adjust the JS to accomodate the other menu items (About, Help, Sign-out). Here's the jQuery function for Bootstrap 4...

var autocollapse = function (menu,maxHeight) {

    var nav = $(menu);
    var navHeight = nav.innerHeight();
    if (navHeight >= maxHeight) {
        $(menu + ' .dropdown').removeClass('d-none');
        while (navHeight > maxHeight) {
            var children = nav.children(menu + ' li:not(:last-child)');
            var count = children.length;
            $(children[count - 1]).prependTo(menu + ' .dropdown-menu');
            navHeight = nav.innerHeight();
        }
    }
    else {
        var collapsed = $(menu + ' .dropdown-menu').children(menu + ' li');

        if (collapsed.length===0) {
          $(menu + ' .dropdown').addClass('d-none');
        }

        while (navHeight < maxHeight && (nav.children(menu + ' li').length > 0) && collapsed.length > 0) {
            collapsed = $(menu + ' .dropdown-menu').children('li');
            $(collapsed[0]).insertBefore(nav.children(menu + ' li:last-child'));
            navHeight = nav.innerHeight();
        }

        if (navHeight > maxHeight) { 
            autocollapse(menu,maxHeight);
        }
    }
};


$(document).ready(function () {

    // when the page laods
    autocollapse('#nav',50); 

    // when the window is resized
    $(window).on('resize', function () {
        autocollapse('#nav',50); 
    });

});

Demo: https://www.codeply.com/go/wKWHgsMXah

Related: Bootstrap navbar hide menu elements when resizing

0 讨论(0)