Меню имеет два состояния. Во втором больше пунктов и иной порядок. Куда копать?

Question

[Руслан Галиев]

Есть меню из 16 пунктов, в раскрытом виде отображаются все:



В свернутом только 7, и не в том же порядке:



В какую сторону двигаться, чтобы реализовать одно меню (одну сущность, скажем так), которое будет отображаться в обоих выше приведенных состояниях?

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

Answer 1

[ThunderCat]

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

Comments

[Руслан Галиев]

Выход простой, но не идеальный. Не хотелось бы дублировать ссылки.

[ThunderCat]

Руслан Галиев: тут у вас вариантов всего 2, либо 2 меню, одно в скрытом состоянии, другое видимое, либо js манипуляции с пунктами. Оба решения требуют яваскриптовых манипуляций, соответственно как минимум один вариант меню будет не виден поисковикам. Но первый вариант проще в реализации.

Answer 2

[Дмитрий]

Да куда угодно копать - задача тривиальная. Задайте классы пунктам, которые видны в свернутом состоянии, остальные скройте и покажите только в полном состоянии. Для изменения порядка используйте css order и flex

Comments

[Руслан Галиев]

Если можно копать куда угодно, куда еще копнуть, кроме flex?

[Дмитрий]

Руслан Галиев: js, но зачем...

[Дмитрий]

Руслан Галиев: если совсем извратиться, то можно меню аяксом получать с сервера, а там уже и порядок, и исключенные пункты

Answer 3

[Givandos]

JS, Flex.
Можно еще немного поизвращаться и поиграть с

.menu_in ul {
  column-count: 4;
}

Тогда визуально меню будет таким, как у вас на картинке, но при этом в коде направление пунктов будет сверху вниз по колонкам.
Минус - нужно следить на шириной пунктов меню, прочее. Но попробовать стоит, возможно такой вариант вас устроит. Зато с изменением порядка не нужно играться.
Ну и в свернутом виде просто "пропускать" те пункты, которые должны быть невидимыми.