Горизонтальное выпадающее меню

Question

Я пытаюсь создать горизонтальный выпадающий список (ошибаться ... сбрасывает?).

При щелчке он расширяется вправо, чтобы отобразить дополнительные параметры, и пользователь может щелкнуть нужный параметр.

Я нашел это JsFiddle , но оно реализованоиспользуя ul и li, а не select и option. Это действительно имеет значение для целей щелчка по пункту меню и отправки действия? Он также расширяется при наведении, а не при нажатии. И когда щелкают по пункту меню, мне нужно, чтобы меню оставалось открытым до тех пор, пока не будет нажата кнопка «X» слева. Если бы кто-нибудь мог помочь мне начать это, я был бы очень признателен.

Вот изображение того, что я пытаюсь сделать

Answer 1

если вам по какой-то причине нужно использовать select и option в вашей разметке, вот как это сделать, но это большая работа https://www.w3schools.com/howto/howto_custom_select.asp

или вы можете сделать что-то вроде этого:

var btnToggle = document.querySelector(".js-toggle");

btnToggle.addEventListener("click", handleMenu);

function handleMenu() {
  var menu = document.querySelector(".js-menu");
  if ( menu.classList.contains("is-showing") )
  {
    menu.classList.remove("is-showing");
  }
  else
  {
    menu.classList.add("is-showing");
  }
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #333;
}


.navigation {
  background: #fff;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  padding: 20px;
}

.menu {
  list-style: none;
  padding-left: 22px;
  margin: auto;
  display: none;
}
.menu.is-showing {
  display: inline-flex;
}
.menu__item {
  background: #fff;
}

.box {
  display: block;
  background: #999;
  width: 60px;
  height: 60px;
  margin: 0 22px;
}
.box:hover {
  background: #498cdf;
}

.toggle {
  padding: 0;
  background: #e7e7e7;
  border: none;
  width: 60px;
  height: 60px;
}

<div class="navigation">
  
  <button class="toggle js-toggle">x</button>
  <ul class="menu js-menu">
    <li class="menu__item">
      <span class="box"></span>
    </li>
    <li class="menu__item">
      <span class="box"></span>
    </li>
    <li class="menu__item">
      <span class="box"></span>
    </li>
    <li class="menu__item">
      <span class="box"></span>
    </li>
    <li class="menu__item">
      <span class="box"></span>
    </li>
    <li class="menu__item">
      <span class="box"></span>
    </li>
    <li class="menu__item">
      <span class="box"></span>
    </li>
    <li class="menu__item">
      <span class="box"></span>
    </li>
  </ul>
  
</div>

Answer 2

Попробуйте что-то вроде этого:

[...document.getElementsByClassName("item")].forEach(i => i.addEventListener("click", function(e) {
  e.stopPropagation();
  console.log(this);
}));

document.getElementById("open-button").addEventListener("click", function() {
  this.parentElement.classList.add("open");
});

document.getElementById("close-button").addEventListener("click", function() {
  this.parentElement.classList.remove("open");
});

body {
  background: black;
}
.menu {
  background: white;
  border-radius: 17px;
  height: 34px;
  width: 100px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.menu .item {
  display: none;
  color: grey;
}
.menu #open-button {
  display: block;
}
.menu #close-button {
  display: none;
  color: grey;
}

.menu.open {
  justify-content: space-around;
  width: 300px;
}
.menu.open .item {
  display: block;
}
.menu.open .item:hover {
  color: black;
}
.menu.open #close-button {
  display: block;
}
.menu.open #close-button:hover {
  color: black;
}
.menu.open #open-button {
  display: none;
}

<div class="menu">
  <div id="open-button">Menu</div>
  <div id="close-button">&#10005;</div>
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
<div>

Answer 3

Попробуйте это

<nav>
  <a class="nav-btn">Logo</a>
  <ul>
     <li><a href="">Menu 1</a></li>
     <li><a href="">Menu 1</a></li>
     <li><a href="">Menu 1</a></li>
     <li><a href="">Menu 1</a></li>
     <li><a href="">Menu 1</a></li>
  </ul>
</nav>

 a, li {
        display: block;
        width: 100px;
        height: 100px;
        background-color: red;
        float: left;
        border: 1px solid yellow;
        padding: 0;
        margin: 0;
    }

    ul {
        margin: 0;
        padding: 0;
        display: none;
    }

    .expand{
          display: block;
    }

$("nav .nav-btn").click(function(){
	
  $("nav ul").toggleClass("expand");
});

a, li {
    display: block;
    width: 100px;
    height: 100px;
    background-color: red;
    float: left;
    border: 1px solid yellow;
    padding: 0;
    margin: 0;
}

ul {
    margin: 0;
    padding: 0;
    display: none;
}

.expand{
      display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <a class="nav-btn">Logo</a>
  <ul>
     <li><a href="">Menu 1</a></li>
     <li><a href="">Menu 1</a></li>
     <li><a href="">Menu 1</a></li>
     <li><a href="">Menu 1</a></li>
     <li><a href="">Menu 1</a></li>
  </ul>
</nav>