Висувається ліве меню на чистому css

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

See the Pen Awnjk 7661

Почнемо з HTML розмітки

Це основна структура html розмітки:

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

    Основні моменти розмітки:
  • Розділ навігації йде першим в розмітці, тому що всі інші елементи знаходяться за меню. Ви можете використовувати будь-які HTML теги які ви хочете для побудови меню. Тут я використовую невпорядкований список.
  • Кнопка управління меню це чекбокс і label. Зазвичай label йде перед чекбоксів або обгорнутий навколо нього. У нашому випадку чекбокс повинен йти безпосередньо перед label. Ми побачимо чому це так коли після додавання CSS.
  • Інша частина нашого сайту повинна бути укладена в унікальному div. Це пояснюється тим, що, коли ми відкриваємо меню, все інше зміщується трохи правіше, щоб показати приховані елементи навігації.

    • Тепер, коли ми отримали структуру HTML, ми можемо почати все красиво оформляти.

    CSS для елементів меню

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

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

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

    CSS для блоку з контентом сайту

    Для початку, давайте переконався, що контент сайту повністю закриває наше меню. Ви можете додати кілька абзаців РибаТекста в .site-wrap, якщо ви ще не додали змісту.

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

    CSS для кнопки меню

    Тепер ми додамо стилі, які додадуть нашим чекбокси і label звичний всім вид, до якого всі звикли.

    Перш за все, давайте скажемо неправди чекбокс.

    Налаштування displa: block важливі. За замовчуванням input елементи відображатися як inline-block. так що ми повинні встановити його як block. щоб ми могли встановити ширину і висоту до нуля. Якщо ми використовували б display: none або visiblity: hidden то відключили б взаємодію клавіатуру з кнопкою меню, так що ми уникли цього.

    Тепер давайте стилізуємо елемент:

    По-перше, ми встановимо position: fixed; тепер label буде на фіксованому місці під час прокрутки сторінки. top і left властивості визначають, як далеко від краю буде знаходиться кнопка. Ми також встановимо z-index що б кнопка була вище .site-wrap.

    Далі, ми додаємо значок для кнопки.

    Я використовував вбудований SVG як фонове зображення, але ви можете використовувати будь-який значок.

    Зверніть увагу, я також включив cursor: pointer; для візуального відображення інтерактивності кнопки.

    CSS для анімації

    Тепер, коли наші стилі меню і кнопки готові, давайте додамо кілька рядків CSS, які анімуйте все це.

    Другий блок гарантує, що контент сайту зміститься вправо на 200 пікселів. Я також додав тінь до блоку контенту, щоб надати йому додатковий візуальний вигляд того, що вона смішила.

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

    site-wrap значення left)

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

    селектор для .site-wrap, коли .nav-trigger відзначений.

    І останнє, приховати скрол по горизонталі.

    готовий варіант

    See the Pen Awnjk 7661

    Тепер, коли ви знаєте, як це робиться, можна використовувати різні варіації і настройка, пробуйте експериментуйте.