Как в мобильной версии сайта, свернуть меню в одну кномпку «меню» и при клике на нее открывалось полное меню?

Question

[FronzZ]

1) Есть аккордеон меню https://codepen.io/man129/pen/GRqVQqe, пункты в нем получились достаточно длинными (10 Пунктов) и при просмотре этого меню например с телефона, меню занимает большую часть экрана.И если для главной страницы можно все так оставить, то для других это не подходит т.к много контента.) Можно ли сделать чтобы за место этих пунктов при просмотре с телефона, была например одна кнопка «Меню» по центру, при клике на которую открывалось само МЕНЮ? (например вот так )? Либо есть какой-нибудь другой, простой и эффективный способ? Не понимаю как это реализовать… Внеся минимальные изменения в код.
Спасибо Вам!)
P.S. Я только учусь поэтому сильно не ругайте...

Comments

[Антон Литвиненко]

За что ж тебя ругать то, касатик? Все знают что в интернете на эту тему пусто, и на сайтах в интернете тоже нельзя подсмотреть

[FronzZ]

Антон Литвиненко, Поэтому и спрашиваю, может кто нибудь знает как это сделать и поможет..

[Антон Литвиненко]

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

[Froggyweb]

ну поищи бургер меню или мобильное меню. злые дядьки врут. В гугле все есть :)

[Юрий Литвиненко]

Это очень просто.

1. Исходное состояние меню:
max-height: 0;
overflow: hidden;
2. Далее скриптом, при нажатии на кнопку, увеличиваете/уменьшаете высоту меню.
3. Добавляете адаптивность, что-бы на десктопной ширине меню было полностью видно.

[FronzZ]

Юрий Литвиненко, Юрий, если Вам не тяжело и не сложно можете показать в codepen в моем примере?

[Юрий Литвиненко]

напишите мне на почту, я вам дам ссылку на свою библиотеку, сделаете по образцу у себя в проекте, и всё.

[Денис Юрьев]

Юрий Литвиненко, не сделает, раз не нагуглил)))

Answer 1

[Данил Шитов]

скрываешь меню на мобилке (с помощью css медиа запросов - загуглишь ), делаешь кнопку для меню, и пишешь скрипт ,что бы при нажатии на кнопку меню открывалось

Answer 2

[Юрий Литвиненко]

https://jsfiddle.net/litdon/79o1bkfg/2/