Как сделать всплывающее меню с лева при нажатии на гамбургера?

Question

[Ibishka]

Как сделать точна такой же меню как на сайте https://toster.ru ?

Comments

[Rustam Bainazarov]

Не вижу ссылки на пример, но предвещая события, говорю, что:

От этого:
transform: translateX(-100%);

К этому:
transform: none;

[Сергей delphinpro]

ну так и посмотрите здесь же на тостере, как у них сделано.

Answer 1

[yarnstart]

jsfiddle.net/tjo5phe8/1 , примерно так

Comments

[frees2]

На Хабрахабре jquery/3.3.1 до сих пор стоит? Пугаете...

[yarnstart]

frees2, css класс можно добавить любым способом и джейквери вообще не обязателен

[Ibishka]

Пж скопируйте код из указанныво сайта.А то я не могу копировать.

[yarnstart]

Ibishka,

spoiler

<main class="main">
  <aside>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit ea quod culpa distinctio dicta aut veritatis harum explicabo, corporis voluptas temporibus voluptate saepe dolor voluptatibus quisquam suscipit reprehenderit debitis aliquid?</aside>
  <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda cum maxime id expedita accusantium eligendi autem molestiae sunt facere delectus suscipit nemo atque reprehenderit, tempore veniam qui aspernatur doloribus. Et?</div>
</main>
<button class="btn-open-menu">Нажми на меня и открой меню</button>

main {
  transition: 0.2s ease-in;
  transform: none;
}

aside {
  position: absolute;
  top: 0;
  left: -200px;
  height: 100vh;
  width: 200px;
  background: red;
}

.content {
  background: green;
}

.btn-open-menu {
  float: right;
}

.btn-open-menu_state_open {
  transform: translate(200px, 0);
}

$('.btn-open-menu').click(function() {
	$('.main').toggleClass('btn-open-menu_state_open');
});

[Ibishka]

eugenekazakov, Спасибо уже давно скопировал но не сработало.Когда нажимаю на кнопку 0 реакции.

[yarnstart]

Ibishka, что может не работать ? у вас jquery установлен ? Приложите свой код под спойлером

Answer 2

[Samuello]

Добавить класс менюшке через javascript