Создание отзывчивой боковой панели навигации

0
299

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

Создание отзывчивой панели навигации
Демо Скачать шаблон

Разработка структуры

  1. Структура HTML-документа включает в себя 2 основных элемента:
    <header> — тег, содержащий лого веб-сайта, а также форму поиска, навигационных триггер (.cd-nav-trigger – только для мобильных платформ) и верхнюю навигационную панель.
  2. <main> — элемент, в котором находится основное содержание страницы (div.content-wrapper) и боковая панель навигации (nav.cd-side-nav).

В базовой структуре HTML элементы .cd-search и .cd-top-nav находятся внутри тега <header>, а на мобильных устройства они перемещены внутрь элемента .cd-side-nav.

Добавление стиля

Мы разработали 3 варианта боковой панели в зависимости от размеров экрана используемого устройства:

  1. На мобильных платформах боковая панель имеет ширину 100%, при этом она по умолчанию скрыта и находится в абсолютном положении. Когда пользователь нажатием активизирует .cd-nav-trigger, боковая панель становится видимой.
  2. На средних устройствах по умолчанию отображается уменьшенная версия боковой навигации, которая находится в относительном положении и имеет фиксированную ширину 110px и обтекание по левому краю.
  3. На больших устройствах с шириной более 1170px предусмотрен расширенный вариант боковой панели.

Обработка событий

Для малых устройств с шириной до 1170px мы перемещаем элементы .cd-search и .cd-top-nav внутрь .cd-side-nav.

Кроме того, нами был интегрирован плагин jQuery-menu-aim, который идентифицирует пользователей, пытающихся воспользоваться боковой панелью навигации и перейти в подменю содержимого (только для ПК).

ОСТАВЬТЕ ОТВЕТ

Пожалуйста оставьте комментарий!
Введите ваше имя