Creating Popup Dropdowns with JavaScript and CSS3

Category: Javascript , Menu & Navigation | May 20, 2015
Author:brenden
Views Total:10,077 views
Official Page:Go to website
Last Update:May 20, 2015
License:MIT

Preview:

Creating Popup Dropdowns with JavaScript and CSS3

Description:

An animated and touch-enabled dropdown component that uses CSS3 transforms and transitions to popup a dropdown list as you click on the toggle button.

How to use it:

Create a dropdown list with a toggle link on your web page.

<div class="dropdown">
  <a href="#" class="btn">
    Dropdown
  </a>
  <div class="outer-list">
    <ul>
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
      <li>List item 4</li>
    </ul>
  </div>
</div>

The core CSS / CSS3 styles for the dropdown list.

.dropdown {
  position: relative;
  margin: 0 auto;
  width: 15em;
}
.dropdown > .outer-list {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0);
  opacity: 0;
  visibility: hidden;
  transition: all 0.35s ease;
}
.dropdown > .outer-list.top {
  align-items: flex-start;
  transform-origin: 50% 0;
}
.dropdown > .outer-list.left { justify-content: flex-start; }
.dropdown > .outer-list.bottom {
  align-items: flex-end;
  transform-origin: 50% 100%;
}
.dropdown > .outer-list.right { justify-content: flex-end; }
.dropdown > .outer-list > ul {
  list-style: none;
  padding: 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1);
  border-radius: .2em;
}
.dropdown > .outer-list > ul li {
  padding: .25em 3em;
  margin: .25em;
  width: 100%;
  cursor: pointer;
  transition: background 0.35s ease;
}
.dropdown > .outer-list > ul li:hover { background: rgba(0, 0, 0, 0.07); }

Style the toggle button.

.btn {
  position: relative;
  display: block;
  width: 100%;
  text-align: center;
  background: #03A9F4;
  color: #fff;
  padding: 1em;
  border-radius: .15em;
  cursor: pointer;
  transition: all 0.35s ease;
  overflow: hidden;
}
.btn:after {
  content: '';
  position: absolute;
  bottom: -50%;
  right: -50%;
  z-index: 1;
  overflow: hidden;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transition: all 0.35s ease;
}
.btn:active:after,
.btn.dropdown-open:after {
  width: 200%;
  height: 200%;
}
.btn:hover { box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.1); }
.btn.dropdown-open + .outer-list {
  transform: scale(1);
  opacity: 1;
  visibility: visible;
}

The JavaScript to active the dropdown list and enable touch support.

'use strict';
(function() {
  var _btns = document.querySelectorAll('.btn'),
    _eachBtn = function(callback) {
      Array.prototype.forEach.call(_btns, function(elem) {
        callback.call(this, elem);
      });
    },
    _initListener = function(e) {
      e.preventDefault();
      e.stopPropagation();
      _eachBtn(function(btn) {
        btn.classList.remove('dropdown-open')
      });
      this.classList.toggle('dropdown-open');
    },
    _hideAll = function() {
      _eachBtn(function(btn) {
        btn.classList.remove('dropdown-open');
      });
    };
  _eachBtn(function(btn) {
    btn.addEventListener('touchend', function(e) {
      _initListener.call(this, e);
    });
    btn.addEventListener('click', function(e) {
      _initListener.call(this, e);
    });
  });
  document.addEventListener('touchend', function() {
    _hideAll();
  });
  
  document.addEventListener('click', function() {
    _hideAll();
  });
})();

 

You Might Be Interested In:


One thought on “Creating Popup Dropdowns with JavaScript and CSS3

  1. litasmith123

    Hello, this did not work for me. The button is fine, but the popup dropdown is not visible and does nothing when I click the “DropDown” button.

    Reply

Leave a Reply