Висуваються бічне меню на чистому CSS

71

Бічні меню, що висуваються по кліку, останнім часом широко використовуються розробниками сайтів. Найвідоміше, на даний момент, це звичайно ж меню навігації, упаковане під кнопки в стилі «гамбургер». Напевно кожен з вас хоча б раз зустрічав в інтернеті сайт, на якому збоку, праворуч або ліворуч, красується кнопа такого виду: ? , при натисканні на яку з’являється(висувається) панелька з вертикальним меню.

Існує маса готових рішень для створення таких панелей з допомогою jQuery, окремі плагіни та модулі для різних систем управління сайтом.
Це все дуже навіть добре, але чи можна, для реалізації бічних слайд-панелей обійтися виключно засобами CSS? Звичайно можна! Але обережно ))), з оглядкою на те, що не всі браузери однаково добре підтримують сучасні властивості CSS3.

Не так давно, «видав на-гора» рішення і приклад роботи панелі висувається зверху. Один з перших коментарів був таким: «давайте її в бік перемістимо…». Чому-б і ні? Давайте)).

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

Дивитися Демо

HTML-Розмітка

Почнемо розбір з перемикача панелі, в якості якого використовуємо стандартний прапорець (checkbox):


Маємо чекбокс у верхній частині документа, краще відразу після тега . Прописуємо атрибут hidden, прямо вказуючи стан «прихований» у даного елемента, а так само надамо унікальний ідентифікатор id=”nav-toggle” наприклад, для зв’язки з атрибутом for тега , який ми оформимо і будемо використовувати у вигляді кнопки перемикання панелі.

Як обгортки вмісту бічній панелі використовував тег з певним класом class=”nav”, так як Internet Explorer до версії 8.0 включно ігнорує цей тег, ви можете використовувати звичний

.
Всередині базового контейнера розміщуємо потрібне нам вміст.
В першу чергу пропишемо мітку (тег ) сформовану в css у вигляді тієї самої «кнопки-гамбургер», з допомогою якої встановимо зв’язок з прихованим прапорець checkbox. Для цього обов’язково, ім’я атрибута for повинно відповідати id чекбокса. Порожній атрибут onclick використовуємо для виправлення бага в iOS < 6.0


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

<h2 class="logo">
<a href="//dbmast.ru/">DBmast.ru</a>
</h2>

DBmast.ru

Далі, так як ми визначилися, що робимо саме меню навігації, прописуємо ненумерованний список

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

    <ul>
    <li><a href="#1">Один</a>
    <li><a href="#2">Два</a>
    <li><a href="#3">Три</a>
    <li><a href="#4">Чотири</a>
    <li><a href="#5">П'ять</a>
    <li><a href="#6">Шість</a>
    <li><a href="#7">Сім</a>
    </ul>
    • Один
    • Два
    • Три
    • Чотири
    • П’ять
    • Шість
    • Сім

    На цьому розмітка нашого бічного меню закінчується. Правда є ще одна зовсім необов’язкова фішка, це фон затемнення основного вмісту при включеній панелі. Якщо воно вам треба, просто
    пропишіть нижче меню, або в будь-якому іншому місці тіла сторінки, додатковий div контейнер з певним класом:

    <div class="mask-content"></div>

    У демо цю фічу за замовчуванням виключив з роботи, заккоментировав даний блок, якщо раптом знадобиться, легко знайдете і так само легко включіть))).
    Взагалі, щоб було простіше розібратися в html демо-сторінки, для кожного елемента прописав докладні коментарі, так що щоб загубитися треба буде дуже постаратися.

    Отже, всі необхідні елементи на своїх місцях, залишається найголовніше і цікаве, сформувати зовнішній вигляд, колір, форму, і надати движухи нашому меню. Все це ми будемо робити виключно засобами CSS. Ні яких javascript і додаткових зображень.

    CSS

    Розписувати кожне правило і властивість не буду, так як зробив це безпосередньо в самому коді css.
    Стилі для панелей розташованих ліворуч або праворуч практично однакові, відрізняються лише парою-трійкою значень. В архіві з исходниками упаковані обидва варіанти окремими файлами, так що вибирайте потрібний, правильно підключайте до документа і все.
    Тут викладаю «фарш css», для меню выдвигающегося з лівого краю сторінки:

    /**
    * Перемикається бічна панель навігації
    * висувається по кліку зліва
    */
    .nav {
    /* ширна довільна, не соромтеся експериментувати */
    width: 320px;
    min-width: 320px;
    /* фіксуємо і виставляємо висоту панелі на максимум */
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    margin: 0;
    /* зрушуємо (ховаємо) панель щодо лівого краю сторінки */
    left: -320px;
    /* внутрішні відступи */
    padding: 15px 20px;
    /* плавний перехід зміщення панелі */
    -webkit-transition: left 0.3s;
    -moz-transition: left 0.3s;
    transition: left 0.3s;
    /* визначаємо колір фону панелі */
    background: #16a085;
     /* поверх інших елементів */
    z-index: 2000;
    }
    /**
    * Кнопка перемикання панелі
    * тег
    */
    .nav-toggle {
    /* абсолютно позиціонуємо */
    position: absolute;
    /* відносно лівого краю панелі */
    left: 320px;
    /* відступ від верхнього краю панелі */
    top: 1em;
    /* внутрішні відступи */
    padding: 0.5em;
    /* визначаємо колір фону перемикача
    * частіше лише у відповідності з кольором фону панелі
    */
    background: inherit;
    /* колір тексту */
    color: #dadada;
     /* вигляд курсору */
    cursor: pointer;
    /* розмір шрифту */
    font-size: 1.2em;
    line-height: 1;
    /* завжди поверх інших елементів сторінки */
    z-index: 2001;
    /* анимируем колір тексту при наведенні */
    -webkit-transition: color .25s ease-in-out;
    -moz-transition: color .25s ease-in-out;
    transition: color .25s ease-in-out;
    }
    /* визначаємо текст кнопки
    * символ Unicode (TRIGRAM FOR HEAVEN)
    */
    .nav-toggle:after {
    content: '\2630';
    text-decoration: none;
    }
    /* колір тексту при наведенні */
    .nav-toggle:hover {
    color: #f4f4f4;
    }
    /**
    * Прихований чекбокс (прапорець)
    * невидимий і недоступний :)
    * ім'я селектора атрибут прапорця
    */
    [id='nav-toggle'] {
    position: absolute;
    display: none;
    }
    /**
    * зміна положення перемикача
    * при перегляді на мобільних пристроях
    * коли навігація розкрита, распологаем всередині панелі
    */
    [id='nav-toggle']:checked ~ .nav > .nav-toggle {
    left: auto;
    right: 2px;
    top: 1em;
    }
    /**
    * Коли прапорець встановлений, відкривається панель
    * використовуємо псевдоклас:checked
    */
    [id='nav-toggle']:checked ~ .nav {
    left: 0;
    box-shadow:4px 0px 20px 0px rgba(0,0,0, 0.5);
    -moz-box-shadow:4px 0px 20px 0px rgba(0,0,0, 0.5);
    -webkit-box-shadow:4px 0px 20px 0px rgba(0,0,0, 0.5);
    overflow-y: auto;
    }
    /*
    * зсув вмісту сторінки
    * на розмір ширини панелі,
    * фішка необов'язкова, на любителя
    */
    [id='nav-toggle']:checked ~ main > article {
    -webkit-transform: translateX(320px);
    -moz-transform: translateX(320px);
    transform: translateX(320px);
    }
    /*
    * зміна символу перемикача,
    * звичний хрестик (MULTIPLICATION X),
    * ви можете використовувати будь-який інший значок
    */
    [id='nav-toggle']:checked ~ .nav > .nav-toggle:after {
    content: '\2715';
    }
    /**
    * профиксим баг в Android <= 4.1.2
    * см: http://timpietrusky.com/advanced-checkbox-hack
    */
    body {
    -webkit-animation: bugfix infinite 1s;
    }
    @-webkit-keyframes bugfix {
    to {
    padding: 0;
    }
    }
    /**
    * позаботьтимся про середніх і маленьких екранах
    * мобільних пристроїв
    */
    @media screen and (мВыдвигающееся бічне меню на чистому CSS 
    • Про Блозі
    • Карта Блогу
    • Контакти
    { -- dbmast.ru -- }
    Головна » Уроки » Висуваються бічне меню на чистому CSS

    Висуваються бічне меню на чистому CSS

    4 жовтня, 2016 driver 9 коментарів Переглянули: 9 497

    Бічні меню, що висуваються по кліку, останнім часом широко використовуються розробниками сайтів. Найвідоміше, на даний момент, це звичайно ж меню навігації, упаковане під кнопки в стилі «гамбургер». Напевно кожен з вас хоча б раз зустрічав в інтернеті сайт, на якому збоку, праворуч або ліворуч, красується кнопа такого виду: ? , при натисканні на яку з'являється(висувається) панелька з вертикальним меню.

    Існує маса готових рішень для створення таких панелей з допомогою jQuery, окремі плагіни та модулі для різних систем управління сайтом.
    Це все дуже навіть добре, але чи можна, для реалізації бічних слайд-панелей обійтися виключно засобами CSS? Звичайно можна! Але обережно ))), з оглядкою на те, що не всі браузери однаково добре підтримують сучасні властивості CSS3.

    Не так давно, «видав на-гора» рішення і приклад роботи панелі висувається зверху. Один з перших коментарів був таким: «давайте її в бік перемістимо...». Чому-б і ні? Давайте)).


    Выдвигающееся боковое меню на CSS

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

    Дивитися Демо

    HTML-Розмітка

    Почнемо розбір з перемикача панелі, в якості якого використовуємо стандартний прапорець (checkbox):

    
    

    Маємо чекбокс у верхній частині документа, краще відразу після тега . Прописуємо атрибут hidden, прямо вказуючи стан «прихований» у даного елемента, а так само надамо унікальний ідентифікатор id="nav-toggle" наприклад, для зв'язки з атрибутом for тега , який ми оформимо і будемо використовувати у вигляді кнопки перемикання панелі.

    Як обгортки вмісту бічній панелі використовував тег з певним класом class="nav", так як Internet Explorer до версії 8.0 включно ігнорує цей тег, ви можете використовувати звичний

    .
    Всередині базового контейнера розміщуємо потрібне нам вміст.
    В першу чергу пропишемо мітку (тег ) сформовану в css у вигляді тієї самої «кнопки-гамбургер», з допомогою якої встановимо зв'язок з прихованим прапорець checkbox. Для цього обов'язково, ім'я атрибута for повинно відповідати id чекбокса. Порожній атрибут onclick використовуємо для виправлення бага в iOS < 6.0

    
    

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

    <h2 class="logo">
    <a href="//dbmast.ru/">DBmast.ru</a>
    </h2>

    DBmast.ru

    Далі, так як ми визначилися, що робимо саме меню навігації, прописуємо ненумерованний список

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

      <ul>
      <li><a href="#1">Один</a>
      <li><a href="#2">Два</a>
      <li><a href="#3">Три</a>
      <li><a href="#4">Чотири</a>
      <li><a href="#5">П'ять</a>
      <li><a href="#6">Шість</a>
      <li><a href="#7">Сім</a>
      </ul>
      • Один
      • Два
      • Три
      • Чотири
      • П'ять
      • Шість
      • Сім

      На цьому розмітка нашого бічного меню закінчується. Правда є ще одна зовсім необов'язкова фішка, це фон затемнення основного вмісту при включеній панелі. Якщо воно вам треба, просто
      пропишіть нижче меню, або в будь-якому іншому місці тіла сторінки, додатковий div контейнер з певним класом:

      <div class="mask-content"></div>

      У демо цю фічу за замовчуванням виключив з роботи, заккоментировав даний блок, якщо раптом знадобиться, легко знайдете і так само легко включіть))).
      Взагалі, щоб було простіше розібратися в html демо-сторінки, для кожного елемента прописав докладні коментарі, так що щоб загубитися треба буде дуже постаратися.

      Отже, всі необхідні елементи на своїх місцях, залишається найголовніше і цікаве, сформувати зовнішній вигляд, колір, форму, і надати движухи нашому меню. Все це ми будемо робити виключно засобами CSS. Ні яких javascript і додаткових зображень.

      CSS

      Розписувати кожне правило і властивість не буду, так як зробив це безпосередньо в самому коді css.
      Стилі для панелей розташованих ліворуч або праворуч практично однакові, відрізняються лише парою-трійкою значень. В архіві з исходниками упаковані обидва варіанти окремими файлами, так що вибирайте потрібний, правильно підключайте до документа і все.
      Тут викладаю «фарш css», для меню выдвигающегося з лівого краю сторінки:

      /**
      * Перемикається бічна панель навігації
      * висувається по кліку зліва
      */
      .nav {
      /* ширна довільна, не соромтеся експериментувати */
      width: 320px;
      min-width: 320px;
      /* фіксуємо і виставляємо висоту панелі на максимум */
      height: 100%;
      position: fixed;
      top: 0;
      bottom: 0;
      margin: 0;
      /* зрушуємо (ховаємо) панель щодо лівого краю сторінки */
      left: -320px;
      /* внутрішні відступи */
      padding: 15px 20px;
      /* плавний перехід зміщення панелі */
      -webkit-transition: left 0.3s;
      -moz-transition: left 0.3s;
      transition: left 0.3s;
      /* визначаємо колір фону панелі */
      background: #16a085;
       /* поверх інших елементів */
      z-index: 2000;
      }
      /**
      * Кнопка перемикання панелі
      * тег
      */
      .nav-toggle {
      /* абсолютно позиціонуємо */
      position: absolute;
      /* відносно лівого краю панелі */
      left: 320px;
      /* відступ від верхнього краю панелі */
      top: 1em;
      /* внутрішні відступи */
      padding: 0.5em;
      /* визначаємо колір фону перемикача
      * частіше лише у відповідності з кольором фону панелі
      */
      background: inherit;
      /* колір тексту */
      color: #dadada;
       /* вигляд курсору */
      cursor: pointer;
      /* розмір шрифту */
      font-size: 1.2em;
      line-height: 1;
      /* завжди поверх інших елементів сторінки */
      z-index: 2001;
      /* анимируем колір тексту при наведенні */
      -webkit-transition: color .25s ease-in-out;
      -moz-transition: color .25s ease-in-out;
      transition: color .25s ease-in-out;
      }
      /* визначаємо текст кнопки
      * символ Unicode (TRIGRAM FOR HEAVEN)
      */
      .nav-toggle:after {
      content: '\2630';
      text-decoration: none;
      }
      /* колір тексту при наведенні */
      .nav-toggle:hover {
      color: #f4f4f4;
      }
      /**
      * Прихований чекбокс (прапорець)
      * невидимий і недоступний :)
      * ім'я селектора атрибут прапорця
      */
      [id='nav-toggle'] {
      position: absolute;
      display: none;
      }
      /**
      * зміна положення перемикача
      * при перегляді на мобільних пристроях
      * коли навігація розкрита, распологаем всередині панелі
      */
      [id='nav-toggle']:checked ~ .nav > .nav-toggle {
      left: auto;
      right: 2px;
      top: 1em;
      }
      /**
      * Коли прапорець встановлений, відкривається панель
      * використовуємо псевдоклас:checked
      */
      [id='nav-toggle']:checked ~ .nav {
      left: 0;
      box-shadow:4px 0px 20px 0px rgba(0,0,0, 0.5);
      -moz-box-shadow:4px 0px 20px 0px rgba(0,0,0, 0.5);
      -webkit-box-shadow:4px 0px 20px 0px rgba(0,0,0, 0.5);
      overflow-y: auto;
      }
      /*
      * зсув вмісту сторінки
      * на розмір ширини панелі,
      * фішка необов'язкова, на любителя
      */
      [id='nav-toggle']:checked ~ main > article {
      -webkit-transform: translateX(320px);
      -moz-transform: translateX(320px);
      transform: translateX(320px);
      }
      /*
      * зміна символу перемикача,
      * звичний хрестик (MULTIPLICATION X),
      * ви можете використовувати будь-який інший значок
      */
      [id='nav-toggle']:checked ~ .nav > .nav-toggle:after {
      content: '\2715';
      }
      /**
      * профиксим баг в Android <= 4.1.2
      * см: http://timpietrusky.com/advanced-checkbox-hack
      */
      body {
      -webkit-animation: bugfix infinite 1s;
      }
      @-webkit-keyframes bugfix {
      to {
      padding: 0;
      }
      }
      /**
      * позаботьтимся про середніх і маленьких екранах
      * мобільних пристроїв
      */
      @media screen and (min-width: 320px) {
      html,
      body {
      margin: 0;
      overflow-x: hidden;
      }
      }
      @media screen and (max-width: 320px) {
      html,
      body {
      margin: 0;
      overflow-x: hidden;
      }
      .nav {
      width: 100%;
      box-shadow: none
      }
      }
      /**
      * Формуємо стиль заголовка (логотип) панелі
      */
      .nav h2 {
      width: 90%;
      padding: 0;
      margin: 10px 0;
      text-align: center;
      text-shadow: rgba(255, 255, 255, .1) -1px -1px 1px, rgba(0, 0, 0, .5) 1px 1px 1px;
      font-size: 1.3em;
      line-height: 1.3em;
      opacity: 0;
      transform: scale(0.1, 0.1);
      -ms-transform: scale(0.1, 0.1);
      -moz-transform: scale(0.1, 0.1);
      -webkit-transform: scale(0.1, 0.1);
      transform-origin: 0% 0%;
      -ms-transform-origin: 0% 0%;
      -moz-transform-origin: 0% 0%;
      -webkit-transform-origin: 0% 0%;
      transition: opacity 0.8s, transform 0.8s;
      -ms-transition: opacity 0.8s, -ms-transform 0.8s;
      -moz-transition: opacity 0.8s, -moz-transform 0.8s;
      -webkit-transition: opacity 0.8s, -webkit-transform 0.8s;
      }
      .nav h2 a {
      color: #dadada;
       text-decoration: none;
      text-transform: uppercase;
      }
      /*плавне поява заголовка (логотипу) при розкритті панелі */
      [id='nav-toggle']:checked ~ .nav h2 {
      opacity: 1;
      transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      -moz-transform: scale(1, 1);
      -webkit-transform: scale(1, 1);
      }
      /**
      * формуємо безпосередньо саме меню
      * використовуємо ненумерованний список для пунктів меню
      * прикрутимо трансфомации і плавні переходи
      */
      .nav > ul {
      display: block;
      margin: 0;
      padding: 0;
      list-style: none;
      }
      .nav > ul > li {
      line-height: 2.5;
      opacity: 0;
      -webkit-transform: translateX(-50%);
      -moz-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%);
      -webkit-transition: opacity .5s .1s, -webkit-transform .5s .1s;
      -moz-transition: opacity .5s .1s, -moz-transform .5s .1s;
      -ms-transition: opacity .5s .1s, -ms-transform .5s .1s;
      transition: opacity .5s .1s, transform .5s .1s;
      }
      [id='nav-toggle']:checked ~ .nav > ul > li {
      opacity: 1;
      -webkit-transform: translateX(0);
      -moz-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
      }
      /* визначаємо інтервали появи пунктів меню */
      .nav > ul > li:nth-child(2) {
      -webkit-transition: opacity .5s .2s, -webkit-transform .5s .2s;
      transition: opacity .5s .2s, transform .5s .2s;
      }
      .nav > ul > li:nth-child(3) {
      -webkit-transition: opacity .5s .3s, -webkit-transform .5s .3s;
      transition: opacity .5s .3s, transform .5s .3s;
      }
      .nav > ul > li:nth-child(4) {
      -webkit-transition: opacity .5s .4s, -webkit-transform .5s .4s;
      transition: opacity .5s .4s, transform .5s .4s;
      }
      .nav > ul > li:nth-child(5) {
      -webkit-transition: opacity .5s .5s, -webkit-transform .5s .5s;
      transition: opacity .5s .5s, transform .5s .5s;
      }
      .nav > ul > li:nth-child(6) {
      -webkit-transition: opacity .5s .6s, -webkit-transform .5s .6s;
      transition: opacity .5s .6s, transform .5s .6s;
      }
      .nav > ul > li:nth-child(7) {
      -webkit-transition: opacity .5s .7s, -webkit-transform .5s .7s;
      transition: opacity .5s .7s, transform .5s .7s;
      }
      /**
      * оформлення посилань пунктів меню
      */
      .nav > ul > li > a {
      display: inline-block;
      position: relative;
      padding: 0;
      font-family: 'Open Sans', sans-serif;
      font-weight: 300;
      font-size: 1.2em;
      color: #dadada;
       width: 100%;
      text-decoration: none;
      /* плавний перехід */
      -webkit-transition: color .5s ease, padding .5s ease;
      -moz-transition: color .5s ease, padding .5s ease;
      transition: color .5s ease, padding .5s ease;
      }
      /**
      * стан посилань меню при наведенні
      */
      .nav > ul > li > a:hover,
      .nav > ul > li > a:focus {
      color: white;
      padding-left: 15px;
      }
      /**
      * лінія підкреслення посилань меню
      */
      .nav > ul > li > a:before {
      content: ";
      display: block;
      position: absolute;
      right: 0;
      bottom: 0;
      height: 1px;
      width: 100%;
      -webkit-transition: width 0s ease;
      transition: width 0s ease;
      }
      .nav > ul > li > a:after {
      content: ";
      display: block;
      position: absolute;
      left: 0;
      bottom: 0;
      height: 1px;
      width: 100%;
      background: #3bc1a0;
       -webkit-transition: width .5s ease;
      transition: width .5s ease;
      }
      /**
      * анимируем лінію підкреслення
      * посилань при наведенні
      */
      .nav > ul > li > a:hover:before {
      width: 0%;
      background: #3bc1a0;
       -webkit-transition: width .5s ease;
      transition: width .5s ease;
      }
      .nav > ul > li > a:hover:after {
      width: 0%;
      background: transparent;
      -webkit-transition: width 0s ease;
      transition: width 0s ease;
      }
      /* фон затемнення на основний контент
      * при цьому елементи блокируютя
      * спірна така фіча, якщо воно вам треба
      * просто розкоментуйте
      */
      /*
      .mask-content {
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1000;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.4);
      visibility: hidden;
      opacity: 0;
      }
      [id= "nav-toggle']:checked ~ .mask-content {
      visibility: visible;
      opacity: 1;
      -webkit-transition: opacity .5s, visibility .5s;
      transition: opacity .5s, visibility .5s;
      }
      */

      /**
      * Перемикається бічна панель навігації
      * висувається по кліку зліва
      */.nav {
      /* ширна довільна, не соромтеся експериментувати */
      width: 320px;
      min-width: 320px;
      /* фіксуємо і виставляємо висоту панелі на максимум */
      height: 100%;
      position: fixed;
      top: 0;
      bottom: 0;
      margin: 0;
      /* зрушуємо (ховаємо) панель щодо лівого краю сторінки */
      left: -320px;
      /* внутрішні відступи */
      padding: 15px 20px;
      /* плавний перехід зміщення панелі */
      -webkit-transition: left 0.3 s;
      -moz-transition: left 0.3 s;
      transition: left 0.3 s;
      /* визначаємо колір фону панелі */
      background: #16a085;
      /* поверх інших елементів */
      z-index: 2000;
      }/**
      * Кнопка перемикання панелі
      * тег
      */.nav-toggle {
      /* абсолютно позиціонуємо */
      position: absolute;
      /* відносно лівого краю панелі */
      left: 320px;
      /* відступ від верхнього краю панелі */
      top: 1em;
      /* внутрішні відступи */
      padding: 0.5 em;
      /* визначаємо колір фону перемикача
      * частіше лише у відповідності з кольором фону панелі
      */
      background: inherit;
      /* колір тексту */
      color: #dadada;
      /* вигляд курсору */
      cursor: pointer;
      /* розмір шрифту */
      font-size: 1.2 em;
      line-height: 1;
      /* завжди поверх інших елементів сторінки */
      z-index: 2001;
      /* анимируем колір тексту при наведенні */
      -webkit-transition: color .25s ease-in-out;
      -moz-transition: color .25s ease-in-out;
      transition: color .25s ease-in-out;
      }/* визначаємо текст кнопки
      * символ Unicode (TRIGRAM FOR HEAVEN)
      */.nav-toggle:after {
      content: '\2630';
      text-decoration: none;
      }/* колір тексту при наведенні */.nav-toggle:hover {
      color: #f4f4f4;
      }/**
      * Прихований чекбокс (прапорець)
      * невидимий і недоступний 🙂
      * ім'я селектора атрибут прапорця
      */[id= "nav-toggle'] {
      position: absolute;
      display: none;
      }/**
      * зміна положення перемикача
      * при перегляді на мобільних пристроях
      * коли навігація розкрита, распологаем всередині панелі
      */[id= "nav-toggle']:checked ~ .nav > .nav-toggle {
      left: auto;
      right: 2px;
      top: 1em;
      }/**
      * Коли прапорець встановлений, відкривається панель
      * використовуємо псевдоклас:checked
      */[id= "nav-toggle']:checked ~ .nav {
      left: 0;
      box-shadow:4px 0px 20px 0px rgba(0,0,0, 0.5);
      -moz-box-shadow:4px 0px 20px 0px rgba(0,0,0, 0.5);
      -webkit-box-shadow:4px 0px 20px 0px rgba(0,0,0, 0.5);
      overflow-y: auto;
      }/*
      * зсув вмісту сторінки
      * на розмір ширини панелі,
      * фішка необов'язкова, на любителя
      */[id= "nav-toggle']:checked ~ main > article {
      -webkit-transform: translateX(320px);
      -moz-transform: translateX(320px);
      transform: translateX(320px);
      }/*
      * зміна символу перемикача,
      * звичний хрестик (MULTIPLICATION X),
      * ви можете використовувати будь-який інший значок
      */[id= "nav-toggle']:checked ~ .nav > .nav-toggle:after {
      content: '\2715';
      }/**
      * профиксим баг в Android <= 4.1.2
      * см: http://timpietrusky.com/advanced-checkbox-hack
      */body {
      -webkit-animation: bugfix infinite 1s;
      }@-webkit-keyframes bugfix {
      to {
      padding: 0;
      }
      }/**
      * позаботьтимся про середніх і маленьких екранах
      * мобільних пристроїв
      */@media screen and (min-width: 320px) {
      html
      body {
      margin: 0;
      overflow-x: hidden;
      }
      }@media screen and (max-width: 320px) {
      html
      body {
      margin: 0;
      overflow-x: hidden;
      }
      .nav {
      width: 100%;
      box-shadow: none
      }
      }/**
      * Формуємо стиль заголовка (логотип) панелі
      */.nav h2 {
      width: 90%;
      padding: 0;
      margin: 10px 0;
      text-align: center;
      text-shadow: rgba(255, 255, 255, .1) -1px -1px 1px, rgba(0, 0, 0, .5) 1px 1px 1px;
      font-size: 1.3 em;
      line-height: 1.3 em;
      opacity: 0;
      transform: scale(0.1, 0.1);
      -ms-transform: scale(0.1, 0.1);
      -moz-transform: scale(0.1, 0.1);
      -webkit-transform: scale(0.1, 0.1);
      transform-origin: 0% 0%;
      -ms-transform-origin: 0% 0%;
      -moz-transform-origin: 0% 0%;
      -webkit-transform-origin: 0% 0%;
      transition: opacity 0.8 s, transform 0.8 s;
      -ms-transition: opacity 0.8 s-ms-transform 0.8 s;
      -moz-transition: opacity 0.8 s, -moz-transform 0.8 s;
      -webkit-transition: opacity 0.8 s, -webkit-transform 0.8 s;
      }.nav h2 a {
      color: #dadada;
      text-decoration: none;
      text-transform: uppercase;
      }/*плавне поява заголовка (логотипу) при розкритті панелі */[id= "nav-toggle']:checked ~ .nav h2 {
      opacity: 1;
      transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      -moz-transform: scale(1, 1);
      -webkit-transform: scale(1, 1);
      }/**
      * формуємо безпосередньо саме меню
      * використовуємо ненумерованний список для пунктів меню
      * прикрутимо трансфомации і плавні переходи
      */.nav > ul {
      display: block;
      margin: 0;
      padding: 0;
      list-style: none;
      }.nav > ul > li {
      line-height: 2.5;
      opacity: 0;
      -webkit-transform: translateX(-50%);
      -moz-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%);
      -webkit-transition: opacity .5s .1s, -webkit-transform .5s .1s;
      -moz-transition: opacity .5s .1s, -moz-transform .5s .1s;
      -ms-transition: opacity .5s .1s, -ms-transform .5s .1s;
      transition: opacity .5s .1s, transform .5s .1s;
      }[id= "nav-toggle']:checked ~ .nav > ul > li {
      opacity: 1;
      -webkit-transform: translateX(0);
      -moz-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
      }/* визначаємо інтервали появи пунктів меню */.nav > ul > li:nth-child(2) {
      -webkit-transition: opacity .5s .2s, -webkit-transform .5s .2s;
      transition: opacity .5s .2s, transform .5s .2s;
      }.nav > ul > li:nth-child(3) {
      -webkit-transition: opacity .5s .3s, -webkit-transform .5s .3s;
      transition: opacity .5s .3s, transform .5s .3s;
      }.nav > ul > li:nth-child(4) {
      -webkit-transition: opacity .5s .4s, -webkit-transform .5s .4s;
      transition: opacity .5s .4s, transform .5s .4s;
      }.nav > ul > li:nth-child(5) {
      -webkit-transition: opacity .5s .5s, -webkit-transform .5s .5s;
      transition: opacity .5s .5s, transform .5s .5s;
      }.nav > ul > li:nth-child(6) {
      -webkit-transition: opacity .5s .6s, -webkit-transform .5s .6s;
      transition: opacity .5s .6s, transform .5s .6s;
      }.nav > ul > li:nth-child(7) {
      -webkit-transition: opacity .5s .7s, -webkit-transform .5s .7s;
      transition: opacity .5s .7s, transform .5s .7s;
      }/**
      * оформлення посилань пунктів меню
      */.nav > ul > li > a {
      display: inline-block;
      position: relative;
      padding: 0;
      font-family: 'Open Sans', sans-serif;
      font-weight: 300;
      font-size: 1.2 em;
      color: #dadada;
      width: 100%;
      text-decoration: none;
      /* плавний перехід */
      -webkit-transition: color .5s ease, padding .5s ease;
      -moz-transition: color .5s ease, padding .5s ease;
      transition: color .5s ease, padding .5s ease;
      }/**
      * стан посилань меню при наведенні
      */.nav > ul > li > a:hover,
      .nav > ul > li > a:focus {
      color: white;
      padding-left: 15px;
      }/**
      * лінія підкреслення посилань меню
      */.nav > ul > li > a:before {
      content: ";
      display: block;
      position: absolute;
      right: 0;
      bottom: 0;
      height: 1px;
      width: 100%;
      -webkit-transition: width 0s ease;
      transition: width 0s ease;
      }.nav > ul > li > a:after {
      content: ";
      display: block;
      position: absolute;
      left: 0;
      bottom: 0;
      height: 1px;
      width: 100%;
      background: #3bc1a0;
      -webkit-transition: width .5s ease;
      transition: width .5s ease;
      }/**
      * анимируем лінію підкреслення
      * посилань при наведенні
      */.nav > ul > li > a:hover:before {
      width: 0%;
      background: #3bc1a0;
      -webkit-transition: width .5s ease;
      transition: width .5s ease;
      }.nav > ul > li > a:hover:after {
      width: 0%;
      background: transparent;
      -webkit-transition: width 0s ease;
      transition: width 0s ease;
      }/* фон затемнення на основний контент
      * при цьому елементи блокируютя
      * спірна така фіча, якщо воно вам треба
      * просто розкоментуйте
      *//*
      .mask-content {
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1000;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.4);
      visibility: hidden;
      opacity: 0;
      }[id= "nav-toggle']:checked ~ .mask-content {
      visibility: visible;
      opacity: 1;
      -webkit-transition: opacity .5s, visibility .5s;
      transition: opacity .5s, visibility .5s;
      }
      */

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

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

      Ще раз дивіться результат, скачивайте архів з исходниками, експериментуйте з різними параметрами і творіть, творіть, творіть...

      ДемоИсходники

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

      З Повагою, Андрій .

      Буду всім вдячний, якщо підтримайте проект — додавши блог виключення AdBlock та поділіться посиланням на запис в своїх соціальних мережах: