Convertir lista HTML en menú desplegable-lista desplegable

Vista prévia

Descripción

Una pequeña biblioteca de JavaScript vainilla que transforma la lista desordenada HTML normal en un menú desplegable para navegar fácilmente entre las páginas Web.

Funcionamiento

Cree una lista desordenada normal de la siguiente manera:

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

El núcleo JavaScript para el menú desplegable.

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

Los polirellenos necesarios para los navegadores antiguos.

// .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;

};
}

El CSS de ejemplo para el menú desplegable.

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