在响应式导航中为列表添加更多按钮 [英] adding more button for list in responsive navigation
问题描述
我有一个可以说 12 个项目的导航，当分辨率变小时，项目会在一个新行中下降.我需要这样做，当一个项目不再适合导航时，它应该在导航的右侧放置一个更多"下拉按钮.并将不适合的项目放入下拉列表中.如果你不明白我有下面的图片.
I have a navigation of lets say 12 items, and when resolution gets smaller items drop in a new line. I need to make that when an item doesn't fit on a navigation anymore it should put a "MORE" dropdown button on the right side of nav. and put that item that doesn't fit in a dropdown. If you don't understand me there is image below.
但问题是导航项并不总是相同的宽度，因为导航项是从 REST api 生成的.
But the problem is that navigation items aren't always the same width because navigation items are generated from REST api.
我尝试制作 jQuery 脚本来计算项目宽度并将它们添加到导航中.这是我创建的脚本，我匆忙完成，所以它真的很糟糕.
I tryed to make jQuery script for calculating items width and adding them to navigation. Here is the script I created, I made it in a hurry so it's really bad.
我需要帮助如何正确计算项目的宽度和导航宽度，以及计算何时将项目添加到导航或从导航中删除项目.
I need to help on how to properly calculate items witdh and navigation width and calculating when to add items to navigation or remove items from navigation.
这里是图片，如果你不明白的话:http://img.hr/aagV>
Here is image if you don't get it: http://img.hr/aagV
推荐答案
这个问题太老了，但我也想发布我的答案.也许这是更清洁、更简单的方法.我创建了一支笔:https://codepen.io/sergi95/pen/bmNoML
This question is too old, but i want to post my answer too. Maybe this is more cleaner and easier way. I have created a pen: https://codepen.io/sergi95/pen/bmNoML<div id="mainMenu" class="main-menu">
<ul id="autoNav" class="main-nav">
<li>
<a href="#">home</a>
</li>
<li>
<a href="#">about us</a>
</li>
<li>
<a href="#">portfolio</a>
</li>
<li>
<a href="#">team</a>
</li>
<li>
<a href="#">blog</a>
</li>
<li>
<a href="#">contact</a>
</li>
<li id="autoNavMore" class="auto-nav-more">
<a href="#" class="more-btn">more</a>
<ul id="autoNavMoreList" class="auto-nav-more-list">
<li>
<a href="#">policy</a>
</li>
</ul>
</li>
</ul>
const $mainMenu = $("#mainMenu");
const $autoNav = $("#autoNav");
const $autoNavMore = $("#autoNavMore");
const $autoNavMoreList = $("#autoNavMoreList");
autoNavMore = () => {
let childNumber = 2;
if($(window).width() >= 320) {
// GET MENU AND NAV WIDTH
const $menuWidth = $mainMenu.width();
const $autoNavWidth = $autoNav.width();
if($autoNavWidth > $menuWidth) {
// CODE FIRES WHEN WINDOW SIZE GOES DOWN
$autoNav.children(`li:nth-last-child(${childNumber})`).prependTo($autoNavMoreList);
autoNavMore();
} else {
// CODE FIRES WHEN WINDOW SIZE GOES UP
const $autoNavMoreFirst = $autoNavMoreList.children('li:first-child').width();
// CHECK IF ITEM HAS ENOUGH SPACE TO PLACE IN MENU
if(($autoNavWidth + $autoNavMoreFirst) < $menuWidth) {
$autoNavMoreList.children('li:first-child').insertBefore($autoNavMore);
}
}
if($autoNavMoreList.children().length > 0) {
$autoNavMore.show();
childNumber = 2;
} else {
$autoNavMore.hide();
childNumber = 1;
}
}
}
// INIT
autoNavMore();
$(window).resize(autoNavMore);
.main-menu {
max-width: 800px;
}
.main-nav {
display: inline-flex;
padding: 0;
list-style: none;
}
.main-nav li a {
padding: 10px;
text-transform: capitalize;
white-space: nowrap;
font-size: 30px;
font-family: sans-serif;
text-decoration: none;
}
.more-btn {
color: red;
}
.auto-nav-more {
position: relative;
}
.auto-nav-more-list {
position: absolute;
right: 0;
opacity: 0;
visibility: hidden;
transition: 0.2s;
text-align: right;
padding: 0;
list-style: none;
background: grey;
border-radius: 4px;
}
.auto-nav-more:hover .auto-nav-more-list {
opacity: 1;
visibility: visible;
}
这篇关于在响应式导航中为列表添加更多按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
