How can I limit the number of options that show in my drop down menu?-CodePudding

I have a drop down menu but it has 16 different options that all show when I open the menu, I only want 4 to show and in order to see the rest you use a custom scroller on the side of the dropdown menu.

I am only allowed to use HTML5, CSS, JavaScript and Jquery, no frameworks such as Bootstrap.

Here is my existing code.

const optionMenu = document.querySelector(".select-menu"),
  selectBtn = optionMenu.querySelector(".select-btn"),
  options = optionMenu.querySelectorAll(".option"),
  sBtn_text = optionMenu.querySelector(".sBtn-text");

selectBtn.addEventListener("click", () => optionMenu.classList.toggle("active"));

options.forEach(option => {
  option.addEventListener("click", () => {
    let selectedOption = option.querySelector(".option-text").innerText;
    sBtn_text.innerText = selectedOption;

    optionMenu.classList.remove("active");
  });
});

.select-menu .options {
  position: relative;
  padding: 20px;
  margin-top: 10px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
  display: none;
  cursor: pointer;
  overflow-y: scroll;
  overflow-x: hidden;
}

.select-menu.active .options {
  display: block;
}

.options .option {
  display: flex;
  height: 55px;
  cursor: pointer;
  padding: 0 16px;
  border-radius: 8px;
  align-items: center;
  background: #fff;
}

.options .option:hover {
  background: #F2F2F2;
}

.option i {
  font-size: 25px;
  margin-right: 12px;
}

.option .option-text {
  font-size: 18px;
  color: #333;
}

<div >
  <div >
    <span >Select Shade</span>
    <i ></i>
  </div>

  <ul >
    <li >
      <i  style="color: #a87a4c;"></i>
      <span >Deep 1</span>
    </li>
    <li >
      <i  style="color: #a67d53;"></i>
      <span >Deep 2</span>
    </li>
    <li >
      <i  style="color: #7d5538;"></i>
      <span >Deep 3</span>
    </li>
    <li >
      <i  style="color: #895e3b;"></i>
      <span >Deep 4</span>
    </li>
    <li >
      <i  style="color: #d9c09f;"></i>
      <span >Light 1</span>
    </li>
    <li >
      <i  style="color: #cea480;"></i>
      <span >Light 2</span>
    </li>
    <li >
      <i  style="color: #d4af8d;"></i>
      <span >Light 3</span>
    </li>
    <li >
      <i  style="color: #c29776;"></i>
      <span >Light 4</span>
    </li>
    <li >
      <i  style="color: #c79b6d;"></i>
      <span >Medium 1</span>
    </li>
    <li >
      <i  style="color: #c7a570;"></i>
      <span >Medium 2</span>
    </li>
    <li >
      <i  style="color: #956946;"></i>
      <span >Medium 3</span>
    </li>
    <li >
      <i  style="color: #a17b51;"></i>
      <span >Medium 4</span>
    </li>
    <li >
      <i  style="color: #714b35;"></i>
      <span >Rich 1</span>
    </li>
    <li >
      <i  style="color: #614633;"></i>
      <span >Rich 2</span>
    </li>
    <li >
      <i  style="color: #4f3a2c;"></i>
      <span >Rich 3</span>
    </li>
    <li >
      <i  style="color: #564439;"></i>
      <span >Rich 4</span>
    </li>
  </ul>

</div>

This is How it Looks Currently. Screen Grab of Drop Down Menu

I have found one way of doing so but I am not sure how to implement it with my existing code. http://jsfiddle.net/cSSjF/

Any Help Is Much Appreciated, Thank You.

CodePudding user response：

Just add an arbitrary height on the .options to limit the number of options visible. For example:

const optionMenu = document.querySelector(".select-menu"),
  selectBtn = optionMenu.querySelector(".select-btn"),
  options = optionMenu.querySelectorAll(".option"),
  sBtn_text = optionMenu.querySelector(".sBtn-text");

selectBtn.addEventListener("click", () => optionMenu.classList.toggle("active"));

options.forEach(option => {
  option.addEventListener("click", () => {
    let selectedOption = option.querySelector(".option-text").innerText;
    sBtn_text.innerText = selectedOption;

    optionMenu.classList.remove("active");
  });
});

.select-menu .options {
  position: relative;
  padding: 20px;
  margin-top: 10px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
  display: none;
  cursor: pointer;
  overflow-y: scroll;
  overflow-x: hidden;
  height: 200px;
}

.select-menu.active .options {
  display: block;
}

.options .option {
  display: flex;
  height: 55px;
  cursor: pointer;
  padding: 0 16px;
  border-radius: 8px;
  align-items: center;
  background: #fff;

}

.options .option:hover {
  background: #F2F2F2;
}

.option i {
  font-size: 25px;
  margin-right: 12px;
}

.option .option-text {
  font-size: 18px;
  color: #333;
}

<div >
  <div >
    <span >Select Shade</span>
    <i ></i>
  </div>

  <ul >
    <li >
      <i  style="color: #a87a4c;"></i>
      <span >Deep 1</span>
    </li>
    <li >
      <i  style="color: #a67d53;"></i>
      <span >Deep 2</span>
    </li>
    <li >
      <i  style="color: #7d5538;"></i>
      <span >Deep 3</span>
    </li>
    <li >
      <i  style="color: #895e3b;"></i>
      <span >Deep 4</span>
    </li>
    <li >
      <i  style="color: #d9c09f;"></i>
      <span >Light 1</span>
    </li>
    <li >
      <i  style="color: #cea480;"></i>
      <span >Light 2</span>
    </li>
    <li >
      <i  style="color: #d4af8d;"></i>
      <span >Light 3</span>
    </li>
    <li >
      <i  style="color: #c29776;"></i>
      <span >Light 4</span>
    </li>
    <li >
      <i  style="color: #c79b6d;"></i>
      <span >Medium 1</span>
    </li>
    <li >
      <i  style="color: #c7a570;"></i>
      <span >Medium 2</span>
    </li>
    <li >
      <i  style="color: #956946;"></i>
      <span >Medium 3</span>
    </li>
    <li >
      <i  style="color: #a17b51;"></i>
      <span >Medium 4</span>
    </li>
    <li >
      <i  style="color: #714b35;"></i>
      <span >Rich 1</span>
    </li>
    <li >
      <i  style="color: #614633;"></i>
      <span >Rich 2</span>
    </li>
    <li >
      <i  style="color: #4f3a2c;"></i>
      <span >Rich 3</span>
    </li>
    <li >
      <i  style="color: #564439;"></i>
      <span >Rich 4</span>
    </li>
  </ul>
  <script src="main.js"></script>

</div>

CodePudding user response：

Wrap your list <ul > in a div container, and set height or max-height to the container along with overflow:auto.

Fixed height will make the height always the same

max-height will be able to go smaller, depending on the container contents. When adding some more links, the container will grow in height until it reaches the max-height, then the overflow appears and scrollbar gets triggered.