Задать вопрос
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 просмотров
2 комментария
Подписаться 4 Простой 2 комментария
Решения вопроса 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; }
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Продуктовый дизайнер в команду дизайн-системы
Точка
До 240 000 ₽
Арт-директор
ЛАНИТ • Москва
До 300 000 ₽
Senior product designer
Сбер • Москва
от 300 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Необходимо сверстать приложение согласно макету Figma используя React
26 апр. 2024, в 22:22
1500 руб./за проект
Написать модуль подключения матрицы Sony к ПЛИС (Verilog)
26 апр. 2024, в 21:30
15000 руб./за проект
8266 f12 требуется сделать ревью и оптимизировать работу
26 апр. 2024, в 20:42
2000 руб./за проект
Ещё заказы