Приховане меню на чистому css

Ось демо-приклад на сайті CodePen, що показує кінцевий результат:

Почнемо з HTML

Розмітка для прихованого меню буде трохи відрізнятися від варіанту для стандартного меню навігації. Замість того щоб помістити меню всередині шапки сайту (header), ми помістимо його відразу після відкриваючого тега body. Базова структура виглядає так:

Як бачите, розмітка нашого сайту складається з трьох основних елементів: навігація, Галочка (checkbox) і парний тег label, а також безпосередньо контент сайту. Тут слід зазначити кілька моментів:

Розмітка навігації розміщується в коді в першу чергу, тому що навігації знаходиться «позаду» всіх інших елементів сайту. Для створення навігації ви можете використовувати будь-які HTML-теги. В даному випадку я використовую звичний ненумерований список.

Тригером для висунення нашого меню послужить тег input з типом checkbox і тег label. Зазвичай тег label розташовується перед тегом input або тег input обертається тегом label. Але в даному випадку тег input повинен йти безпосередньо перед тегом label. І далі, при додаванні CSS-стилів, ми побачимо чому.

Всі інші елементи сайту повинні бути обгорнуті в окремий тег div. Це необхідно зробити для того, щоб при відкритті меню все інше вміст з'їжджаються трохи за межі екрану, щоб показати приховані елементи навігації.

Тепер, коли у нас є базова HTML структура, ми можемо зайнятися зовнішнім виглядом нашого меню!

CSS-стилі для пунктів меню

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

Далі, я додав трохи стилів для того щоб наша навігація виглядала привабливіше (фонові кольори, межі, градієнти і т.д.). Не буду наводити тут цей код, але ви можете подивитися, як саме я це зробив, в демо-прикладі. Тепер у нас є кілька симпатичних пунктів меню, але в цілому це зовсім не здорово, тому що наш контент розташувався прямо на нашому меню. Давайте додамо стилів, щоб заховати меню до потрібного моменту.

CSS-стилі для «обгортки» сайту

Для початку, давайте переконаємося в тому, що вміст сайту повністю приховує наше меню. На цьому етапі можна додати кілька абзаців з «lorem ipsum» до нашого елементу з класом .site-wrap, якщо ви ще не додали жодного контенту.

Варто зауважити, що ми зобов'язані вказати фон для елементу з класом .site-wrap, інакше меню буде переглядати крізь контент. Ви можете, звичайно, налаштувати фон, який самі захочете. Особисто я використовував наступний:

CSS-стилі для тригера меню

Наступним кроком буде додавання стилів для зміни зовнішнього вигляду тригера меню зі звичайного чекбокса на класичну іконку «гамбургер», яку ми всі знаємо і любимо. Перш за все, давайте сховаємо сам чекбокс.

Отже, ми ховаємо чекбокс, використовуючи властивість clip, яке вимагає застосування властивості position: absolute для заданого елемента. Тепер ми задаємо стилі для елемента label:

Я використовував як фонове зображення вбудований елемент SVG. але ви можете використовувати будь-яку іншу іконку. включаючи використання псевдо-елементів: before та: after, щоб переробити іконку «гамбургер» на чистому CSS. Зверніть увагу, що я також додав властивість cursor: pointer ;, щоб візуально виділити іконку при наведенні.

CSS-стилі, щоб тригер став активним

Тепер, коли задано оформлення для нашого меню, «обгортки» сайту і тригера, давайте додамо ще кілька рядків CSS, щоб все остаточно запрацювало.

Друга частина з вищенаведеного блоку зі стилями гарантує нам те, що «обгортка» сайту разом з вмістом буде відсунута на 200 пікселів. Я також додав тінь (властивість box-shadow) для «обгортки» сайту, що додасть додатковий відчуття того, що вона знаходиться зверху меню.

Перший селектор (.nav-trigger: checked + label) контролює розташування тригера при відкритті меню. Вам потрібно буде додати число, яке ми використовували раніше для label [for = "nav-trigger"], до того значення, яке відповідає за те, на яку відстань «обгортка» сайту буде відсуватися. В даному випадку це: 15px + 200px = 215px.

Ось коли стає важливим порядок проходження елементів тригера в коді. Другий селектор використовує символ

для управління родинними елементами, щоб вказати на елемент з класом .site-wrap, коли елемент з класом .nav-trigger буде активним. Порядок проходження в коді тега input з типом checkbox тут не так важливий.

Однак, ми повинні вказати і на елемент з класом .site-wrap і на наш канал label, грунтуючись на тому, буде наш чекбокс активним чи ні. Для цього, ми використовуємо + (селектор сусідніх елементів), щоб вказати на елемент label, який слідує за активним чекбоксів. Якби ми спочатку вказали тег label, тоді у нас би не було ніякої можливості пересувати його разом з «обгорткою» сайту при активації тригера.

Як завершальний штрих ми можемо додати CSS-перехід (transition) і для тригера і для «обгортки» сайту, щоб відкриття нашого меню супроводжувалося плавною анімацією. Тільки переконайтеся в тому, що ви вказали в свій варіанті необхідні Вендорний префікси або використовували щось на зразок плагіна Autoprefixer.

Кінцевий результат

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

Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі