HOME  >   CSS3 ANIMATION  >   CSS3 Accordion Drop-Down Menu With Small Icons
CSS3 Accordion Drop-Down Menu With Small Icons
BY Earl18 Dec,2020

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.


CSS3 Accordion Drop-Down Menu With Small Icons
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 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>
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);
           lastChild.style.height = 0;
     let altoMenu = menu.clientHeight;
        lastChild.style.height = `${altoMenu}px`;


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

acordeon.addEventListener("click", getTarget);