Menú de acordeón vertical suave con JavaScript y CSS3

Vista prévia

Descripción

Un menú de acordeón vertical suave creado con JavaScript, CSS, transiciones CSS3, Font awesome y listas HTML anidadas.

JavaScript se utiliza para alternar las clases CSS al expandir/contraer paneles de acordeón.

Funcionamiento

Cree el menú de acordeón a partir de listas anidadas de la siguiente manera. Es compatible con el número ilimitado de niveles.

<ul class="menu">

 <li class="list"><a href="#">JavaScript</a>



<ul class="items">




 <li><a href="#"> Angular</a></li>




 <li><a href="#"> React</a></li>




 <li><a href="#"> Vue</a></li>



</ul>

 </li>

 <li class="list"><a href="#">Adobe</a>



<ul class="items">




 <li> <a href="#" > Photoshop</a></li>




 <li> <a href="#" > Illustrator</a></li>




 <li> <a href="#" > Dreamweaver</a></li>



</ul>

 </li>

 <li class="list"><a href="#">Multi-Level</a>



<ul class="items">




 <li> <a href="#" > Item 1-1 </a></li>




 <li> <a href="#" > Item 1-2 </a></li>




 <li class="list"><a href="#">List 1-1</a>






<ul
class="items">







 <li> <a href="#" > Item 1-1-1</a></li>







 <li> <a href="#" > Item 1-1-2</a></li>







 <li class="list"><a href="#">List 1-2</a>









<ul
class="items">










 <li> <a href="#" > Item 1-2-1</a></li>










 <li> <a href="#" > Item 1-2-2</a></li>









</ul>







 </li>






</ul>




 </li>



</ul>

 </li>
</ul>

Las reglas de CSS/CSS3 necesarias para el menú de acordeón.

ul.menu {

padding: 0;

list-style: none;

width: 400px;

margin: 20px auto;

font-family: 'Roboto';

box-shadow: 0px 0px 25px #00000070;

clear: both;

display: table;
}
ul.menu .list {

font-size: 14px;

border-bottom: 1px solid #324252;

position: relative;

width: 100%;

box-sizing: border-box;

height: 50px;

vertical-align: sub;

background: #3e5165;

clear: both;
}
ul.menu .list:after {

content: "\f107";

font-family: FontAwesome;

position: absolute;

right: 17px;

top: 17px;

padding: 0px 5px;

color: #fff;
}
ul.menu .list:before {

content: '\f07b';

font-family: FontAwesome;

position: absolute;

left: 17px;

top: 17px;

padding: 0px 5px;

color: #fff;
}
ul.menu .list a {

text-decoration: none;

color: #fff;

padding: 17px 0px 17px 45px;

display: block;

height: 100%;

box-sizing: border-box;
}
ul.menu .list a:hover {

background-color: #324252;

transition: 300ms all;

color: #09fbd2;
}
ul.menu .list .items {

height: 0px;

overflow: hidden;
}
ul.menu .list .items a {

padding: 17px;
}
ul.menu .list .items a:hover {

background-color: #3f5d79;

color: #fff;

transition: 300ms all;
}
ul.menu .list:last-child {

border-bottom: none;
}
ul.menu .active:after {

content: "\f106";

font-family: FontAwesome;

position: absolute;

right: 17px;

top: 17px;

padding: 0px 5px;

color: #fff;
}
ul.menu .active:before {

content: '\f07c';

font-family: FontAwesome;

position: absolute;

left: 17px;

top: 17px;

padding: 0px 5px;

color: #fff;
}
ul.menu .active > .items {

display: block;

background: #23313f;

padding: 0px;

height: auto;

color: #fff;

transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);

transition: all 200ms;

clear: both;

float: left;

width: 100%;
}
ul.menu .active > .items li {

padding: 0px;

border-bottom: 1px solid #324252;

list-style: none;
}
ul.menu .active > .items li:last-child {

border-color: transparent;

padding-bottom: 0px;
}
ul.menu .active > .items .active > .items {

background-color: #2f4b67;
}
ul.menu .active > a {

color: #46efa4;

text-transform: uppercase;

font-weight: bold;
}
ul.menu .active .list {

background: #697d92;
}
ul.menu .active .list a {

padding: 17px 0px 17px 45px;
}

El principal JavaScript para habilitar el menú de acordeón.

var list = document.querySelectorAll('.list');

function accordion(e) {

e.stopPropagation();

if (this.classList.contains('active')) {



this.classList.remove('active');

} else

if (this.parentElement.parentElement.classList.contains('active')) {



this.classList.add('active');

} else

{



for (i = 0; i < list.length; i++) {





list[i].classList.remove('active');




}



this.classList.add('active');

}
}
for (i = 0; i < list.length; i++) {

list[i].addEventListener('click', accordion);
}