Как компактно задизайнить вертикальную навигацию, если сетка не позволяет?

Question

[Артем Горальский]

Всем привет.
Есть макет сайта с вертикальной навигацией, которая имеет возможность сворачиваться (подписи исчезают, остаются только иконки, сам контейнер становится уже)
Пример http://element.eleme.io/#/en-US/component/menu#collapse

Суть проблемы:
После сворачивания я хочу чтобы навигация занимала как можно меньше места (чтобы обеспечить шире контентную область. важно при просмотре с мобильного или планшета).
Как решить эту проблему? Менять сетку на всех макетах?

Макет с развернутой навигацией и сеткой
Макет со свернутой навигацией и сеткой
Пример компактной навигации
https://dribbble.com/shots/3712350-Adahead-Ad-opti...

Comments

[Нерон Лордов]

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

[tema_sun]

Макет же не по сетке. Зачем она там вообще?

Answer 1

[Евгений Панчишен]

После разговоров с разработчиком пришел к выводу, что макеты с такой разметкой (сайдбар + контентная часть) лучше делать так: сайдбар не входит в сетку, а контентная часть разбивается на 12 колонок (или 8, 6, 4 в зависимости от ширины устройства под который делается макет). Тогда все становится логично. Сайдбар не «съедает» ни одной колонки и может быть любого размера, а контентная часть живет своей разметкой.

Личный пример



Надеюсь, что правильно понял суть вопроса.

Answer 2

[Андрей Верх]

Разбейте на 24, а не 12. Почему вы упёрлись именно в 12 колонок. Разумеется в такие "толстые" колонки, ничего нормально не впишешь.

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

Answer 3

[Апатий Черный]

Выводи поверх контейнера. #elem{ position: fixed; }