Как сделать так, чтобы сначала выезжало подменю, а потом появлялся padding у body?

Question

[z_u_l]

Здравствуйте!

Делаю меню, но немного застопорился. Как сделать так, чтобы при клике на пункт "Menu with sub" сначала выезжало меню, а потом появлялся padding у body, а при скрытии сначала пропадало все submenu, а потом уже пропадал padding body? Речь про десктоп.
Как сделать так, чтобы это не выглядело, как сейчас - с пробелом? Спасибо.

Пример реализации меню

Comments

[tema_sun]

Это все без JS можно сделать. Направление для мысли https://codepen.io/anon/pen/OojQZa

Answer 1

[Дмитрий]

Знакомая тема)
Обработчик к кнопочке привязывал.
onclick="myFunction()"
Примерный код кнопки (вырежу из другого проекта)

<button id="btnc" class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation" onclick="myFunction()">
      <span class="navbar-toggler-icon"></span>
    </button>

А дальше код, присваивающий класс к кнопочке и убирающий его, после повторного клика.

/*menu-header
id="bars" это донор, к которому будет прилепляться класс snos
*/
function myFunction() {
   var element = document.getElementById("bars"); 
   element.classList.toggle("snos");
}

up

В css файле не забудьте задать стилевые свойства классам.