Convert HTML List Into Dropdown Menu – Dropdown-List

Category: Javascript , Menu & Navigation | December 17, 2018
Author:xtianares
Views Total:8,935 views
Official Page:Go to website
Last Update:December 17, 2018
License:MIT

Preview:

Convert HTML List Into Dropdown Menu – Dropdown-List

Description:

A small vanilla JavaScript library that transforms the regular HTML unordered list into a drop-down menu for easily navigating between your web pages.

How to use it:

Create a normal unordered list as follows:

<ul class="drop">
  <li><a href="#1">Menu Item 1</a></li>
  <li><a href="#2">Menu Item 2</a></li>
  <li><a href="#3">Menu Item 3</a></li>
  <li><a href="#4">Menu Item 4</a></li>
  <li class="last"><a href="">Menu Item 5</a></li>
</ul>

The core JavaScript for the drop-down menu.

var activeClass = "is-active"
var forEach = function (array, callback, scope) {
  for (var i = 0; i < array.length; i++) {
    callback.call(scope, i, array[i]); // passes back stuff we need from the array
  }
};
forEach(document.querySelectorAll(".dropdown_list span.dropdown"), function (index, value) {
  value.addEventListener('click', function() {
        //console.log(value.classList);
        if ( !value.classList.contains(activeClass) ) {
            var el = document.querySelectorAll(".dropdown_list span.dropdown");
            var i; for (i = 0; i < el.length; i++) {
                el[i].classList.remove(activeClass);
            }
            value.classList.toggle(activeClass);
        } else
        if ( value.classList.contains(activeClass) ) {
            value.classList.remove(activeClass);
        }
  })
});
document.addEventListener('click', function(e) {
  // Dropdown Select Toggle
  var el = document.querySelectorAll(".dropdown_list span.dropdown")
  var e=e? e : window.event;
    var event_element=e.target? e.target : e.srcElement;
  if (!event_element.closest(".dropdown_list")){
    //console.log(event_element.closest(".dropdown_list"));
    var i; for (i = 0; i < el.length; i++) {
      el[i].classList.remove(activeClass);
    }
  }
}, false);

The necessary polyfills for old browsers.

// .classList() Polyfill for older browser - IE9 again...
!function(){function t(t){this.element=t}var e=function(t){return RegExp("(^| )"+t+"( |$)")},n=function(t,e,n){for(var i=0;i<t.length;i++)e.call(n,t[i])}
t.prototype={add:function(){n(arguments,function(t){this.contains(t)||(this.element.className+=" "+t)},this)},remove:function(){n(arguments,function(t){this.element.className=this.element.className.replace(e(t),"")},this)},toggle:function(t){return this.contains(t)?(this.remove(t),!1):(this.add(t),!0)},contains:function(t){return e(t).test(this.element.className)},replace:function(t,e){this.remove(t),this.add(e)}},"classList"in Element.prototype||Object.defineProperty(Element.prototype,"classList",{get:function(){return new t(this)}}),window.DOMTokenList&&null==DOMTokenList.prototype.replace&&(DOMTokenList.prototype.replace=t.prototype.replace)}()
// .closest() Polyfill for browsers that supports document.querySelectorAll() - IE9 again...
if (window.Element && !Element.prototype.closest) {
  Element.prototype.closest =
  function(s) {
      var matches = (this.document || this.ownerDocument).querySelectorAll(s),
          i,
          el = this;
      do {
          i = matches.length;
          while (--i >= 0 && matches.item(i) !== el) {};
      } while ((i < 0) && (el = el.parentElement));
      return el;
  };
}

The example CSS for the drop-down menu.

.dropdown_list {
  margin: 15px auto;
  width: auto;
  position: relative;
  box-sizing: border-box;
}
.dropdown_list li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.dropdown_list span.dropdown {
  display: block;
  margin: 0;
  padding: 0 10px;
  width: auto;
  height: 40px;
  line-height: 38px;
  background: #fff;
  border-radius: 3px;
  border: 1px solid #a1c4e5;
  cursor: pointer;
  overflow: hidden;
}
.dropdown_list span.dropdown.is-active {
  border-radius: 3px 3px 0 0;
}
.dropdown_list span.dropdown:hover, .dropdown_list span.dropdown:active {
  background: #f1f1f1;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.dropdown_list span.dropdown:after {
  float: right;
  margin-top: 0;
  margin-left: 10px;
  width: 15px;
  height: 100%;
  content: "\e817";
  color: ineherit;
  font-family: 'icons';
  text-align: center;
  font-size: inherit;
  vertical-align: top;
}
.dropdown_list span.dropdown.is-active:after {
  content: "\e816"
}
.dropdown_list a:hover {
  text-decoration: none;
  border-bottom: 0;
}
.dropdown_list .drop {
  display: block;
  float: left;
  margin: 0;
  width: 100%;
  max-height: 0;
  position: absolute;
  background: #fff;
  top: 40px;
  border-radius: 0 0 3px 3px;
  z-index: 10;
  overflow-y: auto;
  opacity: 0;
  transition: max-height 0.3s cubic-bezier(0, 0.6, 0, 1), opacity 0.3s cubic-bezier(0, 0.6, 0, 1);
}
.dropdown_list span.is-active + .drop {
  max-height: 350px;
  border: 1px solid #a1c4e5;
  border-top: 0;
  opacity: 1;
  transition: max-height 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
.dropdown_list .drop li {
  float: none;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  height: auto;
  border-top: 1px dotted #ccc;
}
.dropdown_list .drop li:first-child {
  border-top: 0
}
.dropdown_list .drop li a {
  float: none;
  display: block;
  margin: 0;
  padding: 6px 10px 6px 25px;
  height: auto;
  width: auto;
  text-transform: none;
  color: inherit;
  background: #fff;
  text-align: left;
  border-radius: 0;
  border: 0;
}
.dropdown_list .drop li a:hover, .dropdown_list .drop li a:active {
  background: #f1f1f1;
}
.dropdown_list .drop li a:before {
  display: inline-block;
  margin-left: -15px;
  margin-right: 5px;
  width: 10px;
  height: inherit;
  content: "\00BB";
  color: inherit;
  font-family: 'icons';
  text-align: center;
  font-size: inherit;
  vertical-align: top;
}

You Might Be Interested In:


One thought on “Convert HTML List Into Dropdown Menu – Dropdown-List

  1. Kad

    Too bad the core UL in your HTML isn’t actually all that you need to achieve this — you need to wrap it in a DIV, and add a span on top, as in your examples… which makes it automatically useless for those of us that can’t modify the DOM, and it would’ve been nice to know that

    Reply

Leave a Reply