a_goralsky
@a_goralsky
Бизнес-аналитик

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

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

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

Макет с развернутой навигацией и сеткой
5b0a76e49f197996010570.pngМакет со свернутой навигацией и сеткой
5b0a73db2154b428729474.pngПример компактной навигации
https://dribbble.com/shots/3712350-Adahead-Ad-opti...
  • Вопрос задан
  • 439 просмотров
Решения вопроса 1
e_panchishen
@e_panchishen
Веб-дизайнер
После разговоров с разработчиком пришел к выводу, что макеты с такой разметкой (сайдбар + контентная часть) лучше делать так: сайдбар не входит в сетку, а контентная часть разбивается на 12 колонок (или 8, 6, 4 в зависимости от ширины устройства под который делается макет). Тогда все становится логично. Сайдбар не «съедает» ни одной колонки и может быть любого размера, а контентная часть живет своей разметкой.

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

5b0b944e2cf44373582280.png

Надеюсь, что правильно понял суть вопроса.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
sadisme
@sadisme
font-size:30rem
Разбейте на 24, а не 12. Почему вы упёрлись именно в 12 колонок. Разумеется в такие "толстые" колонки, ничего нормально не впишешь.

Ну и судя по макету, он вообще на сетке не особо то и завязан. Элементы спокойно в gutter попадают, чего быть не должно.
Ответ написан
Комментировать
nor1m
@nor1m
web-developer
Выводи поверх контейнера. #elem{ position: fixed; }
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы