Как настроить меню так, чтобы при нажатии на кнопку открывались два разных подменю?

  • 12 сентября 2023 г. 12:47
Ответы на вопрос 1
Чтобы настроить меню таким образом, чтобы при нажатии на кнопку открывались два разных подменю, вам может потребоваться некоторый код/скрипт.

Вот пример кода на JavaScript, который позволяет достичь такого эффекта:

HTML:
```html
<button class="menu-btn">Открыть меню</button>

<ul class="menu">
  <li><a href="#">Пункт 1</a></li>
  <li><a href="#">Пункт 2</a></li>
  <li><a href="#">Пункт 3</a></li>
</ul>

<ul class="submenu-1">
  <li><a href="#">Подпункт 1.1</a></li>
  <li><a href="#">Подпункт 1.2</a></li>
  <li><a href="#">Подпункт 1.3</a></li>
</ul>

<ul class="submenu-2">
  <li><a href="#">Подпункт 2.1</a></li>
  <li><a href="#">Подпункт 2.2</a></li>
  <li><a href="#">Подпункт 2.3</a></li>
</ul>
```

CSS:
```css
.menu {
  display: none;
}

.submenu-1 {
  display: none;
}

.submenu-2 {
  display: none;
}
```

JavaScript:
```javascript
document.querySelector('.menu-btn').addEventListener('click', function() {
  var menu = document.querySelector('.menu');
  menu.style.display = (menu.style.display === 'none' ? 'block' : 'none');
  
  var submenu1 = document.querySelector('.submenu-1');
  var submenu2 = document.querySelector('.submenu-2');
  
  if (submenu1.style.display === 'none' && submenu2.style.display === 'none') {
    submenu1.style.display = 'block';
    submenu2.style.display = 'block';
  } else {
    submenu1.style.display = 'none';
    submenu2.style.display = 'none';
  }
});
```

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

Убедитесь, что код помещен внутрь `<script>` тега в вашем HTML-документе или внешнем файле JavaScript, и подключен соответствующим образом.
Похожие вопросы