Partystreusel

Dropdown 

<div class="dropdown js-dropdown">
    <button type="button" id="dropdownMenu1" class="btn js-dropdown__toggler">Dropdown Button</button>
    <ul role="menu" aria-labelledby="dropdownMenu1" class="dropdown__menu js-dropdown__actions">
        <li role="presentation"><a role="menuitem" href="#">Action</a></li>
        <li role="presentation"><a role="menuitem" href="#">Another action</a></li>
        <li role="presentation"><a role="menuitem" href="#">Something else here</a></li>
        <li role="presentation"><a role="menuitem" href="#">Separated link</a></li>
    </ul>
</div>
 
<div class="dropdown js-dropdown">
  <button type="button" id="dropdownMenu1" class="btn js-dropdown__toggler">Dropdown Button</button>
  <ul role="menu" aria-labelledby="dropdownMenu1" class="dropdown__menu js-dropdown__actions">
    <li role="presentation"><a role="menuitem" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" href="#">Something else here</a></li>
    <li role="presentation"><a role="menuitem" href="#">Separated link</a></li>
  </ul>
</div>
 
/* No context defined for this component. */
  • Content: 
    .dropdown {
  position: relative;
  margin: 0 0 rem(18);

  .btn {
    margin-bottom: 0;
  }
}

.dropdown__menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  float: left;
  min-width: rem(160);
  padding: rem(6) 0;
  margin: rem(2) 0 0;
  list-style: none;
  background-color: $color__bright;
  border: rem(1) solid $color__accent;

  a {
    display: block;
    padding: rem(5) rem(12);
    white-space: nowrap;
  }
}

// STATES
.dropdown--open {
  .dropdown__menu {
    display: block;
  }
}
  • URL: /components/raw/dropdown/_dropdown.scss
  • Filesystem Path: patterns/02-molecules/dropdown/_dropdown.scss
  • Size: 532 Bytes
  • Content: 
    import Base from '../../_config/base';

class Dropdown extends Base {
  constructor(el) {
    super(el);

    this.config = {
      openClass: 'dropdown--open',
      btnActiveClass: 'btn--active',
      togglerSelector: '.js-dropdown__toggler',
    };

    this.button = this.$el.querySelector(this.config.togglerSelector);

    this.$el.addEventListener('click', this.triggerToggle.bind(this));
  }

  triggerToggle() {
    this.$el.classList.toggle(this.config.openClass);
    this.button.classList.toggle(this.config.btnActiveClass);
  }
}

Dropdown.className = 'Dropdown';
export default Dropdown;
  • URL: /components/raw/dropdown/dropdown.js
  • Filesystem Path: patterns/02-molecules/dropdown/dropdown.js
  • Size: 603 Bytes

There are no notes for this item.