Адаптивное меню без дублирования самого меню?

Question

[Имя Фамилия]

Есть меню 15 пунктов

при ширине экрана например боле 700px показывается: 5 пунктов и пункт "Еще" при нажатии на который выпадает остальные 10 пунктов

если ширину экрана сократить до 400px появляется кнопка меню, при нажатии выпадают все 15 пунктов

но в таком случает придется в коде страницы дублировать меню два раза. Первый раз для первого варианта, и второй раз для второго варианта. И соответственно одно из меню скрывается display:none

Есть ли способ сделать одно меню и его показать в этих двух вариантах, в зависимости от ширины экрана?

Answer 1

[Stalker_RED]

Способы есть конечно.
Можно даже не с двумя брейкпоинтами, а с проверками при любой ширине.
https://jsfiddle.net/a7qxrdpu/1

Comments

[Имя Фамилия]

Спасибо!