Вертикальное выпадающий каталог на css, по типу как на dns, как довести до ума?

Question

[Антон Вебсайтовский]

Всем привет.
Решил на ставить громоздкие примеры мега меню, так как пришлось бы вырезать кучу ненужного, взял за основу одно меню которое давно использую, убрав лишнее и обновив.

В меню небольшая фишка, при наведении, все на сайте затемняется, а меню нет.

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


Так же каталог идет с иконками, перед категорией, типа направление ну как на dns, ну и стрелка где есть подкатегории, стрелка и иконка это все svg.

Что я сделал, когда наводим на каталог, вылезает блок, где идут категории и подкатегории по типу как на dns сайте.
Пытаюсь довести до ума и сделать адаптивным.

Подменю формируют следующим образом, делю на 3 блока в линию через css, далее при адаптации, планирую сжимать именять допустим на 2 блока в линию, и так до 1, а потом все в аккордеон делать.

-ms-flex: 0 0 calc(33.333333% - 20px);
  flex: 0 0 calc(33.333333% - 20px);
  margin: 0 0 10px 20px;

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

У меня вышло вот так сделать, но видно что криво:


Хочу как-то так сделать, ровно:


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

----------------------------------------------

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

----------------------------------------------

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

----------------------------------------------

Как svg подгрузить на jsfiddle, я пытался, но чет их не видно.

Загрузил каталог сюда, рабочий пример:
https://jsfiddle.net/0jmto2hx/3/

Answer 1

[Elena Fire]

1. Убрать пустые места. Для этого содержимое вложенного меню не должно строиться в блоках или по grid-сетке. И у вложенных категорий не должно быть установленных высот. Используйте flex - позволит автоматически выстраивать содержимое.
2. Закрепить меню вверху страницы. Для меню второго уровня выставляется position: fixed
3. Аккордеон в меню. JS вам в помощь, почитайте о механике аккордеонов. Можно и CSS обойтись, но только с radio кнопками и их позиционированием.
4. Подсветка активного раздела. :active - у активного раздела основного меню и прописываете поведение блока.

Comments

[Антон Вебсайтовский]

1) насчет флексов, да я понял что это он так делает, что остаются пустые, тогда как мне сделать корректно, сказать легко что мол лишнее, это я сам знаю, но мне надо на что-то заменить, чтобы в ряд три блока было и при медиа, уменьшать, 2 блока, потом 1.

2) решил так не делать, ибо каталог длинный, и придется крутить вверх, чтоб начало блока с категориями увидеть.

3) факт что без js сделать можно, надо при медиа запросе ловить и переделывать стили чтоб так вышло, но пока не могу понять как, ибо не делал. Радио кнопки, что за бред )

4) надо было пример привести.

У вас ответы такие как бы так сказать, то что я и сам знал, кроме 2), вы бы примеры привели на моем примере. - тогда будет понятно, что все эти 4 фантазии то как написали, возможно придется по другому делать.

[Elena Fire]

Антон Вебсайтовский, а где верстка ЗДЕСЬ? где стили ЗДЕСЬ? Хорошо, что вы знаете многое, так же рекомендую понять, что ЗДЕСЬ ответ можно написать на ОДИН небольшой фрагмент КОНКРЕТНОЙ проблемы, четко сформулированной и подкрепленной кодом. В противном случае (как раз этот вариант у вас сейчас), и ответы будут оч не конкретными. И выделять текст - лишнее. Пишите вопросы корректно, будут и ответы корректные.

[Антон Вебсайтовский]

Elena Fire, так же добавил, дублирую https://jsfiddle.net/0jmto2hx/3/