Повноекранне демо з кінцевим результатом.
Базова структура сторінки
Почнемо зі створення стандартної сторінки. Створимо приблизно наступне:
Стандартна структура сторінки. На маленьких вьюпортах все з'їжджає в одну колонку, на великих aside відображається збоку. Для ясності тег nav забарвлений в синій колір. розмітка:
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Давайте додамо візуальних стилів і правила по сітці.
створюємо сітку
Спочатку обгорнемо всі структурні елементи в контейнер - це буде Grid контейнер. Я візьму
. Тепер додамо трохи базових стилів для сітки:У коді вище ми оголошуємо, що контейнер повинен бути display: grid ;, мати одну колонку (необов'язково зараз це додавати, але для повноти пропишемо зараз). Роздільники між осередками сітки повинні бути 10px.
Щоб усе виглядало трохи зрозуміліше, додамо парочку візуальних стилів:
Робимо сторінку адаптивної
Додамо медіа запит, щоб при досягненні вьюпорте певного розміру макет змінювався (візьмемо 600px).
Тепер на великих екранах сітка змінюється на id-template-columns: repeat (4, 1fr) ;, що дає нам чотири колонки однакової ширини. Далі необхідно задати ширину всіх структурних елементів. Теги header, nav і footer будуть займати все 4 колонки, а section всього три. У решту колонку автоматично буде міститися aside.
І нарешті, стилі для перемикання виду меню:
Що ми отримали:
Створюємо виїжджає меню
Ідеальний приклад того, як CSS позиціювання може працювати зі структурними елементами навіть в оголошеної сітці. Ми захопимо наше меню, видалимо його з потоку документа і спозіціоніруем за межами екрану. Інші елементи сітки будуть стояти на своїх місцях.
Напишемо ще один медіа запит. У нас є запит min-width, тепер нам потрібно написати стилі для max-width. Як тільки вьюпорте досягне магічного значення 600px, потрібно, щоб меню ховалося за межі екрану:
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Ми задали меню фіксовану ширину і помістили його зліва так, щоб воно повністю зникло.
Ми використовували position fixed, але ви також можете взяти absolute. Залежить все від того, чи хочете ви, щоб меню прокручувалося разом зі сторінкою чи ні.
У коді ви помітите властивість transition, воно запрацює, коли ми додамо перемикач. Ми будемо плавно показувати панель меню за допомогою transform. Дякую Rachel Nabors і Joe Zimmerman за те, що нагадали мені, що transform набагато краще з точки зору продуктивності для анімації, ніж position!
перемикання
Ми сховали наше меню, тепер потрібно створити перемикач, щоб повернути його назад, коли це буде потрібно. Додамо посилання на виклик меню і на закриття.
Додайте в хедер:
Зауваження: ідентифікатор фрагмента, використаний таким чином, робить так, що кожен клік по посиланню зберігається в історії браузера. Вашим користувачам це може не сподобатися! Спасибі Joe Zimmerman, що вказав на це.
Додайте код нижче в max-width запит:
І все! Перемикач готовий.
Що у нас вийшло:
висновок
Ми закінчили! Я звів стилі до мінімуму, щоб вони не заважали нам. Але ви не соромтеся, створіть свій дизайн. Може, вам більше подобається JS перемикач замість: target, тоді у вас є все, що потрібно. Сподіваюся, вам сподобався цей невеликий урок по Grid. Слідкуйте за новими уроками!
Редакція: Команда webformyself.
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі
