Можно ли сверстать меню как codepen без js?

Question

[DTX]

Чуть шире:


Возможно ли такое провернуть на чистом CSS?

Мб селекторы модные есть какие, о которых мало кто знает?

Думал покрутить что-нибудь с такой болваночкой..
codepen.io/DTX/pen/LNwxor
Мб тип если item-i не видно в нав, то не прятать его в выпадающей менюшке. Но подходящего селектора придумать не смог

Или с флексбоксом пошаманить? Есть селектор, которым можно получить номер строки элемента в флексе?

Answer 1

[Алексей Николаев]

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

На чистом css даже игры делают, и разного рода калькуляторы. Это к вопросу о возможностях.

Comments

[DTX]

И что же думаете писать в медиазапросах? Или предлагаешь кнопкам фиксированную ширину задать?

[Алексей Николаев]

DTX: прежде всего, правила сокрытия \ показа определенных элементов. Ибо скрывать \ показывать что-либо вручную практически гарантированно придется (например, пункты меню, которые придется дублировать).
А вопросы оформления (ширина и т.п.) можно решить если не при помощи стандартного инструментария, то при помощи флексбокса уж точно.

[DTX]

Алексей Николаев: и как понять, какой элемент нужно скрывать, а какой оставлять?
Мб идейку для js подкинешь, как такое провернуть получше?

[Алексей Николаев]

DTX: логически, смотря что вам нужно скрыть, а что - показать. Реализация данной штуки на css сродни спортивному программированию, и в любом случае нужно думать и экспериментировать.

А на js все очень просто - опять-таки, при определенных ширинах экрана физически перемещаете блоки в dom с места на место. Есть даже готовые решения.