Creación de menús desplegables con JavaScript y CSS3

Vista prévia

Descripción

Un componente desplegable animado y con función táctil que utiliza las transformaciones CSS3 y las transiciones para abrir una lista desplegable al hacer clic en el botón de alternar.

Funcionamiento

Crea una lista desplegable con un enlace de alternancia en tu página web.

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

Los estilos principales de CSS/CSS3 para la lista desplegable.

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

Estilo del botón de alternancia.

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

JavaScript para activar la lista desplegable y habilitar el soporte táctil.

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

});

})();