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

Question

[SuperToster]

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



На небольших разрешениях, крайние правые пункты меню превращаются в выпадайку.

Answer 1

[Сергей delphinpro]

Я писал собственное решение, это не сложно, в принципе.
Но есть и готовые jQuery плагины, например этот — 352media.github.io/flexMenu

В частных случаях можно обойтись без javascript.
Под частными случаями я подразумеваю меню, которое не будет часто изменяться, а при изменениях всегда есть возможность привлечь верстальщика для правок.
Суть проста — хардкодим медиазапросами.

Структура примерно такая

<ul>
  <li class="more">...</li>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
</ul>

.more изначально скрыт, при уменьшении ширины ставим брикпойнт, показываем .more абсолютом в конце меню, и также абсолютами позиционируем последние не помещающиеся пункты в столбик.
Эти пункты делаем скрытми и показываем их правилом ul:hover > li { display: block}
При большем уменьшении ширины, всё больше пунктов позиционируем в столбик.

Да, это не по феншую. Зато просто и работает. В определённых случаях может быть простым и быстрым решением проблемы.

Comments

[SuperToster]

Большое спасибо за пример, пойду ковырять, что там и как устроено : )

[Сергей delphinpro]

SuperToster, Самая простая реализация:

ul {h50px;fw:w;ov:h;}

Джаваскрипт не рассчитывает ширину контейнера и пунктов, а просто смотрит, какие пункты сместились на вторую строку. Чекать это можно по offsettop, он будет отличаться от первого пункта. Конечно, overflow:hidden привносит свои заморочки. но тут уж смотреть по ситуации.

Answer 2

[alexalexes]

Если чисто в теории, то как обычно - JS. Подписываем на событие resize документа функцию, которая будет отслеживать размер контейнера меню и пересчитывать суммарную длину блоков пунктов меню вместе с отступами и прятать/выносить их в/из особого контейнера в конце списка, либо прятать этот контейнер, если все пункты вмещаются в меню.

Comments

[SuperToster]

alexalexes Ахх, так не хочется доверять ресайз js : ) (хотя это субъективная неприязнь), ну и хочется чего то элегантного : )
flex-wrap: wrap;
justify-content: flex-end;

Буду пытаться, если что то изобрету, добавлю свой вариант к вопросу.

Большое спасибо за ответ!

[alexalexes]

Ну, допустим, ellipsis вы сделаете в css. А как наполнять выпадающий список будете?
Если не на resize так на click по выпадающ. списку нужна будет та же самая реализация функции.

Answer 3

[Flying]

Делал как раз такое когда верстал для LDZ, так что можно подглядеть реализацию у них на сайте (самое верхнее меню). В целом думаю что можно обойтись и без JavaScript, просто такой задачи в том проекте не стояло. Сама идея тривиальная:

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