CODEWITHSUNDEEP
javascripthtmlcssdropdown
N.A
N.A

Reputation: 311

Horizontal Toggle Dropdown

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

Upvotes: 1

Views: 1006

Answers (3)

yathavan
yathavan

Reputation: 2376

Try this

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

Upvotes: 0

Kirill Simonov
Kirill Simonov

Reputation: 8481

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>

Upvotes: 1

ronik
ronik

Reputation: 51

if you for some reason have to use select and option in your markup here's how to do it, but it's a lot of work https://www.w3schools.com/howto/howto_custom_select.asp

or you can do something like this:

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>

Upvotes: 1

Related Questions