Как на javascript сделать меню

В этой статье мы рассмотрим, как создать адаптивное меню на JavaScript с примерами кода, который можно использовать в ваших проектах. Научимся создавать меню с различными свойствами и функциями, а также разберемся, как сделать его отзывчивым.

В JavaScript можно создать меню, используя элементы управления HTML, в частности пункты списка (<ul> и <li>). Просто добавьте их в ваш документ HTML:

<ul>
  <li>Пункт меню 1</li>
  <li>Пункт меню 2</li>
  <li>Пункт меню 3</li>
</ul>

Это даст вам базовый список пунктов меню, представленных в виде списка. Чтобы добавить JavaScript в меню, мы можем использовать атрибут onclick HTML. Например, давайте добавим обработчик нажатия для первого пункта меню:

<ul>
  <li onclick="alert('Пункт меню 1')">Пункт меню 1</li>
  <li>Пункт меню 2</li>
  <li>Пункт меню 3</li>
</ul>

Теперь, когда мы нажимаем на первый пункт меню, будет выводиться диалоговое окно с сообщением «Пункт меню 1».

Мы также можем добавить другие элементы управления и использовать JavaScript для настройки стилей, а также для различных действий. Например, мы можем добавить подменю для первого пункта меню, используя элементы управления HTML и JavaScript:

<ul>
  <li onclick="showSubmenu()">Пункт меню 1</li>
  <li>Пункт меню 2</li>
  <li>Пункт меню 3</li>
</ul>

<ul id="submenu" style="display:none">
  <li>Подменю 1</li>
  <li>Подменю 2</li>
  <li>Подменю 3</li>
</ul>

<script>
function showSubmenu() {
  document.getElementById('submenu').style.display = 'block';
}
</script>

Этот код добавляет новый список пунктов меню, который отображается только после нажатия на первый пункт меню. Для этого мы используем JavaScript-функцию, чтобы изменить стиль подменю и показать его.

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