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

Question

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 class="select-menu"> <div class="select-btn"> <span class="sBtn-text">Select Shade</span> <i class="bx bx-chevron-down"></i> </div> <ul class="options"> <li class="option"> <i class="bx bxs-circle" style="color: #a87a4c;"></i> <span class="option-text">Deep 1</span> </li> <li class="option"> <i class="bx bxs-circle" style="color: #a67d53;"></i> <span class="option-text">Deep 2</span> </li> <li class="option"> <i class="bx bxs-circle" style="color: #7d5538;"></i> <span class="option-text">Deep 3</span> </li> <li class="option"> <i class="bx bxs-circle" style="color: #895e3b;"></i> <span class="option-text">Deep 4</span> </li> <li class="option"> <i class="bx bxs-circle" style="color: #d9c09f;"></i> <span class="option-text">Light 1</span> </li> <li class="option"> <i class="bx bxs-circle" style="color: #cea480;"></i> <span class="option-text">Light 2</span> </li> <li class="option"> <i class="bx bxs-circle" style="color: #d4af8d;"></i> <span class="option-text">Light 3</span> </li> <li class="option"> <i class="bx bxs-circle" style="color: #c29776;"></i> <span class="option-text">Light 4</span> </li> <li class="option"> <i class="bx bxs-circle" style="color: #c79b6d;"></i> <span class="option-text">Medium 1</span> </li> <li class="option"> <i class="bx bxs-circle" style="color: #c7a570;"></i> <span class="option-text">Medium 2</span> </li> <li class="option"> <i class="bx bxs-circle" style="color: #956946;"></i> <span class="option-text">Medium 3</span> </li> <li class="option"> <i class="bx bxs-circle" style="color: #a17b51;"></i> <span class="option-text">Medium 4</span> </li> <li class="option"> <i class="bx bxs-circle" style="color: #714b35;"></i> <span class="option-text">Rich 1</span> </li> <li class="option"> <i class="bx bxs-circle" style="color: #614633;"></i> <span class="option-text">Rich 2</span> </li> <li class="option"> <i class="bx bxs-circle" style="color: #4f3a2c;"></i> <span class="option-text">Rich 3</span> </li> <li class="option"> <i class="bx bxs-circle" style="color: #564439;"></i> <span class="option-text">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.

Answer 1

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 class="select-menu"> <div class="select-btn"> <span class="sBtn-text">Select Shade</span> <i class="bx bx-chevron-down"></i> </div> <ul class="options"> <li class="option"> <i class="bx bxs-circle" style="color: #a87a4c;"></i> <span class="option-text">Deep 1</span> </li> <li class="option"> <i class="bx bxs-circle" style="color: #a67d53;"></i> <span class="option-text">Deep 2</span> </li> <li class="option"> <i class="bx bxs-circle" style="color: #7d5538;"></i> <span class="option-text">Deep 3</span> </li> <li class="option"> <i class="bx bxs-circle" style="color: #895e3b;"></i> <span class="option-text">Deep 4</span> </li> <li class="option"> <i class="bx bxs-circle" style="color: #d9c09f;"></i> <span class="option-text">Light 1</span> </li> <li class="option"> <i class="bx bxs-circle" style="color: #cea480;"></i> <span class="option-text">Light 2</span> </li> <li class="option"> <i class="bx bxs-circle" style="color: #d4af8d;"></i> <span class="option-text">Light 3</span> </li> <li class="option"> <i class="bx bxs-circle" style="color: #c29776;"></i> <span class="option-text">Light 4</span> </li> <li class="option"> <i class="bx bxs-circle" style="color: #c79b6d;"></i> <span class="option-text">Medium 1</span> </li> <li class="option"> <i class="bx bxs-circle" style="color: #c7a570;"></i> <span class="option-text">Medium 2</span> </li> <li class="option"> <i class="bx bxs-circle" style="color: #956946;"></i> <span class="option-text">Medium 3</span> </li> <li class="option"> <i class="bx bxs-circle" style="color: #a17b51;"></i> <span class="option-text">Medium 4</span> </li> <li class="option"> <i class="bx bxs-circle" style="color: #714b35;"></i> <span class="option-text">Rich 1</span> </li> <li class="option"> <i class="bx bxs-circle" style="color: #614633;"></i> <span class="option-text">Rich 2</span> </li> <li class="option"> <i class="bx bxs-circle" style="color: #4f3a2c;"></i> <span class="option-text">Rich 3</span> </li> <li class="option"> <i class="bx bxs-circle" style="color: #564439;"></i> <span class="option-text">Rich 4</span> </li> </ul> <script src="main.js"></script> </div>

Answer 2

Wrap your list <ul class="options"> 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.