Как правильно сделать адаптивное меню?

Question

[Владимир Суворов]

Имеется меню, при разных разрешениях оно будет абсолютно отличатся( цвет, ширина, да и сам способ отображения).Я попробовал сделать так, при нажатии на кнопку удаляется класс и добавляется новый, скрипт разворачивает меню, но не сворачивает, ниже код ( принцип работы).
https://jsfiddle.net/my_kachanov/e8dtmfr8/

Answer 1

[Ivan Stroykin]

<div class="header">
  <nav class="navbar navbar_visible">
  <ul>
    <li><a href="#">Visible</a></li>
    <li><a href="#">Hidden</a></li>
  </ul>
</nav>
<button class="btn">the btn</button>
</div>

$(document).ready(function(){
	$(".btn").click(function(){
		$(".navbar").slideToggle(500);
	})
	$(".btn").click(function(){
  	$(".navbar").removeClass("navbar_visible").addClass("navbar_hidden")
  })
});

Comments

[Ivan Stroykin]

codepen.io/alukardark/pen/KpvLeo

[Владимир Суворов]

Если возможно, можете описать в чем была проблема? ( проблема решена) но я не пойму, почему не работало?

[Ivan Stroykin]

Владимир Суворов: У вас стоит класс "navbar_visible" для nav. И написан скрипт, который по нажатию на кнопку удаляет класс "navbar_visible" и добавляет класс "navbar_hidden". Выше прописано "$(".navbar_visible").slideToggle(500);", но после первого нажатия на кнопку класса "navbar_visible" уже не существует. Поэтому не скрывается

[Владимир Суворов]

Иван Стройкин: Понял! да точно, !! благодарю за пояснение)