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

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

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

Пример:

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

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

Открыть

Закрыть

HTML:

<input type="checkbox" id="side-checkbox" />
<div class="side-panel">
	<label class="side-button-2" for="side-checkbox">+</label>	
	<div class="side-title">Выдвижная панель:</div>
	<p>Информация в панеле</p>
</div>
<div class="side-button-1-wr">
	<label class="side-button-1" for="side-checkbox">
		<div class="side-b side-open">Открыть</div>
		<div class="side-b side-close">Закрыть</div>
	</label>
</div>

<div class="side-title">Выдвижная панель:</div>

<p>Информация в панеле</p>

</div>

<div class="side-b side-open">Открыть</div>

<div class="side-b side-close">Закрыть</div>

</label>

</div>

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

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

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

<label class="my-button-1" for="side-checkbox">Моя кнопка 1</label>	
<label class="my-button-2" for="side-checkbox">Моя кнопка 2</label>	
<!-- И так далее -->

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

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

CSS:

/* Оформление панели */
#side-checkbox {
    display: none;
}
.side-panel {
	position: fixed;
	z-index: 999999;
	top: 0;
	left: -360px;
	background: #337AB7;
	transition: all 0.5s;   
	width: 320px;
	height: 100vh;
	box-shadow: 10px 0 20px rgba(0,0,0,0.4);
	color: #FFF;
	padding: 40px 20px;
}
.side-title {
	font-size: 20px;
	padding-bottom: 10px;
	margin-bottom: 20px;
	border-bottom: 2px solid #BFE2FF;
}
/* Оформление кнопки на странице */
.side-button-1-wr {
	text-align: center; /* Контейнер для кнопки, чтобы было удобнее ее разместить */
}
.side-button-1 {
	display: inline-block;
}
.side-button-1 .side-b {
	margin: 10px;
	text-decoration: none;
	position: relative;
	font-size: 20px;
	line-height: 20px;
	padding: 12px 30px;
	color: #FFF;
	font-weight: bold;
	text-transform: uppercase; 
	font-family: 'Roboto', Тahoma, sans-serif;
	background: #337AB7;
	cursor: pointer; 
	border: 2px solid #BFE2FF;
}
.side-button-1 .side-b:hover,
.side-button-1 .side-b:active,
.side-button-1 .side-b:focus {
	color: #FFF;
}
.side-button-1 .side-b:after,
.side-button-1 .side-b:before {
	position: absolute;
	height: 4px;
	left: 50%;
	bottom: -6px;
	content: "";
	transition: all 280ms ease-in-out;
	width: 0;
}
.side-button-1 .side-open:after,
.side-button-1 .side-open:before {
	background: green;
}
.side-button-1 .side-close:after,
.side-button-1 .side-close:before {
	background: red;
}
.side-button-1 .side-b:before {
	top: -6px;
}
.side-button-1 .side-b:hover:after,
.side-button-1 .side-b:hover:before {
	width: 100%;
	left: 0;
}
/* Переключатели кнопки 1 */
.side-button-1 .side-close {
	display: none;
}
#side-checkbox:checked + .side-panel + .side-button-1-wr .side-button-1 .side-open {
	display: none;
}
#side-checkbox:checked + .side-panel + .side-button-1-wr .side-button-1 .side-close {
	display: block;
}
#side-checkbox:checked + .side-panel {
	left: 0;
}
/* Оформление кнопки на панеле */
.side-button-2 {
	font-size: 30px;
	border-radius: 20px;
	position: absolute;
	z-index: 1;
	top: 8px;
	right: 8px;
	cursor: pointer;
	transform: rotate(45deg);
	color: #BFE2FF;	
	transition: all 280ms ease-in-out;	
}
.side-button-2:hover {
	transform: rotate(45deg) scale(1.1);	
	color: #FFF;
}

100

101

102

103

104

105

106

/* Оформление панели */

#side-checkbox {

display: none;

}

.side-panel {

position: fixed;

z-index: 999999;

top: 0;

left: -360px;

background: #337AB7;

transition: all 0.5s;

width: 320px;

height: 100vh;

box-shadow: 10px 0 20px rgba(0,0,0,0.4);

color: #FFF;

padding: 40px 20px;

}

.side-title {

font-size: 20px;

padding-bottom: 10px;

margin-bottom: 20px;

border-bottom: 2px solid #BFE2FF;

}

/* Оформление кнопки на странице */

.side-button-1-wr {

text-align: center; /* Контейнер для кнопки, чтобы было удобнее ее разместить */

}

.side-button-1 {

display: inline-block;

}

.side-button-1 .side-b {

margin: 10px;

text-decoration: none;

position: relative;

font-size: 20px;

line-height: 20px;

padding: 12px 30px;

color: #FFF;

font-weight: bold;

text-transform: uppercase;

font-family: 'Roboto', Тahoma, sans-serif;

background: #337AB7;

cursor: pointer;

border: 2px solid #BFE2FF;

}

.side-button-1 .side-b:hover,

.side-button-1 .side-b:active,

.side-button-1 .side-b:focus {

color: #FFF;

}

.side-button-1 .side-b:after,

.side-button-1 .side-b:before {

position: absolute;

height: 4px;

left: 50%;

bottom: -6px;

content: "";

transition: all 280ms ease-in-out;

width: 0;

}

.side-button-1 .side-open:after,

.side-button-1 .side-open:before {

background: green;

}

.side-button-1 .side-close:after,

.side-button-1 .side-close:before {

background: red;

}

.side-button-1 .side-b:before {

top: -6px;

}

.side-button-1 .side-b:hover:after,

.side-button-1 .side-b:hover:before {

width: 100%;

left: 0;

}

/* Переключатели кнопки 1 */

.side-button-1 .side-close {

display: none;

}

#side-checkbox:checked + .side-panel + .side-button-1-wr .side-button-1 .side-open {

display: none;

}

#side-checkbox:checked + .side-panel + .side-button-1-wr .side-button-1 .side-close {

display: block;

}

#side-checkbox:checked + .side-panel {

left: 0;

}

/* Оформление кнопки на панеле */

.side-button-2 {

font-size: 30px;

border-radius: 20px;

position: absolute;

z-index: 1;

top: 8px;

right: 8px;

cursor: pointer;

transform: rotate(45deg);

color: #BFE2FF;

transition: all 280ms ease-in-out;

}

.side-button-2:hover {

transform: rotate(45deg) scale(1.1);

color: #FFF;

}

Подписывайтесь на публикации Там наиболее интересные заметки без рекламы и другой ненужной информации.

Протестировать на мобильном Сгенерировать QR-код для перехода на эту страницу с телефона

Опубликовано: 11.12.2019 / Обновлено: 04.06.2021
Рубрики: Весь сайт, Меню и аккордеоны
Метки: CSS, Авторское
53977 просмотров

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

Параллакс подвал

Интересный эффект появления футера сайта из под страницы

Мобильный Tab Bar с вкладками

Мобильный Tab Bar с переключающимися вкладками

Модальное окно для контактов

Модальное окно для контактов или социальных сетей с фиксированной кнопкой

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

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

Олег Витальевич: 18.02.2024 в 02:06

Ошибся я дело не в скрипте. position fixed снимаешь где то плавает этот списочек...и окошко которое открывается на вопросик. Задача для меня как ни странно усложнилась

Ответить
- Alexander: 20.02.2024 в 05:09
  
  Не совсем понял про что речь, но посмотрите z-index'ы
  
  Ответить
  - Олег Витальевич: 20.02.2024 в 11:35
    
    Спасибо, помогло отчасти, другие комментарии тоже пригодились)
    
    Ответить
Олег Витальевич: 18.02.2024 в 01:21

Добрых вечеров. В данной панели почему то не срабатывают всплывающие окна. Запилил конструктор в нее со значком вопроса, при клике должна подсказка выходить и вне панели она работает. + всплывающие окна в которых например выбрать количество, тоже самое. Подскажите кто знает и разбирался в чем может быть проблема. Скрипты местами переставлял, все кроме панели удалял, мимо 🙁

Ответить
СЕРГЕЙ: 01.04.2023 в 11:47

Скажите пожалуйста! Можно ли в эту панель вставить форму обратной связи с вашего сайта?
И... можно ли сделать несколько панелей с разной инфой, открывающихся отдельно?

Ответить
Владимир: 23.03.2023 в 18:16

Доброго времени суток. А под валидатор как подогнать данное действо. Для lable вроде как div внутри не допустим с точки зрения хз чего) А так все работает круть как всегда. Тот момент когда в авторе не сомневаешься.

Ответить
- Alexander: 24.03.2023 в 06:24
  
  Поменяйте div на span 🙂
  
  Ответить
  - Владимир: 24.03.2023 в 09:22
    
    Да со span проходит благодарю. Пришлось маленько поправить оформление и норм.
    
    Ответить
СЕРГЕЙ: 22.02.2023 в 23:55

А как вместо кнопки сделать флажок типа бокового меню?

Ответить
- Alexander: 23.02.2023 в 08:47
  
  position: fixed и вместо текста иконку
  
  Ответить
Сергей: 21.11.2022 в 00:30

Просто шикарно! Очень вовремя мне попалась эта статья и в целом ваш сайт.
На редкость полезный и толковый сайт. Спасибо вам.
А как вместо крестика поставить треугольники? В закрытом состоянии углом внутрь (к центру), а в закрытом состоянии - углом наружу. Получится подсказка типа открыть-закрыть. В смысле - понятно, что это можно сделать с помощью псевдоэлементов или маленьких картинок, но как без JS отловить закрытое и открытое состояние панели?

Ответить
- Alexander: 21.11.2022 в 11:16
  
  Без JS это изходить из :checked, как основная кнопка сделана.
  
  Ответить
Сергей: 26.04.2022 в 09:36

А если в панель не помещается содержимое, как добавит вертикальный скролл?

Ответить
- Alexander: 26.04.2022 в 11:57
  <div class="side-title">Выдвижная панель:</div> <p>Информация в панеле</p>
  
  Обернуть в див со стилями:
  
  overflow-y: auto; height: 100%;
  Ответить
Илья: 21.10.2020 в 14:34

Как сделать так, чтобы панель закрывалась не по крестику на панели, а по щелчку в любой точке экрана вне панели?

Ответить
- Alexander: 21.10.2020 в 15:48
  
  Для этого нужен лейбл фиксированный во весь экран, а чтобы он кликался, он должен перекрывать весь сайт.
  
  Ответить
  - Мартин: 03.06.2021 в 16:19
    
    Не подскажете как это сделать?
    
    Ответить
    - Alexander: 04.06.2021 в 08:46
      
      Ну это уже JS
      Если на нем делать боковоую панель, то смысла нет городить все эти чекбоксы
      На днях сделаю JS вариант
      
      Ответить
Миша: 28.09.2020 в 09:41

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

Ответить
Юлия: 24.09.2020 в 23:45

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

Ответить
- Alexander: 25.09.2020 в 01:42
  
  Дублировать: ID, классы и т.д.
  Но тут удобнее на JS будет уже
  
  Ответить
- Юлия: 25.09.2020 в 10:14
  
  [quote] я продублировала, но ничего не получилось, вылезает панель от исходных настроек
  
  Ответить
  - Alexander: 26.09.2020 в 17:30
    
    Дайте ссылку на результат, так сложно понять что не так и тем более обьяснить.
    
    Ответить
    - Юлия: 19.10.2020 в 09:33
      
      В другой раз, видимо, я на следующий день изменила решение задачи. Если возникнет необходимость снова сделать несколько всплывающих окон - кину ссылку. Спасибо!
      
      Ответить

Георгий: 18.09.2020 в 20:50

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

Ответить

Alexander: 19.09.2020 в 06:04

.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);
}

Ответить

Илья: 14.09.2020 в 17:19

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

Ответить
- Alexander: 14.09.2020 в 17:30
  
  Только эта кнопка должна быть label и с правильным for
  
  Ответить
  - Илья: 14.09.2020 в 17:39
    
    т.е. отстилизовать под свой дизайн я не смогу?
    
    Ответить
    - Alexander: 14.09.2020 в 18:41
      
      Почему?
      Или редактируйте эту кнопку, что в примере, или ставьте любую свою:
      
      <label class="my-style-button" for="side-checkbox">Моя кнопка</label>
      
      Только это должен лейбл быть, чтобы он открывал панель.
      А стили ставьте хоть в виде ссылки, хоть в виде кнопки, хоть в виде фото.
      
      Ответить
      - Роман: 21.10.2021 в 17:56
        
        Хорошее решение, только что открыл и не пойму, при переделке панели на правую сторону, я не меняю никаких id и названий лейблов, заменил то, что выше в коментарии писали (ориентация панели), но панель справа не открывается? Каким образом лейбл менять? спасибо
        
        Ответить
      - Роман: 21.10.2021 в 20:11
        
        Разобрался Александр, все Ок! подписка
        
        Ответить
        
        ddd: 13.12.2022 в 21:06
        
        В чем была проблема? Не могу разобраться
        
        Ответить
        
        Роман: 14.12.2022 в 15:36
        
        Никаких проблем нет, просто внимательнее смотрите на CSS
      - Михаил: 05.04.2022 в 08:12
        
        Подскадите, пожалуйста, как сделать не кнопкой, а иконкой (картинкой)?
        
        Ответить
        
        Alexander: 05.04.2022 в 09:17
        
        <label class="my-style-button" for="side-checkbox"><img src="icon.png" /></label>
        
        Ответить
Максимилиан: 28.03.2020 в 19:38

СУПЕР

Ответить
Дмитрий: 28.12.2019 в 21:53

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

Ответить

Пример:

HTML:

CSS:

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

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

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