小编Luk*_*e C的帖子

尝试重新创建与DELIVEROO类似的行为

他们做什么

概述类别的水平菜单包含大量列表项，每个列表项的宽度都不同。主菜单显示视口可以处理的所有内容，其余列表项添加到“更多”下拉列表中。该网站具有三种行为，我想实现每一种行为。

1. 隐藏主水平菜单上显示的“更多”下拉列表中的列表项。
2. 为两个菜单中的列表项提供.active状态，但如果项目位于下拉列表中，则它们会更改下拉列表的名称和样式。
3. 继自2.，如果下拉列表项处于活动状态并且窗口大小已调整，则菜单将恢复正常，并且活动列表项将显示在主水平菜单上。

他们是如何做到的（到目前为止学到的）

两个菜单加载了完全相同的信息和列表项。主水平菜单有一个隐藏的溢出，隐藏了容器高度下方列出的所有内容。

Javascript 发挥着重要作用，我肯定会计算并找出哪些项目正在视口中显示，哪些项目没有显示。然而，该网站是内置的React.js，并且缩小了，我无法阅读原始js。

从哪儿开始

我在下面准备了一个小提琴来开始。现在我想尝试将这三个功能复制到这个菜单中。有人可以提供支持/帮助吗？RAW JS 很好，但 jQuery 更好

小提琴

...

代码示例

body {
  background-color: white;
  width: 100%;
  overflow-x: hidden;
  font-size: 14px;
}

a {
  color: #fff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.link-bar {
  display: flex;
  position: relative;
  background: grey;
  color: #000;
  padding: 0 15px;
  width: 600px;
  margin: 0 auto;
}
.link-bar a {
  color: #fff;
}

.context-bar {
  flex: 1;
  height: 60px; …

我正在尝试创建一个带有三个内部内联元素的全角横幅。反向链接、徽标和正向链接。

我还想使用相同的代码创建一个带有两个内部内联元素的全角横幅。左后链接和中央徽标。

到目前为止我所拥有的是：

超文本标记语言

 <section id="header-blue">
  <div id="header-wrap">
    <div class="header-left"><p>1</p></div>
    <div class="header-center"><p>2</p><p>2</p><p>2</p><p>2</p></div>
    <div class="header-right"><p>3</p><p>3</p></div>
    <div class="clearfix"></div>
  </div>
</section>

社会保障体系：

#header-blue {
  width: 100%;
  margin-bottom: 50px;
  height: auto;
  background-color: $primary-blue;
  color: #fff;

  #header-wrap {
    text-align: center;
    border: 1px solid green;
    margin: 0 auto;
    padding: 1rem 2.5rem;
    div {
      display: inline-block;
      vertical-align: middle;
    }
  }

  .header-left {
    float: left;
    border: 1px solid red;
    width: 100px;
  }
  .header-right {
    float: right;
    border: 1px solid red;
    width: 100px;
  }
  .header-center {
    border: 1px solid …