Выдвижная боковая панель на CSS

Данное решение сделано с использованием флажка checkbox и не требует скриптов.

Использовать такую панель можно как угодно, например, для создания меню, формы обратной связи, регистрации/авторизации или любой другой информации

Пример:

Выдвижная панель:

Информация в панеле

HTML:

В данном коде обязательным условием является, чтобы боковая панель <div class="side-panel">...</div> следовала сразу за флажком checkbox

Т.к. панель имеет фиксированное позиционирование, ее можно разместить в любом месте страницы. Основываясь на этом, можно сделать кнопку, которая будет менять свой стиль и текст: side-button-1 (для нее, тоже важна последовательность html тегов.

Если изменять переключатель не нужно, как у кнопки side-button-2, то ее можно ставить где угодно, как угодно и сколько угодно раз. Например:

CSS:

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!

Комментарии:

  • Миша:

    Спасибо, отличное решение.

    Ответить
  • Юлия:

    А как сделать, чтобы несколько таких кнопок было на одной странице с разной информацией в боковом меню.. для каждой кнопки своя?

    Ответить
    • Alexander:

      Дублировать: ID, классы и т.д.
      Но тут удобнее на JS будет уже

      Ответить
    • Юлия:

      [quote] я продублировала, но ничего не получилось, вылезает панель от исходных настроек

      Ответить
      • Alexander:

        Дайте ссылку на результат, так сложно понять что не так и тем более обьяснить.

        Ответить
  • Георгий:

    если справа нужна панель, то что менять чтобы всё отлично работало?

    Ответить
    • Alexander:
      .side-panel {
      	left: -360px;
      	box-shadow: 10px 0 20px rgba(0,0,0,0.4);
      	left: 100%;
      	box-shadow: -10px 0 20px rgba(0,0,0,0.4);
      }
      #side-checkbox:checked + .side-panel {
      	left: 0;
      	left: calc(100% — 360px);
      }
      Ответить
  • Илья:

    И настроить на стили на свою кнопку?

    Ответить
    • Alexander:

      Только эта кнопка должна быть label и с правильным for

      Ответить
      • Илья:

        т.е. отстилизовать под свой дизайн я не смогу?

        Ответить
        • Alexander:

          Почему?
          Или редактируйте эту кнопку, что в примере, или ставьте любую свою:

          <label class="my-style-button" for="side-checkbox">Моя кнопка</label>  

          Только это должен лабель быть, чтобы он открывал панель.
          А стили ставьте хоть в виде ссылки, хоть в виде кнопки, хоть в виде фото.

          Ответить
  • Дмитрий:

    Хорошее решение, спасибо!

    Ответить