Оберните переполненные пункты меню в раскрывающийся список, если недостаточно места. ⇐ CSS

[Anonymous]

У меня есть меню панели навигации Bootstrap, и я пытаюсь поместить переполненные элементы меню в раскрывающийся список, если свободного места недостаточно. У меня есть это решение — оно отлично работает и делает то, что я ищу:

Код: Выделить всё

const contentBar = document.querySelector(".context-bar")
const dropdown = document.querySelector(".grouped-content")

const update = () => {
const offsetTop = contentBar.offsetTop
dropdown.innerHTML = ""

document.querySelectorAll(".context-bar > a").forEach((item) => {
if (item.offsetTop > offsetTop) {
let li = document.createElement("li")
li.innerHTML += item.outerHTML
dropdown.appendChild(li)
}
})
}

update()
window.addEventListener("resize", update)

Код: Выделить всё

.link-bar {
display: flex;
position: relative;
background: #ddd;
padding: 0 10px;
color: #000;
width: 100%;
box-sizing: border-box;
}

.context-bar {
flex: 1;
height: 60px;
overflow: hidden;
}

.context-bar-link, .grouped-link {
color: #000;
display: inline-block;
white-space: nowrap;
max-width: 18rem;
text-overflow: ellipsis;
overflow: hidden;
padding: 20px 10px;
}

.grouped-content {
display: none;
list-style-type: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
right: 10px;
max-height: 200px;
overflow-y: auto;
}

.grouped:hover .grouped-content {
display: block;
}

body {
padding-top: 50px;
}

a {
text-decoration: none;
}

Код: Выделить всё

[url=#]Item 1[/url]
[url=#]Item 22[/url]
[url=#]Item 333[/url]
[url=#]Item 4444[/url]
[url=#]Item 5555555[/url]
[url=#]Item 66[/url]
[url=#]Item 7777777777777[/url]
[url=#]Item 8[/url]
[url=#]Item 999999[/url]
[url=#]Item 10101010[/url]
[url=#]Item 1111[/url]
[url=#]Item 12121212[/url]
[url=#]Item 1313131313131[/url]
[url=#]Item 1414[/url]
[url=#]Item 15[/url]
[url=#]Item 16161616[/url]
[url=#]Item 1717[/url]
[url=#]Item 18181818181818[/url]
[url=#]Item 191919[/url]
[url=#]Item 20[/url]
[url=#]Item 212121[/url]
[url=#]Item 2222[/url]

[url=#]More[/url]
[list][/list]

Однако с навигационной панелью Bootstrap этого не происходит — вероятно, потому что мы можем не проверяешь offsetTop? Как изменить скрипт для работы с навигационной панелью Bootstrap?
Вот что у меня есть:

Код: Выделить всё

const contentBar = document.querySelector(".context-bar")
const dropdown = document.querySelector(".grouped-content")

const update = () => {
const offsetTop = contentBar.offsetTop
dropdown.innerHTML = ""

document.querySelectorAll(".context-bar > li").forEach((item) => {
if (item.offsetTop >  offsetTop) {
let li = document.createElement("li")
li.innerHTML += item.outerHTML
dropdown.appendChild(li)
}
})
}

update()
window.addEventListener("resize", update)

Код: Выделить всё

.context-bar {
flex: 1;
height: 60px;
overflow: hidden;
}

.nav-link,
.grouped-link {
color: #000;
display: inline-block;
white-space: nowrap;
max-width: 18rem;
text-overflow: ellipsis;
overflow: hidden;
padding: 20px 10px;
}

.grouped-content {
display: none;
list-style-type: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
right: 10px;
max-height: 200px;
overflow-y: auto;
}

.grouped:hover .grouped-content {
display: block;
}

body {
padding-top: 50px;
}

Код: Выделить всё

[*]


[list]
[url=#]Item 1[/url]
[*][url=#]Item 22[/url]
[*][url=#]Item 333[/url]
[*][url=#]Item 4444[/url]
[*][url=#]Item 5555555[/url]
[*][url=#]Item 66[/url]
[*][url=#]Item 7777777777777[/url]
[*][url=#]Item 8[/url]
[*][url=#]Item 999999[/url]
[*][url=#]Item 10101010[/url]
[*][url=#]Item 1111[/url]
[*][url=#]Item 12121212[/url]
[*][url=#]Item 1313131313131[/url]
[*][url=#]Item 1414[/url]
[*][url=#]Item 15[/url]
[*][url=#]Item 16161616[/url]
[*][url=#]Item 1717[/url]
[*][url=#]Item 18181818181818[/url]
[*][url=#]Item 191919[/url]
[*][url=#]Item 20[/url]
[*][url=#]Item 212121[/url]
[*][url=#]Item 2222[/url]
[*]
[url=#]More[/url]
[/list]

Как изменить скрипт для работы со стилями из Bootstrap? У кого-нибудь есть хорошая идея? Спасибо.


Подробнее здесь: https://stackoverflow.com/questions/792 ... ough-space