Как убрать избыточные пункты меню в подменю?

Question

[Арсений Соколов]

Искал в интернете, не смог найти, но такую тему уже неоднократно встречал, на некоторых сайтах.

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

Вот как это реализовать?

Вот чтобы на этом примере меню было не 2 строки и не в 3?

https://jsfiddle.net/arsenbespalov/4296jmn8/

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

Answer 1

[AlexRas]

Как то так с помощью js https://jsfiddle.net/4296jmn8/8/

Answer 2

[Justin Bieber]

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

Comments

[Арсений Соколов]

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

А как с помощью media объяснить такое поведение?