Висувний каталог праворуч на 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>