Как настроить прокрутку в меню при клике?

Question

Эмиль

javascript

Как настроить прокрутку в меню при клике?

Каким образом можно реализовать в HTML блок с.menu и саб-меню, которое изначально скрыто, но открывается по клику, а также заголовок меню прокручивается вверх? Представлен пример кода:

7 марта 2024 г. 14:29

Ответы на вопрос 2

Похожие вопросы

Answer 1

Для реализации данной функциональности можно использовать JavaScript. Вот пример кода, который решает вашу задачу:

HTML:
```html
<div class="menu">
    <div class="menu-header">Меню</div>
    <ul class="sub-menu">
        <li>Пункт 1</li>
        <li>Пункт 2</li>
        <li>Пункт 3</li>
    </ul>
</div>
```

CSS:
```css
.menu {
    position: relative;
    width: 200px;
}

.sub-menu {
    display: none;
}

.menu-header {
    cursor: pointer;
}
```

JavaScript:
```javascript
document.querySelector('.menu-header').addEventListener('click', function() {
    var subMenu = document.querySelector('.sub-menu');
    if(subMenu.style.display === 'none') {
        subMenu.style.display = 'block';
        this.style.position = 'relative';
        this.style.top = '-100px'; // прокручиваем заголовок вверх
    } else {
        subMenu.style.display = 'none';
        this.style.top = '0px'; // возвращаем заголовок на место
    }
});
```

Этот код добавляет обработчик события "click" на заголовок меню. При клике на заголовок меню, сначала проверяется, отображается ли в данный момент подменю. Если подменю скрыто, оно отображается (display: block) и заголовок прокручивается вверх. Если подменю уже отображается, оно скрывается (display: none) и заголовок возвращается на место.

Answer 2

Вопрос решен, код исправно работал, проблема была в маленьком списке, так же стоит добавить задержку выполнения скрипта setTimeout. 
 И все работает.