Dropdown (actual)

Dropdown.markdown

Dropdown

This dropdown can open and close on click events. When clicking on the dropdown, it will toggle the open class When clicking outside of the dropdown, it will remove the open class, effectively closing the dropdown

A Pen by Brian Han on CodePen.

License.

index.html

<div class="dropdown">
  <p class="dropdown-text">Choose a pokemon...</p>
  <ul class="dropdown-menu">
    <li class="item"><a href="#charmander" class="link">charmander</a></li>
    <li class="item"><a href="#squirtle" class="link">squirtle</a></li>
    <li class="item"><a href="#pikachu" class="link">pikachu</a></li>
    <li class="item"><a href="#bulbasaur" class="link">bulbasaur</a></li>
  </ul>
</div>

script.babel

class Dropdown {
  constructor(element) {
    this.element = element;
    this.element.ownerDocument.addEventListener('click', (event) => this.toggle(event));
  }

  toggle() {
    // Check if "this.element" contains the element where the 'click' event originated from
    // Note: "this.element" will be everything inside <div class="dropdown>
    // See Node.contains API docs: https://developer.mozilla.org/en-US/docs/Web/API/Node/contains
    const isSelf = this.element.contains(event.target);

    if (isSelf) {
      // When we click the dropdown itself, toggle the "open" class
      // In other words: If this dropdown (this.element), is itself...toggle the "open" class
      this.element.classList.toggle('open');
    } else {
      // Clicking anywhere outside of the dropdown will close the dropdown
      // This is because "event.target" will be something that is not "this.element"
      this.element.classList.remove('open');
    }
  }
}

const element = document.querySelector('.dropdown');
const dropdown = new Dropdown(element);

style.scss

body {
  margin: 0;
  padding: 1em;
}

.dropdown {
  display: inline-block;
  background-color: darken(turquoise, 5%);
  font-family: sans-serif;
  font-weight: bold;
  letter-spacing: 1px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.dropdown-text {
  display: block;
  padding: 1em;
  margin: 0;
  border-bottom: 1px solid black;
  cursor: pointer;
}

.dropdown-menu {
  display: none;
  list-style-type: none;
  padding: 0;
  margin: 0;

  .open & {
    display: flex;
    flex-direction: column;
  }
}

.item {
  background-color: darken(turquoise, 20%);
}

.link {
  display: block;
  padding: 1em;
  color: black;
  text-decoration: none;
  
  &:hover {
    background-color: darken(yellow, 5%);
    color: black;
  }
}