Dropdown menu

by pashkes

HTML

<div class="dropdown">
  <button class="dropdown__button" type="button">De</button>
  <ul class="dropdown__menu">
    <li><a href="#"><span class="dropdown__item">Руc</span></a></li>
    <li><a href="#"><span class="dropdown__item">Eng</span></a></li>
    <li><a href="#"><span class="dropdown__item">Pl</span></a></li>
  </ul>
</div>

SCSS

.dropdown {
 width: 200px;
  text-align: center;
  font-size: 20px;
  &__button {
    position: relative;
    display: inline-block;
    width: 100%;
    cursor: pointer;
    font-size: 20px;
    z-index: 10;
  }
  &__menu {
    margin: 0;
    padding: 0;
    list-style-type: none;
    background-color: darkSeaGreen;
    opacity: 0;
    visibility: hidden;
    transition: all .5s ease-out;
    &.active {
      visibility: visible;
      opacity: 1;
    }
  }
  li {
    &:hover {
      background-color: DarkKhaki;
    }
  }
  a, span {
    display: block;
  }
  span {
    padding: 10px 0;
  }
}

JavaScript

//Dropdown menu

var btnToggle = $(".dropdown__button"),
		menu = $(".dropdown__menu"),
    menuItem = $(".dropdown__item"),
    menuClass = 'dropdown';

btnToggle.on("click", function() {
  menu.toggleClass('active');
});

menuItem.on("click", function() {
  var textItem = $(this).text(),
  		textBtn = btnToggle.text();
  
  btnToggle.text(textItem);
  $(this).text(textBtn);
  menu.removeClass('active');
});

$(document).on('click', function(e) {
    var clicked = $(e.target);
    if (! clicked.parents().hasClass(menuClass))
        menu.removeClass('active');
});