CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Luke C
Luke C

Reputation: 192

Add overflow menu items to dropdown menu

Attempting to recreate a similar behaviour to that of DELIVEROO enter image description here

What They Do

The horizontal menu outlining the categories houses a large collection of list items each with variable widths. The main menu shows all that the viewport can handle, with the remaining list items being added into a 'more' drop down. The site has three behaviours, each of which I would like to achieve.

  1. Hide list items in the 'more' dropdown that appear on the primary horizontal menu.
  2. Give an .active status to the list item in both menus, but if item is in dropdown, they change the name and styling of the dropdown.
  3. Following from 2., if a dropdown list item is active and the window is resized, the menu returns to normal and the active list item is shown on the main horizontal menu.

How They Do It (learned so far)

Two menu's load with the exact same information and list items. The main horizontal menu has a hidden overflow that hides everything that is listed beneath the height of the container.

Javascript plays a heavy roll i'm sure to calculate and find out what items are being show in the viewport, and which items are not. However, the site is built in React.js, and minified, I cannot read the raw js.

Where to start

I have prepared a fiddle below to start from. Now I would like to try and replicate these three functionalities to this menu. Could anyone offer support/assistance? RAW JS is fine, but jQuery preferred

FIDDLE

...

CODE SAMPLES

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>

Upvotes: 4

Views: 2743

Answers (1)

Ja9ad335h
Ja9ad335h

Reputation: 5075

it would be much easier if we use any library/framework like angular or knockout

but for now, i used jquery

here is the working fiddle https://jsfiddle.net/rf63sd1n/

Upvotes: 5

Related Questions