Я использую WordPress v6.8.3 и Elementor Pro 3.32.2.
Я хотел бы использовать созданную вручную кнопку анимированного меню-гамбургера для запуска другого элемента, Off-canvas, созданного с помощью Появился собственный внешний виджет Elementor.
Сама по себе анимированная кнопка не представляла проблемы. Присвоим этому элементу кнопки идентификатор «nav-icon1». Вот код HTML-виджета:
Код: Выделить всё
Animated Navigation Icon
* {
margin: 0;
padding: 0;
}
/* Icon 1 */
#nav-icon1 {
width: 60px;
height: 45px;
position: relative;
margin: 50px auto;
transform: rotate(0deg);
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon1 span {
display: block;
position: absolute;
height: 9px;
width: 100%;
background: #d3531a;
border-radius: 9px;
opacity: 1;
left: 0;
transition: .25s ease-in-out;
}
/* Adjust the position of the spans for icon 1 */
#nav-icon1 span:nth-child(1) {
top: 0px;
}
#nav-icon1 span:nth-child(2) {
top: 18px;
}
#nav-icon1 span:nth-child(3) {
top: 36px;
}
#nav-icon1.open span:nth-child(1) {
top: 18px;
transform: rotate(135deg);
}
#nav-icon1.open span:nth-child(2) {
opacity: 0;
left: -60px;
}
#nav-icon1.open span:nth-child(3) {
top: 18px;
transform: rotate(-135deg);
}
$(document).ready(function(){
// Toggle the 'open' class on nav icon 1 when clicked
$('#nav-icon1').click(function(){
$(this).toggleClass('open');
});
});
Теперь самое сложное.
Я не могу найти никакой информации о том, как активировать элемент off-canvas (Имя вне холста: "offcanvastestelement"), нажав кнопку, созданную вручную (идентификатор кнопки: "nav-icon1").
Я пытался проверить исходный код Elementor Pro, но, к сожалению, у меня пока недостаточно опыта в JS.
Могло бы пожалуйста, помогите мне с этим, если это вообще возможно?
Подробнее здесь: https://stackoverflow.com/questions/797 ... -button-ht
Мобильная версия