От автора: выезжающий шаблон – классический подход в адаптивной навигации. Когда вьюпорт сужается и не может уместить меню целиком, оно скрывается за пределы экрана и отображается по нажатию на кнопку. Сегодня мы создадим выезжающее меню, которое будет переключаться с помощью CSS (без JS). Для структурирования страницы возьмем нашего хорошего знакомого Grid.
Полноэкранное демо с конечным результатом.
Базовая структура страницы
Начнем с создания стандартной страницы. Создадим примерно следующее:
Стандартная структура страницы. На маленьких вьюпортах все съезжает в одну колонку, на больших aside отображается сбоку. Для ясности тег nav окрашен в синий цвет. Разметка:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<header role="banner"> <h1>Header</h1> </header> <nav id="nav" role="navigation"> <ul> <li> <a href="#">Item 1</a> </li> <li> <a href="#">Item 2</a> </li> <li> <a href="#">Item 3</a> </li> </ul> </nav> <section role="main"> <article> <h2>Article</h2> <p>Curabitur orci lacus, auctor ut facilisis nec, ultricies quis nibh. Phasellus id diam sollicitudin, malesuada turpis id, gravida erat. Maecenas placerat elit vel hendrerit convallis. Sed in mauris ut justo vulputate viverra feugiat ac dui. Fusce feugiat arcu in vehicula vehicula. Donec varius justo at nulla aliquet volutpat.</p> <p>Ut id rutrum eros. Nulla tristique, magna et mattis vulputate, mi eros suscipit turpis, nec bibendum turpis nunc feugiat sapien. Nunc arcu est, lacinia id diam quis, sagittis euismod neque. Nullam fringilla velit sed porta gravida. Proin eu vulputate libero. Ut a lacinia enim. Etiam venenatis mauris et orci tempor congue. Sed tempor eros et ultricies congue. Aenean sed efficitur orci. Nulla vel tempus mi.</p> <p>Ut cursus suscipit augue, id sagittis nibh faucibus eget. Etiam suscipit ipsum eu augue ultricies, at rhoncus mi faucibus. In et tellus vitae leo scelerisque fringilla nec at nunc.</p> </article> </section> <aside> <h3>Aside</h3> </aside> <footer> <h3>Footer</h3> </footer> |
Давайте добавим визуальных стилей и правила по сетке.
Создаем сетку
Сначала обернем все структурные элементы в контейнер – это будет Grid контейнер. Я возьму <div class=»container»></div>. Теперь добавим немного базовых стилей для сетки:
|
1 2 3 4 5 |
.container { display: grid; grid-template-columns: 1fr; grid-gap: 10px; } |
В коде выше мы объявляем, что контейнер должен быть display: grid;, иметь одну колонку (необязательно сейчас это добавлять, но для полноты пропишем сейчас). Разделители между ячейками сетки должны быть 10px.
Чтобы все выглядело немного понятнее, добавим парочку визуальных стилей:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
.container > * { color: #353535; font-size: 1.2em; line-height: 1.5; padding: 20px; background: #d0cfc5; } .container nav { background: #136fd2; } nav ul { list-style: none; margin: 0; padding: 0; } nav a { color: #d0cfc5 } nav a:hover { text-decoration: none; } |
Делаем страницу адаптивной
Добавим медиа запрос, чтобы при достижении вьюпортом определенного размера макет менялся (возьмем 600px).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
@media only screen and (min-width: 600px) { /* grid */ .container { grid-template-columns: repeat(4, 1fr); } /* стили элементов */ .container header, .container nav, .container footer { grid-column: span 4; } .container section { grid-column: span 3; } } |
Теперь на больших экранах сетка меняется на id-template-columns: repeat(4, 1fr);, что дает нам четыре колонки одинаковой ширины. Далее необходимо задать ширину всех структурных элементов. Теги header, nav и footer будут занимать все 4 колонки, а section всего три. В оставшуюся колонку автоматически будет помещаться aside.
И наконец, стили для переключения вида меню:
|
1 2 3 4 5 |
/* стили меню */ nav ul li { display: inline-block; padding: 0 20px 0 0; } |
Что мы получили:
Создаем выезжающее меню
Идеальный пример того, как CSS позиционирование может работать со структурными элементами даже в объявленной сетке. Мы захватим наше меню, удалим его из потока документа и спозиционируем за пределами экрана. Остальные элементы сетки будут стоять на своих местах.
Напишем еще один медиа запрос. У нас есть запрос min-width, теперь нам нужно написать стили для max-width. Как только вьюпорт достигнет магического значения 600px, нужно, чтобы меню пряталось за пределы экрана:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
@media only screen and (max-width: 599px) { #nav { position: fixed; /* или возьмите `absolute`, все зависит от желаемого результата */ top: 0; bottom: 0; width: 300px; left: -340px; transition: transform .3s ease-in-out; } } |
Мы задали меню фиксированную ширину и поместили его слева так, чтобы оно полностью скрылось.
Мы использовали position fixed, но вы также можете взять absolute. Зависит все от того, хотите ли вы, чтобы меню прокручивалось вместе со страницей или нет.
В коде вы заметите свойство transition, оно заработает, когда мы добавим переключатель. Мы будем плавно показывать панель меню с помощью transform. Благодарю Rachel Nabors и Joe Zimmerman за то, что напомнили мне, что transform намного лучше с точки зрения производительности для анимации, чем position!
Переключение
Мы спрятали наше меню, теперь нужно создать переключатель, чтобы вернуть его обратно, когда это будет нужно. Добавим ссылку на вызов меню и на закрытие.
Добавьте в хедер:
|
1 |
<a class="toggle open" href="#nav">open</a> |
и в nav:
|
1 2 |
<a class="toggle close" href="#">close</a> <!-- можете также использовать “×” --> |
На больших экранах нам не нужна ссылка для открытия меню, поэтому мы спрячем элемент .toggle в нашем медиа запросе min-width:
|
1 2 3 |
.toggle { display: none; } |
:target
В ссылках сверху есть идентификатор фрагмента #nav в атрибуте href, и это очень важно. С помощью этих идентификаторов браузер перемещается напрямую к определенным элементам на странице. В нашем примере мы перемещаемся на элемент с id=nav, после чего добавляем этому элементу стили с помощью псевдокласса :target. JS не нужен!
Замечание: идентификатор фрагмента, использованный таким образом, делает так, что каждый клик по ссылке сохраняется в истории браузера. Вашим пользователям это может не понравиться! Спасибо Joe Zimmerman, что указал на это.
Добавьте код ниже в max-width запрос:
|
1 2 3 |
#nav:target { transform: translateX(340px); } |
И все! Переключатель готов.
Что у нас получилось:
Заключение
Мы закончили! Я свел стили к минимуму, чтобы они не мешали нам. Но вы не стесняйтесь, создайте свой дизайн. Может, вам больше нравится JS переключатель вместо :target, тогда у вас есть все, что нужно. Надеюсь, вам понравился этот небольшой урок по Grid. Следите за новыми уроками!
Автор: Ian Yates
Источник: //webdesign.tutsplus.com/
Редакция: Команда webformyself.
Комментарии (1)