Створення виїжджає меню за допомогою CSS Grid

34

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

Повноекранне демо з кінцевим результатом.

Базова структура сторінки

Почнемо з створення стандартної сторінки. Створимо приблизно наступне:

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

Стандартна структура сторінки. На маленьких вьюпортах всі з’їжджає в одну колонку, на великих aside відображається збоку. Для ясності тег nav пофарбований у синій колір. Розмітка:

Header

  • Item 1
  • Item 2
  • Item 3

Article

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.

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.

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.

Aside

Footer

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

Створюємо сітку

Спочатку обернем всі структурні елементи контейнер – це буде Grid контейнер. Я візьму

. Тепер додамо трохи базових стилів для сітки:

.container {
display: grid;
grid-template-columns: 1fr;
grid-gap: 10px;
}

У коді вище ми оголошуємо, що контейнер повинен бути display: grid;, мати одну колонку (необов’язково зараз це додавати, але для повноти пропишемо зараз). Роздільники між осередками сітки повинні бути 10px.

Щоб все виглядало трохи зрозуміліше, додамо кілька візуальних стилів:

.container > * {
color: #353535;
font-size: 1.2 em;
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).

@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.

І нарешті, стилі для перемикання виду меню:

/* стилі меню */
nav ul li {
display: inline-block;
padding: 0 0 0 20px;
}

Що ми отримали:

Створюємо виїжджає меню

Ідеальний приклад того, як CSS позиціонування може працювати зі структурними елементами навіть в оголошеній сітці. Ми захопимо наше меню, видалимо його з потоку документа і спозиционируем за межами екрану. Інші елементи сітки будуть стояти на своїх місцях.

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

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

@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!

Перемикання

Ми сховали наше меню, тепер треба створити перемикач, щоб повернути його назад, коли це буде потрібно. Додамо посилання на виклик меню і на закриття.

Додайте в хедер:

open

і в nav:

close

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

.toggle {
display: none;
}

:target

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

Зауваження: ідентифікатор фрагмента, використаний таким чином, робить так, що кожен клік по посиланню зберігається в історії браузера. Користувачам це може не сподобатися! Спасибі Joe Zimmerman, що вказав на це.

Додайте код нижче max-width запит:

#nav:target {
transform: translateX(340px);
}

І все! Перемикач готовий.

Що у нас вийшло:

Висновок

Ми закінчили! Я звів стилі до мінімуму, щоб вони не заважали нам. Але ви не соромтеся, створіть свій дизайн. Може, вам більше подобається JS перемикач замість :target, тоді у вас є все, що потрібно. Сподіваюся, вам сподобався цей невеликий урок за Grid. Слідкуйте за новими уроками!