Pure JS accordion menu

Question

Required menu structure implementation:

• Menu
  • submenu
    • contacts
    • news
    • photo
  • submenu
  • submenu
  • submenu
• menu
• menu
• menu

By clicking on the "menu" button, a list of "sub menu" elements opens. Clicking on the "sub menu" button opens a list of menu links. The task is next. By pressing the "menu" button it is necessary to close all other "menu" buttons. By clicking on the "sub menu" button, close all other "sub menu" buttons.

My code:

<https://codepen.io/artemkhmyrov/pen/oNMgGpd>

I only managed to go through the first level of the menu, that is, I click on the "menu" button and the list from the "sub menu" opens, I click on another "menu" button, the previous one closes, but when I click on the "sub menu" everything closes.

Answer 1

For multilevel menu you can try like below,

document.querySelector(".burger-menu__icon").addEventListener("click", function () {
  document.querySelector('.burger-menu__box').style.top="2%";
  document.querySelector('.burger-menu__box').style.right = "51%";
  });

   
  const burgerMenu = document.querySelector(".burger-menu");
  const burgerMenuIcon = document.querySelector(".burger-menu__icon");
  const burgerMenuBox = document.querySelector(".burger-menu__box");
  const container = burgerMenuBox.querySelector(".container");
  const burgerMenuSub = container.querySelector(".burger-menu-sub");
  let burgerMenuTitle = burgerMenuSub.querySelectorAll(".burger-menu-title");
  let burgerMenuContent = burgerMenuSub.querySelectorAll(".burger-menu-content");

  

for (let i = 0; i < burgerMenuTitle.length; i++) {
  burgerMenuTitle[i].addEventListener("click", (e) => {
    var menu1 = document.getElementsByClassName('menu1');
    for (var j = 0; j < menu1.length; j ++) {
      menu1[j].style.display="none";
    }
    burgerMenuContent[i].classList.toggle("burger-menu-content");
    burgerMenuContent[i].style.display = "block";
  });
}

    *,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 0.9944vw;
  font-style: normal;
  font-weight: normal;
  line-height: 1.2;
  margin: 0;
  padding: 0;
}

ul li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.container {
  width: 129.4rem;
  margin: 0 auto;
}

.header .container {
  display: flex;
}
.header__top {
  background-color: rgb(166, 170, 166);
  margin-bottom: 1.7rem;
}
.header__top .container {
  justify-content: space-between;
  align-items: center;
  height: 3.6rem;
}

.burger-icon {
  display: flex;
  width: 2.55rem;
  align-items: center;
  height: 2rem;
  justify-content: center;
  
}
.burger-icon.active::after {
  transition: all 0.9s ease 0s;
  transform: rotate(-225deg);
}
.burger-icon.active::before {
  transition: all 0.9s ease 0s;
  transform: rotate(225deg);
}
.burger-icon::after {
  transform: rotate(90deg);
}
.burger-icon::before,
.burger-icon::after {
  position: absolute;
  content: "";
  background-color: white;
  width: 0.2rem;
  height: 1.1rem;
}

.burger-menu {
  width: 3rem;
}
.burger-menu__icon {
  z-index: 15;
  display: block;
  position: relative;
  width: 2rem;
  height: 1.4rem;
  cursor: pointer;
  background: #4862b6;
}
.burger-menu__icon span,
.burger-menu__icon:before,
.burger-menu__icon:after {
  left: 0;
  position: absolute;
  height: 15%;
  width: 100%;
  transition: all 0.3s ease 0s;
  background-color: #fff;
  border-radius: 2rem;
}
.burger-menu__icon::before,
.burger-menu__icon::after {
  content: "";
}
.burger-menu__icon::before {
  top: 0;
}
.burger-menu__icon::after {
  bottom: 0;
}
.burger-menu__icon span {
  top: 50%;
  transform: scale(1) translate(0, -50%);
}
.burger-menu__icon._active span {
  transform: scale(0) translate(0, -50%);
}
.burger-menu__icon._active:before {
  top: 50%;
  transform: rotate(-45deg) translate(0, -50%);
}
.burger-menu__icon._active:after {
  bottom: 50%;
  transform: rotate(45deg) translate(0, 50%);
}
.burger-menu__box {
  position: absolute;
  top: -100%;
  right: 50%;
  transform: translate(50%, 0);
  min-height: 31rem;
  background-color: rgb(180, 180, 180);
  padding-top: 5rem;
  transition: all 0.3s ease 0s;
  z-index: 11;
  border-radius: 0 0 1.5rem 1.5rem;
}
.burger-menu__box .container {
  justify-content: center;
  color: white;
  font-size: 5rem;
  align-items: center;
  height: 100%;
  font-weight: bold;
}
.burger-menu__box._active {
  top: 0;
}
.burger-menu-content {
  margin-left: 2.4rem;
  display: none;
  right: 20%;
}
.burger-menu-content-open {
  display: block;
}
.burger-menu-title {
  padding: 1.1rem 0rem;
  display: flex;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.9rem;
  color: #ffffff;
}
.burger-menu-title:hover {
  cursor: pointer;
}
.burger-menu-title:hover > .burger-icon::before,
.burger-menu-title:hover > .burger-icon::after {
  color: #4862b6;
}
.burger-menu-title:hover a {
  color: #4862b6;
}
.burger-menu-sub {
  width: 100%;
  display: flex;
  flex-direction: row;
  height: 100%;
  justify-content: space-around;
}
.burger-menu__section-wrap-link {
  padding: 0rem 0rem 0.9rem 3rem;
  line-height: 1.2rem;
}
.burger-menu__section-link {
  font-weight: 400;
  font-size: 1.6rem;
  color: #ffffff;
}
.burger-menu__section-link::before {
  content: "";
  position: absolute;
  border-top: 0.3rem solid transparent;
  border-left: 0.4rem solid #fff;
  border-bottom: 0.3rem solid transparent;
  margin-left: -1rem;
  margin-top: 1.6rem;
}
.burger-menu__section-link:hover::before {
  border-left: 0.4rem solid #4862b6;
}
.burger-menu__section-links {
  font-weight: 400;
  font-size: 1rem;
}
.burger-menu__sub-sub-link {
  padding: 0rem 0rem 0.9rem 0rem;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.9rem;
  color: #ffffff;
}
.burger-menu__sub-sub-title {
  pointer-events: none;
  padding: 0rem 0rem 0.9rem 0rem;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.9rem;
  color: #ffffff;
}
.burger-menu__sub-item {
  width: 25rem;
}
.burger-menu-list {
  width: 28.5rem;
}
.burger-menu__wrap-accordion {
  padding: 0rem 0rem 2.5rem 2.5rem;
  overflow-y: scroll;
  display: flex;
  max-height: 115rem;
  width: 100%;
  flex-direction: row;
}
.burger-menu__wrap-accordion::-webkit-scrollbar {
  width: 0.001rem;
  background: green;
}
.burger-menu__wrap-item {
  padding: 1rem 0rem;
  display: flex;
  width: 100%;
}

<body>


<div class="burger-menu__icon">
  <span></span>
</div>

<div class="burger-menu__box">
  <div class="container">
    <nav class="burger-menu-sub menu">

      <div class="burger-menu__wrap-accordion">
        <ul class="burger-menu-list">
          <ul class="burger-menu-list">
            <li class="burger-menu__item">
            <li class="burger-menu-title">
              <div class="burger-icon"></div>
              <a href="#" class="burger-menu__sub-sub-link">Menu</a>
            </li>
            <ul class="burger-menu-content">
              <li class="burger-menu__sub-item">
                  <li class="burger-menu-title">
                    <div class="burger-icon"></div>
                    <a href="#" class="burger-menu__sub-sub-link">Sub Menu</a>
                  </li>
                  <ul class="burger-menu-content menu1">
                    <li class="burger-menu__section-wrap-link">
                      <a href="#" class="burger-menu__section-link">Paragraph 1</a>
                    </li>
                    <li class="burger-menu__section-wrap-link">
                      <a href="#" class="burger-menu__section-link">Paragraph 2</a>
                    </li>
                    <li class="burger-menu__section-wrap-link">
                      <a href="#" class="burger-menu__section-link">Paragraph 3</a>
                    </li>
                  </ul>
              </li>
              <li class="burger-menu__sub-item">
                  <li class="burger-menu-title">
                    <div class="burger-icon"></div>
                    <a href="#" class="burger-menu__sub-sub-link">Sub Menu</a>
                  </li>
                  <ul class="burger-menu-content menu1">
                    <li class="burger-menu__section-wrap-link">
                      <a href="#" class="burger-menu__section-link">Paragraph 1</a>
                    </li>
                    <li class="burger-menu__section-wrap-link">
                      <a href="#" class="burger-menu__section-link">Paragraph 2</a>
                    </li>
                    <li class="burger-menu__section-wrap-link">
                      <a href="#" class="burger-menu__section-link">Paragraph 3</a>
                    </li>
                  </ul>
              </li>
              <li class="burger-menu__sub-item">
                  <li class="burger-menu-title">
                    <div class="burger-icon"></div>
                    <a href="#" class="burger-menu__sub-sub-link">Sub Menu</a>
                  </li>
                  <ul class="burger-menu-content menu1">
                    <li class="burger-menu__section-wrap-link">
                      <a href="#" class="burger-menu__section-link">Paragraph 1</a>
                    </li>
                    <li class="burger-menu__section-wrap-link">
                      <a href="#" class="burger-menu__section-link">Paragraph 2</a>
                    </li>
                    <li class="burger-menu__section-wrap-link">
                      <a href="#" class="burger-menu__section-link">Paragraph 3</a>
                    </li>
                  </ul>
              </li>
            </ul>
            </li>
          </ul>

          <ul class="burger-menu-list">
            <li class="burger-menu__item">
            <li class="burger-menu-title">
              <div class="burger-icon"></div>
              <a href="#" class="burger-menu__sub-sub-link">Menu</a>
            </li>
            <ul class="burger-menu-content">
              <li class="burger-menu__sub-item">
              <li class="burger-menu-title">
                <div class="burger-icon"></div>
                <a href="#" class="burger-menu__sub-sub-link">Sub Menu</a>
              </li>
              <ul class="burger-menu-content menu1">
                <li class="burger-menu__section-wrap-link">
                  <a href="#" class="burger-menu__section-link">Paragraph 1</a>
                </li>
                <li class="burger-menu__section-wrap-link">
                  <a href="#" class="burger-menu__section-link">Paragraph 2</a>
                </li>
                <li class="burger-menu__section-wrap-link">
                  <a href="#" class="burger-menu__section-link">Paragraph 3</a>
                </li>
              </ul>
              </li>
              <li class="burger-menu__sub-item">
              <li class="burger-menu-title">
                <div class="burger-icon"></div>
                <a href="#" class="burger-menu__sub-sub-link">Sub Menu</a>
              </li>
              <ul class="burger-menu-content menu1">
                <li class="burger-menu__section-wrap-link">
                  <a href="#" class="burger-menu__section-link">Paragraph 1</a>
                </li>
                <li class="burger-menu__section-wrap-link">
                  <a href="#" class="burger-menu__section-link">Paragraph 2</a>
                </li>
                <li class="burger-menu__section-wrap-link">
                  <a href="#" class="burger-menu__section-link">Paragraph 3</a>
                </li>
              </ul>
              </li>
              <li class="burger-menu__sub-item">
              <li class="burger-menu-title">
                <div class="burger-icon"></div>
                <a href="#" class="burger-menu__sub-sub-link">Sub Menu</a>
              </li>
              <ul class="burger-menu-content menu1">
                <li class="burger-menu__section-wrap-link">
                  <a href="#" class="burger-menu__section-link">Paragraph 1</a>
                </li>
                <li class="burger-menu__section-wrap-link">
                  <a href="#" class="burger-menu__section-link">Paragraph 2</a>
                </li>
                <li class="burger-menu__section-wrap-link">
                  <a href="#" class="burger-menu__section-link">Paragraph 3</a>
                </li>
              </ul>
              </li>
            </ul>
            </li>
          </ul>
        </ul>

         
      </div>
    </nav>
  </div>
</div>
       

</body>

Answer 2

I suggest you rearrange your html view first.

<ul>
    <li>
      <a>Menu</a>
         <ul>
             <li>
                 <a>Sub Menu</a>
                   <ul>
                      <li>Contacts</li>
                      <li>News</li>
                      <li>Photo</li>
                   </ul>
             </li>
             <li>Sub Menu</li>
             <li>Sub Menu</li>
          </ul>
    </li>
    <li>
       <a>Menu</a>
    </li>
     /*-- and so on --*/
</ul>

From there, you can specify which <li> to expend through JavaScript.