Задать вопрос
SuperToster
@SuperToster

Как заставить крайние правые пункты меню трансформироваться в выпадающий блок при ресайзе окна?

Привет!
Мб кто встречал пример подобной менюшки, или есть идеи - как реализовать (без примера разметки, чисто в теории):

5b10229422b1a644188466.jpeg

На небольших разрешениях, крайние правые пункты меню превращаются в выпадайку.
  • Вопрос задан
  • 150 просмотров
Подписаться 1 Средний Комментировать
Ответ пользователя Flying К ответам на вопрос (4)
@Flying
Делал как раз такое когда верстал для LDZ, так что можно подглядеть реализацию у них на сайте (самое верхнее меню). В целом думаю что можно обойтись и без JavaScript, просто такой задачи в том проекте не стояло. Сама идея тривиальная:

Есть две копии меню: одна для горизонтального меню другая - для вертикального. Для горизонтального меню используется flexbox с flex-wrap и ограничение высоты в 1 строку с overflow: hidden. Для вертикального - обычный список. Основная задача - при клике на триггер показа вертикального меню взять все пункты меню из горизонтального варианта и либо скопировать их в вертикальное либо перенастроить видимость пунктов вертикального меню в зависимости того "завёрнуты" ли соответствующие пункты горизонтального меню в дополнительные строки.
Ответ написан
Комментировать