Js как сделать выпадающее меню

Узнай, как создать собственное выпадающее меню на JavaScript всего за два простых шага! Самые простые и понятные инструкции, которые сделают твой сайт еще лучше. Не трать время на поиски, все ответы здесь!

Создание выпадающего меню на JavaScript

Содержание

• Шаг 1: Создание HTML структуры
• Шаг 2: Написание скрипта на JavaScript

Шаг 1: Создание HTML структуры

HTML структура для выпадающего меню будет состоять из общего контейнера (например, <div>), который будет содержать в себе элемент <button> и список <ul>, в котором будут располагаться пункты меню (<li>).

    
    <div id="dropdown">
        <button>Меню</button>
        <ul id="dropdownMenu" style="display: none;">
            <li>Пункт 1</li>
            <li>Пункт 2</li>
            <li>Пункт 3</li>
        </ul>
    </div>
    
    

Шаг 2: Написание скрипта на JavaScript

JavaScript код будет реагировать на клик по кнопке и переключать видимость списка с пунктами меню.

    
    <script>
    document.getElementById('dropdown').addEventListener('click', function() {
        var menu = document.getElementById('dropdownMenu');
        if (menu.style.display === 'none') {
            menu.style.display = 'block';
        } else {
            menu.style.display = 'none';
        }
    });
    </script>