Выезжающий каталог справа на CSS и JavaScript Overcod.net

Выезжающий каталог справа на CSS и JavaScript

В некоторых интерфейсах каталог удобнее показывать не на отдельной странице, а поверх текущего контента. Один из простых вариантов — выезжающая панель сбоку экрана.

В этом примере каталог реализован без сторонних библиотек: используется CSS для анимации и небольшой JavaScript для управления состоянием.

Выезжающий каталог справа на CSS и JavaScript

Общий принцип

Каталог — это фиксированный блок, который изначально находится за пределами экрана справа.
При клике на кнопку ему добавляется класс .active, и блок появляется.
При нажатии на крестик класс удаляется, и панель уезжает обратно.

Стили панели

#catList {
    position: fixed;
    top: 0;
    right: 0;
    width: 1520px;
    height: 100vh;
    background: #fff;
    border-left: 1px solid #ccc;
    z-index: 99999;

    transform: translateX(100%);
    transition: transform 0.3s ease;
}

Панель фиксируется относительно окна браузера и занимает всю высоту экрана.
Свойство transform: translateX(100%) сдвигает её вправо, за пределы видимой области.

Активное состояние

#catList.active {
    transform: translateX(0);
}

Когда добавляется класс .active, панель возвращается в видимую область.
Плавность движения обеспечивается свойством transition.

Шапка и кнопка закрытия

.blockPanel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #eee;
}

Шапка каталога оформлена с помощью flex, чтобы заголовок и кнопка закрытия располагались по краям.

.close-btn {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
}

Кнопка закрытия оформлена как обычная кнопка без лишних стилей.

HTML-разметка

<!-- Кнопка открытия -->
<button class="draft-btn" id="openCatalog">Каталог</button>

<div class="catList" id="catList">
    <div class="blockPanel">
        <h2>Каталог</h2>
        <button class="close-btn" id="closeCatalog">✕</button>
    </div>

    <div class="content">
        <p>Категория 1</p>
        <p>Категория 2</p>
        <p>Категория 3</p>
    </div>
</div>

Внутри блока находятся шапка и контент каталога.
Содержимое можно заменить на любую структуру: список, сетку, фильтры и т.д.

JavaScript

<script>
document.getElementById('openCatalog').addEventListener('click', function () {
    document.getElementById('catList').classList.add('active');
});

document.getElementById('closeCatalog').addEventListener('click', function () {
    document.getElementById('catList').classList.remove('active');
});
</script>

Скрипт выполняет две задачи:

добавляет класс .active при открытии каталога
удаляет его при закрытии

Вся анимация остаётся на стороне CSS.

Итог

Такой подход позволяет реализовать выезжающий каталог без сложной логики и сторонних зависимостей.
Код легко читается, а поведение панели контролируется через один CSS-класс.

<!-- Каталог всплывающее гавно-окно -->
<style>
  /* Сайдбар */
#catList {
    position: fixed;
    top: 0;
    right: 0;
    width: 50%;
    height: 100vh;
    background: #fff;
    border-left: 1px solid #ccc;
    z-index: 99999;

    /* спрятан */
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

/* Активное состояние */
#catList.active {
    transform: translateX(0);
}

/* Шапка */
.blockPanel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #eee;
}

/* Крестик */
.close-btn {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
}

/* Контент */
.content {
    padding: 15px;
}

/* Кнопка */
.draft-btn {
    padding: 10px 15px;
    cursor: pointer;
}

</style>


<!-- Кнопка открытия -->
<button class="draft-btn" id="openCatalog">Каталог</button>

<!-- Выезжающее окно -->
<div class="catList" id="catList">
    <div class="blockPanel">
        <h2>Каталог</h2>
        <button class="close-btn" id="closeCatalog">✕</button>
    </div>

    <div class="content">
        <!-- тут твой каталог -->
        <p>Категория 1</p>
        <p>Категория 2</p>
        <p>Категория 3</p>
    </div>
</div>


<script>
document.getElementById('openCatalog').addEventListener('click', function () {
    document.getElementById('catList').classList.add('active');
});

document.getElementById('closeCatalog').addEventListener('click', function () {
    document.getElementById('catList').classList.remove('active');
});
</script>