Скрыть субменю под сайдбаром

Question

Сейчас это выглядит так, по нажатию на пункт меню, субменю скрывается/раскрывается, но проглядывается его тень из под родительского меню, а также отображается блок-контейнер с классом .sub-menu.

let aside = document.querySelector(".aside");
let asideBookmark = document.querySelector(".aside__bookmark");
let dashboardArrow = document.querySelectorAll(".aside__item ul");

asideBookmark.addEventListener("click", function () {
    aside.classList.toggle("aside--show");
});

dashboardArrow.forEach((item) => {
    item.addEventListener("click", (e) => {
        e.preventDefault();
        if (e.target.tagName === "A") {
            const submenu = [...e.target.parentNode.children].find((n) =>
                n.classList.contains("sub-menu")
            );
            if (submenu) {
                let tmp = submenu.querySelector("ul");

                tmp.classList.toggle("show");

            }
        }
    });
});

Ссылка на JSFiddle

Answer 1

Вам будет достаточно "выключать" подсветку (box-shadow) когда меню находить в закрытом положении.

Что бы отложить появления подсветки при открытии я использовал таймер, но Вы можете задействовать для этого CSS анимацию или какую либо другую логику.

Если же вы оставите setTimeout, то Вам стоит добавить блокировку кнопки на время пока анимация появления отрабатывает и разблокировки после ее завершения что бы избежать некорректной работы в случае множественных кликов один за другим.

Ваш пример с CodePen превышает ограничение SO по длине ответа, поэтому вместо рабочего code-snippet'a я вынес ниже те части которые мне понадобилось изменить что бы решить проблему описанную в Вашем вопросе.

Измененные части CSS:

.box-shadow {
  box-shadow: 2px 0 5px -2px rgba(0, 0, 0, 0.5);
}

.aside__item ul li .sub-menu ul {
  background-color: white;
  padding: 10px 10px 10px 10px;
  transition: transform 0.5s, box-shadow 0.2s;
  transform: translateX(-250px);
}

Измененный JS:

const aside = document.querySelector(".aside")
const asideBookmark = document.querySelector(".aside__bookmark")
const dashboardArrow = document.querySelectorAll(".aside__item ul")

asideBookmark.addEventListener("click", () => {
  aside.classList.toggle("aside--show")
})

dashboardArrow.forEach(item => {
  item.addEventListener("click", event => {
    event.preventDefault()
    if (event.target.tagName === "A") {
      const submenu = [...event.target.parentNode.children].find(n =>
        n.classList.contains("sub-menu")
      )
      // начало измененной части
      if (submenu) {
        const tmp = submenu.querySelector("ul")
        tmp.classList.toggle("show")
        if (tmp.classList.contains("show")) {
           setTimeout(() => tmp.classList.toggle("box-shadow"), 300)
        } else {
          tmp.classList.toggle("box-shadow")
        }
      }
      // конец измененной части
    }
  })
})

БЛОГ НА HUSL

Скрыть субменю под сайдбаром

Ответы (1 шт):