构建“更多”移动响应菜单答案

【问题标题】：Building a 'more' mobile responsive menu构建“更多”移动响应菜单
【发布时间】：2021-04-04 00:34:30
【问题描述】：

我是这种特殊风格的移动菜单的忠实粉丝：https://www.w3schools.com/html/default.asp

即使在移动布局上，根据页面的大小，它仍然会显示一些主要的导航项。这样我认为您也许可以显示一些最受欢迎的链接，而无需用户进入移动菜单。

我正在尝试通过 react 重新创建这种行为。

为了简单起见：我从 map 语句中返回所有链接并将其呈现在布局中：

getNavigationItems(){
    const items = this.props.routes.slice(0, this.state.cutOffIndex).map((link) =>
    <a 
        className="DNavigationContainer-LinkItem"
        href="#"
        >{link.title}</a>
    );
    return items;
}

“cutOffIndex”用于确定我是否应该只显示项目的子集。随着我的页面宽度变小，我会减少截止索引以显示越来越少。

效果很好，唯一的问题是其中一些链接的大小不同（基于文本的数量）。

我需要一个能够了解每个链接有多大的解决方案，因此我了解在不超过宽度的情况下可以显示多少个链接。

我想过在我的元素的构造函数中循环遍历每个链接并将大小存储在一个数组中，然后调用该数组（假设我有 300 个像素可以使用，尽可能多地获取元素小于 300 像素组合）。

for(var i = 0; i < this.props.routes.length; i++){
    var textLength = this.props.routes[i].title.length;
    //store this text length in an array?
}

但是，这似乎过于复杂，我想知道在 CSS 中是否有更简单的方法来做到这一点？还是首选方法？

【问题讨论】：

标签： html css reactjs next.js

【解决方案1】：

您可以使用 CSS 属性 overflow: hidden 根据屏幕大小隐藏元素。

nav {
  width: 100%;  
  border: 1px solid #000;
}

a {
  display: inline-block;
  height: 30px;
  background: #fff;
  padding: 5px 15px;
  box-sizing: border-box;
}

.left {  
  overflow: hidden;
  height: 30px;
}

.right {
  overflow: hidden;
  float: right;
}

<nav>
  <div class="right">
    <a href="#">Always visible</a>
  </div>
  <div class="left">    
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
    <a href="#">Link 4</a>
    <a href="#">Link 5</a>
    <a href="#">Link 6</a>
    <a href="#">Link 7</a>
    <a href="#">Link 8</a>
    <a href="#">Link 9</a>
    <a href="#">Link 10</a>
    <a href="#">Link 11</a>
    <a href="#">Link 12</a>
  </div>
</nav>

当 .left 元素中没有足够的空间时，链接将被换行到下一行。属性 overflow: hidden 确保这些元素不可见。

小提琴：https://jsfiddle.net/ojgbvq5c/

【讨论】：