Question

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

他们做什么

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

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

他们是如何做到的（迄今为止学到的）

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

Javascript播放量很大我确定要计算并找出视口中显示的项目，以及哪些项目不是。但是，该网站内置React.js，并且缩小了，我无法读取原始js。

从哪里开始

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

FIDDLE

...

代码示例

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;
  overflow: hidden;
}

.context-bar-link, .grouped-link {
  display: inline-block;
  margin: 0 20px 0 0;
  padding: 20px 0;
  text-align: center;
}


.dropdown:hover {
  background-color: red;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    right: 10px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

<nav class="link-bar">
  <div class="context-bar">
    <a href="#" class="context-bar-link">Item 1</a>
    <a href="#" class="context-bar-link">Item 123</a>
    <a href="#" class="context-bar-link">Item 13</a>
    <a href="#" class="context-bar-link">Item 1</a>
    <a href="#" class="context-bar-link">Item 4</a>
    <a href="#" class="context-bar-link">Item 774</a>
    <a href="#" class="context-bar-link">Item 1234</a>
    <a href="#" class="context-bar-link">Item 12</a>
    <a href="#" class="context-bar-link">Item 8</a>
    <a href="#" class="context-bar-link">Item 9</a>
    <a href="#" class="context-bar-link">Item 10</a>
    <a href="#" class="context-bar-link">Item 1422</a>
    <a href="#" class="context-bar-link">Item 12</a>
    <a href="#" class="context-bar-link">Item 8</a>
    <a href="#" class="context-bar-link">Item 9</a>
    <a href="#" class="context-bar-link">Item 10</a>
    <a href="#" class="context-bar-link">Item 1422</a>
    <a href="#" class="context-bar-link">Item 12</a>
    <a href="#" class="context-bar-link">Item 8</a>
    <a href="#" class="context-bar-link">Item 9</a>
    <a href="#" class="context-bar-link">Item 10</a>
    <a href="#" class="context-bar-link">Item 1722</a>
  </div>
  <div class="grouped dropdown">
    <a href="#" class="grouped-link">Item 1</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 1</a>
    </div>
  </div>
</nav>

Answer 1

如果我们使用library/framework或angular

之类的任何knockout会更容易

但就目前而言，我使用了jquery

这是工作小提琴https://jsfiddle.net/rf63sd1n/

将溢出菜单项添加到下拉菜单

1 个答案: