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

Question

[Ruslan]

Как правильно сделать горизонтальное меню. Само меню я уже сделал и поставил display: none.

Нужно чтобы по клику на иконку - меню выезжало и иконка сменялась на крестик. При клике на крестик меню уезжает, вроде все просто, но для меня пока не очень. Сделать нужно на JQuery, подозреваю нужен slideToggle.

Вот как должно быть:

Answer 1

[Арсений Матыцин]

Ммм... у тебя обычное вертикальное меню. Горизонтально это когда слева-направо или наоборот.

И вообще тебе не очень-то и нужен jQuery, чтобы запустить анимацию, CSS это вполне умеет, но да, тебе нужно использовать анимацию от jQuery для слайда в сторону, если хочешь минимизировать свои мучения.

Чтобы легче было сделать переключение бургера на крестик можешь воспользоваться ванилкой JS, и привязав бургер, скажем к ment-toggle--burger, а крест к menu-toggle--times просто переключать их. Привязав это к примеру бэкграунд картинку крестика и бургера.

Вообще лучше сделать анимацию на SVG, или 3 span-а анимировать из бургера в крест, но сдается мне, это сложновато для тебя по твоему вопросу. Тем не менее, мотай на ус.

Comments

[Ruslan]

нужно только вниз при нажатии и потом обратно при повторном нажатии на иконку и чтоб иконка менялась постоянно. Я думал это JQ, если подскажете как все это дело сверстать - буду благодарен)

[Арсений Матыцин]

Ruslan, я как раз дополнил

Answer 2

[Максим]

Я полностью смоделировал ситуацию от json до адаптивного меню : https://codepen.io/topicstarter/pen/ZEbJeME