Horizontal Toggle Dropdown

Question

I'm trying to create a horizontal dropdown (err.. dropside?).

When clicked, it expands to the right to show more options, and the user can click the option they want.

I have found this JsFiddle but it is implemented using ul and li, not select and option. Does this really matter for the purposes of clicking a menu item and dispatching an action? It also expands on hover, not on click. And when a menu item is clicked, I need the menu to stay open until the 'X' on the left is clicked. If anyone could help me start on this it would be much appreciated.

Here's an image of what I'm trying to do

Answer 1

Try something like this:

[...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>