Создание выезжающего меню с помощью CSS Grid

Создание выезжающего меню с помощью CSS Grid

От автора: выезжающий шаблон – классический подход в адаптивной навигации. Когда вьюпорт сужается и не может уместить меню целиком, оно скрывается за пределы экрана и отображается по нажатию на кнопку. Сегодня мы создадим выезжающее меню, которое будет переключаться с помощью CSS (без JS). Для структурирования страницы возьмем нашего хорошего знакомого Grid.

Полноэкранное демо с конечным результатом.

Базовая структура страницы

Начнем с создания стандартной страницы. Создадим примерно следующее:

Создание выезжающего меню с помощью CSS Grid

Стандартная структура страницы. На маленьких вьюпортах все съезжает в одну колонку, на больших aside отображается сбоку. Для ясности тег nav окрашен в синий цвет. Разметка:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Давайте добавим визуальных стилей и правила по сетке.

Создаем сетку

Сначала обернем все структурные элементы в контейнер – это будет Grid контейнер. Я возьму <div class=»container»></div>. Теперь добавим немного базовых стилей для сетки:

В коде выше мы объявляем, что контейнер должен быть display: grid;, иметь одну колонку (необязательно сейчас это добавлять, но для полноты пропишем сейчас). Разделители между ячейками сетки должны быть 10px.

Чтобы все выглядело немного понятнее, добавим парочку визуальных стилей:

Делаем страницу адаптивной

Добавим медиа запрос, чтобы при достижении вьюпортом определенного размера макет менялся (возьмем 600px).

Теперь на больших экранах сетка меняется на id-template-columns: repeat(4, 1fr);, что дает нам четыре колонки одинаковой ширины. Далее необходимо задать ширину всех структурных элементов. Теги header, nav и footer будут занимать все 4 колонки, а section всего три. В оставшуюся колонку автоматически будет помещаться aside.

И наконец, стили для переключения вида меню:

Что мы получили:

Создаем выезжающее меню

Идеальный пример того, как CSS позиционирование может работать со структурными элементами даже в объявленной сетке. Мы захватим наше меню, удалим его из потока документа и спозиционируем за пределами экрана. Остальные элементы сетки будут стоять на своих местах.

Создание выезжающего меню с помощью CSS Grid

Напишем еще один медиа запрос. У нас есть запрос min-width, теперь нам нужно написать стили для max-width. Как только вьюпорт достигнет магического значения 600px, нужно, чтобы меню пряталось за пределы экрана:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Мы использовали position fixed, но вы также можете взять absolute. Зависит все от того, хотите ли вы, чтобы меню прокручивалось вместе со страницей или нет.

В коде вы заметите свойство transition, оно заработает, когда мы добавим переключатель. Мы будем плавно показывать панель меню с помощью transform. Благодарю Rachel Nabors и Joe Zimmerman за то, что напомнили мне, что transform намного лучше с точки зрения производительности для анимации, чем position!

Переключение

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

Добавьте в хедер:

и в nav:

На больших экранах нам не нужна ссылка для открытия меню, поэтому мы спрячем элемент .toggle в нашем медиа запросе min-width:

:target

В ссылках сверху есть идентификатор фрагмента #nav в атрибуте href, и это очень важно. С помощью этих идентификаторов браузер перемещается напрямую к определенным элементам на странице. В нашем примере мы перемещаемся на элемент с id=nav, после чего добавляем этому элементу стили с помощью псевдокласса :target. JS не нужен!

Замечание: идентификатор фрагмента, использованный таким образом, делает так, что каждый клик по ссылке сохраняется в истории браузера. Вашим пользователям это может не понравиться! Спасибо Joe Zimmerman, что указал на это.

Добавьте код ниже в max-width запрос:

И все! Переключатель готов.

Что у нас получилось:

Заключение

Мы закончили! Я свел стили к минимуму, чтобы они не мешали нам. Но вы не стесняйтесь, создайте свой дизайн. Может, вам больше нравится JS переключатель вместо :target, тогда у вас есть все, что нужно. Надеюсь, вам понравился этот небольшой урок по Grid. Следите за новыми уроками!

Автор: Ian Yates

Источник: https://webdesign.tutsplus.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Фреймворк Bootstrap - верстаем адаптивно, просто, быстро!

Получите видеокурс по основам Bootstrap

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (1)

  1. Sergey

    Здравствуйте. В этой статье https://webformyself.com/sozdanie-vyezzhayushhego-menyu-s-pomoshhyu-css-grid/
    мне нужно сделать, чтобы кнопка бокового меню появлялась, но основное меню не исчезало.

    Как это осуществить?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree