javascript - 在导航列表末尾添加更多按钮,一旦没有空间显示所有项目
问题描述
我有这个标准的导航
它遍布整个屏幕,并居中。其中可以有无限数量的项目,并且项目是动态添加的。
我想要实现的是,一旦空间充满了导航项目,或者屏幕变小,隐藏不适合的项目并像这样显示它们:
如果使用 css 和 javascript 可以实现这一点,有什么想法吗?如何在不更改 html 的情况下实现这一目标?
编辑:
代码笔https://codepen.io/anon/pen/wQwrVz
div {
//for the sake of preview
width: 100%;
max-width: 1000px;
margin: auto;
border: solid 1px #000;
padding: 10px 20px;
}
div > ul {
list-style: none;
display: flex;
justify-content: center;
align-items: center;
background: #f6f6f6;
border: solid 1px #333;
}
div > ul li {
position: relative;
}
div > ul li a {
border-right: solid 1px #fff;
color: #999;
display: inline-block;
font-size: 1em;
font-weight: 400;
overflow: hidden;
padding: 1em 1.786em;
position: relative;
text-decoration: none;
}
div > ul li a:before {
background: #ff3366;
content: "";
height: 3px;
left: 0;
position: absolute;
top: -50px;
transition: top 0.3s ease;
width: 100%;
}
div > ul li:hover > a {
color: #ff3366;
}
div > ul li:hover > a:before {
top: 0;
}
div > ul li:hover > a:after {
color: #ff3366;
}
<div>
<ul>
<li>
<a href="">menu item 1</a>
</li>
<li>
<a href="">menu item 2</a>
</li>
<li>
<a href="">menu item 3</a>
</li>
<li>
<a href="">menu item 4</a>
</li>
<li>
<a href="">menu item 5</a>
</li>
<li>
<a href="">More</a>
</li>
</ul>
</div>
解决方案
推荐阅读
- paypal - 是否可以将 VISA、Discover 和 PayPal 的付款汇入万事达卡?
- php - 如何将数组的单独值放入同一个数组中?
- ffmpeg - 在 Windows 上运行 ffmpeg - 实时缓冲区 [USB 摄像头] [视频输入] 太满或接近太满丢帧
- c++ - 指向多维数组 C++ 的指针
- django - 如何在 django rest 框架中为端点路由添加额外的操作
- javascript - 每次重新渲染时,材质 UI 网格宽度都会缩小
- d3.js - d3-js:按秒、分、小时、日、月和年缩放时间
- javascript - How do I change the left margin of div based on scroll and using javascript?
- python - 无论大小如何,都将一个数组放入另一个数组 - Python
- android - 有没有办法在原生 android (Java) 中动态加载 Material Icons?