Как сделать правильное меню?

Question

[Дмитрий Христоев]

Привет всем! Есть страничка dartc.info/pn/compare.html

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

Answer 1

[htmleater]

Проще и надёжнее всего сделать это средствами flexbox + поиграться свойствами text-overflow.
Хотя я совсем не уверен, что решение с обрезанием текстов будет правильным. Ну, к примеру, какой толк от меню будет, если юзер на экране увидит: {icon} Список... + {checkbox} показы... + В нача...?
К тому же, если следовать логике, то в селекте сортировки также нужна иконка, иначе он не воспринимается самостоятельным пунктом меню.
В качестве здоровой критики позволю себе сделать замечание: в вашей вёрстке нарушено одно из базовых правил построения интерфейса - отсутствие группировки в меню согласно весу и предназначению пунктов.
Т.е. у вас есть три пункта, которые действительно необходимы для сравнения (Список, фильтр, Сортировка). Абсолютно непонятно каким образом к этой группе примкнул Делёж ссылками, да и наличие в строке меню ссылки на статью тоже не бесспорен и даже выключка вправо дела не спасает.

Comments

[Дмитрий Христоев]

спасибо за замечания, это непонятно верстальщику, но понятно дизайнеру и заказчику, а это для них главное.
Здесь минимум 980px, вот тут и головная боль, что нужно засунуть то, что на 1280 и более смотрится нормально. Спасибо, попробую flexbox, интересная конечно мыслю, проблема только в ие10, он важен.

[htmleater]

ИЕ 10 понимает flexbox с префиксом ~ms, для 9 пишется стиль с применением display:table, а для меню достаточно всего лишь inline и тогда меню ведёт себя предсказуемо.
В принципе, разница в 300 пикс не такая уж и большая. В этом случае достаточно элементам меню задать ширину в vw + прописать пару media с величиной шрифта и отступами и можно будет впихнуть.

[Дмитрий Христоев]

htmleater: это было бы проще, если набор элементов был заранее известен. В этом то и проблема, количество неизвестно, таких страниц около 20, на каждой может быть куча всего, от длинных чекбоксов до сортировок, заказчик сам не знает, что и как должно быть.

[htmleater]

Дмитрий Христоев: Ну тогда тут очевидного решения нет.