Author: | xtianares |
---|---|
Views Total: | 8,935 views |
Official Page: | Go to website |
Last Update: | December 17, 2018 |
License: | MIT |
Preview:

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; }
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