Bootstrap 4灵活的响应式导航栏菜单 [英] Bootstrap 4 flexible responsive navbar menu
本文介绍了Bootstrap 4灵活的响应式导航栏菜单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
请注意，我不是在问如何在navbr菜单(左或右)中对齐项目，而是如何将项目从导航栏动态移动到下拉菜单.
我在项目中使用Bootstrap 4.1.我的主要主菜单包含许多链接.最后一项是包含其他链接的下拉列表:
我希望在调整窗口大小时将标题中没有足够空间的正确项目移到下拉项目中.
我想要什么:
但是在调整大小时，项目正在缩小.然后，对于"md"(或更小的)断点，将激活默认的导航栏功能:
使用flexbox的解决方案也是可以接受的. 链接到具有默认Bootstrap导航栏的简单演示: CodePen
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu item 4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu item 5</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu item 6</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu item 7</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu item 8</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown Menu
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Menu item 9</a>
<a class="dropdown-item" href="#">Menu item 10</a>
<a class="dropdown-item" href="#">About</a>
<a class="dropdown-item" href="#">Help</a>
<a class="dropdown-item" href="#">Sign out</a>
</div>
</li>
</ul>
</div>
</nav>
谢谢！
这是我当前正在使用的窗口的调整大小功能:
let addMenu = $("#navbarNavDropdown > ul >li.dropdown"),
addMenuList = addMenu.children("ul"),
menuItems = $("#navbarNavDropdown > ul > li:visible:not('.dropdown')");
function _resize() {
var itemsWidth = 0,
startWrap = false,
navWidth = $("#navbarNavDropdown").width() - addMenu.width();
menuItems.each(function () {
if (startWrap == false) {
if (itemsWidth + $(this).width() < navWidth) {
itemsWidth += $(this).width();
}
else {
startWrap = true;
addMenuList.prepend(this);
}
}
else {
addMenuList.prepend(this);
}
});
}
window.onresize = _resize;
上面的链接也已更新.
在缩小屏幕时可以使用，但是我需要实现:
- 增加屏幕宽度时；
- 在"md"(或更小)断点中，以使用默认引导程序的功能
解决方案
而不是使用height来检测Navbar项何时已包装.您可能需要调整JS以适应其他菜单项(关于，帮助，注销).这是Bootstrap 4的jQuery函数...
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);
});
});
演示: https://www.codeply.com/go/wKWHgsMXah
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 Bootstrap 4.1 in my project. My top main menu contains many links. The last item is a dropdown which contains additional links:
I want, when resizing the window, the right items for which doesn't have enough space in the header, to be moved into the dropdown item.
What I want:
But when resizing, the items are shrinking. Then, for "md" (and smaller) breakpoints, the default navbar functionality is activated:
Solutions with flexbox are acceptable, too. Link to simple demo with default Bootstrap navbar: CodePen
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu item 4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu item 5</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu item 6</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu item 7</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu item 8</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown Menu
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Menu item 9</a>
<a class="dropdown-item" href="#">Menu item 10</a>
<a class="dropdown-item" href="#">About</a>
<a class="dropdown-item" href="#">Help</a>
<a class="dropdown-item" href="#">Sign out</a>
</div>
</li>
</ul>
</div>
</nav>
Thank you!
EDIT:
This is the window's resize function on which I'm currently working:
let addMenu = $("#navbarNavDropdown > ul >li.dropdown"),
addMenuList = addMenu.children("ul"),
menuItems = $("#navbarNavDropdown > ul > li:visible:not('.dropdown')");
function _resize() {
var itemsWidth = 0,
startWrap = false,
navWidth = $("#navbarNavDropdown").width() - addMenu.width();
menuItems.each(function () {
if (startWrap == false) {
if (itemsWidth + $(this).width() < navWidth) {
itemsWidth += $(this).width();
}
else {
startWrap = true;
addMenuList.prepend(this);
}
}
else {
addMenuList.prepend(this);
}
});
}
window.onresize = _resize;
Link above has been updated, too.
It works when making the screen smaller, but I need to implement:
- when increasing the screen's width;
- in "md" (or smaller) breakpoint, to use the default bootstrap's functionality
解决方案
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
这篇关于Bootstrap 4灵活的响应式导航栏菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
