Как создать выдвижную панель на чистом CSS без jQuery

Обновлено 2026/05/14

Выдвижная панель (Off-canvas panel) — популярный элемент интерфейса, который используется для мобильного меню, фильтров, навигации, корзины интернет-магазина, форм обратной связи и дополнительного контента.

Раньше подобные панели чаще создавались на jQuery-плагинах. Сегодня большинство задач решается средствами современного CSS без подключения сторонних библиотек и тяжелых JavaScript-скриптов.

В этой статье рассмотрим, как создать выдвижную панель на чистом CSS с поддержкой современных браузеров.

Преимущества CSS-панелей

• не требуется jQuery;
• минимальная нагрузка на страницу;
• быстрая загрузка интерфейса;
• простая интеграция в Bootstrap и любые шаблоны;
• удобная адаптация под мобильные устройства;
• лучшие показатели Core Web Vitals.

Как работает выдвижная панель

Механика достаточно простая:

1. Панель размещается за пределами экрана через transform.
2. При активации применяется состояние :checked.
3. CSS плавно перемещает панель внутрь области просмотра.

Такой подход позволяет реализовать открытие и закрытие панели вообще без JavaScript.

HTML-разметка панели

Сначала добавим HTML-код.

<input type="checkbox" id="sidebar-toggle">

<label for="sidebar-toggle" class="sidebar-button">
Открыть панель
</label>

<div class="sidebar">

<div class="sidebar-header">
<h2>Меню сайта</h2>

<label for="sidebar-toggle" class="sidebar-close">
×
</label>
</div>

<nav class="sidebar-nav">
<a href="#">Главная</a>
<a href="#">Услуги</a>
<a href="#">Портфолио</a>
<a href="#">Контакты</a>
</nav>

</div>

<label for="sidebar-toggle" class="sidebar-overlay"></label>

CSS-стили панели

Теперь добавим оформление и анимацию.

#sidebar-toggle {
display: none;
}

.sidebar-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 20px;
background: #0d6efd;
color: #ffffff;
cursor: pointer;
border-radius: 6px;
font-weight: 600;
transition: background .3s ease;
}

.sidebar-button:hover {
background: #0b5ed7;
}

.sidebar {
position: fixed;
top: 0;
right: 0;
width: 320px;
max-width: 90%;
height: 100vh;
background: #ffffff;
box-shadow: -5px 0 20px rgba(0,0,0,.15);
transform: translateX(100%);
transition: transform .35s ease;
z-index: 1050;
display: flex;
flex-direction: column;
}

.sidebar-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
border-bottom: 1px solid #dee2e6;
}

.sidebar-header h2 {
margin: 0;
font-size: 1.25rem;
}

.sidebar-close {
font-size: 2rem;
line-height: 1;
cursor: pointer;
color: #212529;
}

.sidebar-nav {
display: flex;
flex-direction: column;
padding: 20px;
gap: 15px;
}

.sidebar-nav a {
color: #212529;
text-decoration: none;
font-size: 1rem;
transition: color .3s ease;
}

.sidebar-nav a:hover {
color: #0d6efd;
}

.sidebar-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,.45);
opacity: 0;
visibility: hidden;
transition:
opacity .3s ease,
visibility .3s ease;
z-index: 1040;
}

#sidebar-toggle:checked ~ .sidebar {
transform: translateX(0);
}

#sidebar-toggle:checked ~ .sidebar-overlay {
opacity: 1;
visibility: visible;
}

Как работает открытие панели

В основе механики лежит скрытый checkbox:

<input type="checkbox" id="sidebar-toggle">

Когда пользователь нажимает на элемент:

<label for="sidebar-toggle">

состояние checkbox меняется на :checked, после чего CSS применяет новые стили:

#sidebar-toggle:checked ~ .sidebar {
transform: translateX(0);
}

Панель плавно появляется справа.

Почему используется transform вместо right

Современные интерфейсы обычно анимируют через transform, а не через изменение координат left/right.

Причина — производительность.

Свойство transform:

• использует GPU-ускорение;
• не вызывает перерасчет layout;
• работает плавнее на мобильных устройствах;
• лучше влияет на FPS анимации.

Это особенно важно для Core Web Vitals и общей отзывчивости интерфейса.

Адаптация панели под мобильные устройства

Панель уже адаптивна благодаря:

max-width: 90%;

Однако для небольших экранов можно дополнительно изменить ширину.

@media (max-width: 576px) {

.sidebar {
width: 100%;
max-width: 100%;
}

}

На смартфонах панель будет занимать всю ширину экрана.

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

Чтобы панель открывалась слева, достаточно изменить несколько свойств.

.sidebar {
left: 0;
right: auto;
transform: translateX(-100%);
}

#sidebar-toggle:checked ~ .sidebar {
transform: translateX(0);
}

Добавление плавного затемнения фона

Полупрозрачный overlay делает интерфейс более удобным и визуально выделяет активную панель.

.sidebar-overlay {
background: rgba(0,0,0,.45);
backdrop-filter: blur(2px);
}

Свойство backdrop-filter поддерживается большинством современных браузеров и создает эффект размытия фона.

Преимущества CSS-решения перед jQuery-плагинами

Когда JavaScript всё же нужен

CSS-панель подходит для большинства задач, однако JavaScript может понадобиться:

• для сложной логики меню;
• динамической подгрузки контента;
• сохранения состояния панели;
• анимаций с физикой;
• управления через клавиатуру;
• интеграции с SPA-фреймворками.

Итог

В современных проектах выдвижные панели можно эффективно реализовывать средствами CSS без jQuery и тяжелых библиотек.

Такой подход:

• ускоряет загрузку сайта;
• уменьшает объем JavaScript;
• упрощает поддержку проекта;
• улучшает адаптивность интерфейса;
• положительно влияет на SEO и Core Web Vitals.

Для большинства сайтов и лендингов CSS-решение является оптимальным вариантом по соотношению скорости, простоты и функциональности.