CSS3 Accordion Drop-Down Menu With Small Icons

CSS3 Accordion Drop-Down Menu With Small Icons: BY Earl18 Dec,2020; Tags:
CSS3 Menu Accordion Menu

Introduction

For web menus, although the horizontal main menu we use most is the horizontal main menu, but in the background of the system, the accordion drop-down menu is still very widely used. What I want to share this time is an accordion menu based on CSS and JavaScript, and this menu also has a beautiful little icon on the left side.

Instructions

HTML Body Code

<div class="acordeon">
    <div class="acordeon__head"><img class="acordeon__head--logo" src="https://image.flaticon.com/icons/svg/186/186303.svg" alt="development"/>
      <p class="acordeon__head--title">FrontEnd Development</p><span class="fa fa-chevron-down icon"></span>
    </div>
    <div class="acordeon__body">
      <div class="acordeon__body__menu">
        <li><a href="#">HTML5</a></li>
        <li><a href="#">CSS3</a></li>
        <li><a href="#">JavaScript</a></li>
      </div>
    </div>
  </div>

Css Code

body {
  height: 100vh;
  background: #2c3e50;
  font-family: "Open Sans", sans serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.title {
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  padding-bottom: 20px;
}
.title span {
  display: block;
  text-transform: none;
  font-size: .70em;
}

.contenedor-acordeon {
  width: 400px;
  overflow: hidden;
  border-radius: 3px;
}

.acordeon {
  width: 100%;
  overflow: hidden;
}

Js Code

let acordeon = document.getElementById("acordeon-content"),
    acordeonBody = [...document.querySelectorAll(".acordeon__body")];

function openMenu(element){
   let parent  = element.target.parentNode,
          lastChild = parent.lastElementChild,
          menu = lastChild.firstElementChild;
            
        acordeonBody.map(el => el.style.height = 0);
        
  if(lastChild.clientHeight){
           lastChild.style.height = 0;
   }else{
     let altoMenu = menu.clientHeight;
        lastChild.style.height = `${altoMenu}px`;
    }

}

function getTarget(e){
    
  if(e.target.tagName === "DIV"){
      openMenu(e); 
  }
  
}

acordeon.addEventListener("click", getTarget);

VIEW NOW