21 апреля в 13:27
Кнопка гамбургер-меню находится на панели навигации и управляет выпадающим меню. При нажатии выпадает меню и кнопка гамбургера превращается в Х .
При выборе пункта меню, загружается нужная страница и кнопка Х опять превращается в гамбургер. Но вот если кликнуть на странице или на панели навигации, то меню исчезает, а кнопка не перестраивается и остается в Х.
Как мне это исправить?
У меня шаблон bootstrap5 для Drupal 11. В кнопке button панели навигации я разместил:
<div onclick="myFunction(this)">
<div class="bar1">
</div>
<div class="bar2">
</div>
<div class="bar3">
</div>
</div>
<script>
function myFunction(x) {
x.classList.toggle("change");
}
</script>
</button>
CSS
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 25px;
height: 4px;
background-color: var(--bs-btn-border-color);
margin: 5px 0;
transition: 0.4s;
}
/* Rotate first bar */
.change .bar1 {
transform: translate(0, 9px) rotate(-45deg);
}
/* Fade out the second bar */
.change .bar2 {opacity: 0;}
/* Rotate last bar */
.change .bar3 {
transform: translate(0, -9px) rotate(45deg);
}
Работает, но сбивается при клике на странице и панели навигации вне меню. Как мне это исправить?
Спасибо.
