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

Question

[Александр AS]

Доброе времени, суток!
Есть анимированное меню, бургер и название:

<div class="menu-bottom__text">Каталог товаров</div>
                        <div class="icon nav-icon-1">
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                        <nav class="menu-bottom">
                            <ul class="menu-bottom-list">
                                <li class="menu-bottom-list__item">
                                    <a href="#" class="menu-bottom-list__link">Распродажа</a>
                                </li>
                                <li class="menu-bottom-list__item">
                                    <a href="#" class="menu-bottom-list__link">Диваны</a>
                                </li>
                                <li class="menu-bottom-list__item">
                                    <a href="#" class="menu-bottom-list__link">Кровати</a>
                                </li>
                                <li class="menu-bottom-list__item">
                                    <a href="#" class="menu-bottom-list__link">Банкетки и пуфы</a>
                                </li>
                                <li class="menu-bottom-list__item">
                                    <a href="#" class="menu-bottom-list__link">Кресла</a>
                                </li>
                                <li class="menu-bottom-list__item">
                                    <a href="#" class="menu-bottom-list__link">Стулья</a>
                                </li>
                                <li class="menu-bottom-list__item">
                                    <a href="#" class="menu-bottom-list__link">Стулья барные и полубарные</a>
                                </li>
                                <li class="menu-bottom-list__item">
                                    <a href="#" class="menu-bottom-list__link">Комнатные цветы</a>
                                </li>
                                <li class="menu-bottom-list__item">
                                    <a href="#" class="menu-bottom-list__link">Столы</a>
                                </li>
                            </ul>
                        </nav>

.nav-icon-1
    position: absolute 
    top: 10px
    left: 15px
    width: 22px
    height: 22px
    transition: .1s
    cursor: pointer
    display: inline-block
.nav-icon-1 span
    width: 4px
    height: 4px
    background-color: $black
    display: block
    border-radius: 50%
    position: absolute
.nav-icon-1:hover span
    transform: scale(1.2)
    transition: 350ms cubic-bezier(.8, .5, .2, 1.4)
.nav-icon-1 span:nth-child(1)
    left: 0
    top: 0
.nav-icon-1 span:nth-child(2)
    left: 9px
    top: 0
.nav-icon-1 span:nth-child(3)
    right: 0
    top: 0
.nav-icon-1 span:nth-child(4)
    left: 0
    top: 9px
.nav-icon-1 span:nth-child(5)
    position: absolute
    left: 9px
    top: 9px
.nav-icon-1 span:nth-child(6)
    right: 0px
    top: 9px
.nav-icon-1 span:nth-child(7)
    left: 0px
    bottom: 0px
.nav-icon-1 span:nth-child(8)
    position: absolute
    left: 9px
    bottom: 0px
.nav-icon-1 span:nth-child(9)
    right: 0px
    bottom: 0px
.nav-icon-1.open
    transform: rotate(180deg)
    cursor: pointer
    transition: .2s cubic-bezier(.8, .5, .2, 1.4)
.nav-icon-1.open span
    border-radius: 50%
    transition-delay: 200ms
    transition: .5s cubic-bezier(.8, .5, .2, 1.4)
.nav-icon-1.open span:nth-child(2) 
    left: 4px
    top: 4px
.nav-icon-1.open span:nth-child(4) 
    left: 4px
    top: 14px
.nav-icon-1.open span:nth-child(6) 
    right: 4px
    top: 4px
.nav-icon-1.open span:nth-child(8)
    left: 14px
    bottom: 4px

Как правильно написать скрипт, чтобы при открытий и закрытий срабатывала анимация одновременное, а не как сейчас в рознь?

$('.menu-bottom__text').click(function(){
        if ($('.menu-bottom').css('display') == 'none') {
            
            $('.menu-bottom').slideDown();
        } else {
            
            $('.menu-bottom').slideUp();
        }
    });
    
    const icons = document.querySelectorAll('.icon');
    icons.forEach (icon => {  
        icon.addEventListener('click', (event) => {
            icon.classList.toggle("open");
        });
    });

Спасибо!

Comments

[alex-1917]

в каком смысле врозь? РАЗНЫЕ элементы анимируются по очереди или речь про один элемент и на нем две анимашки???

Answer 1

[alex-1917]

www.jooom.ru/toster/toster_30.html

$(function() {
	$('.menu-bottom__text').click(function(){
		$('.menu-bottom').slideToggle();
		$('.nav-icon-1').toggleClass('open');
	});
});

UPD. обновление - кнопка-бургер на ОДНОМ элементе и подрезка стилей в три раза...
www.jooom.ru/toster/toster_31.html
Вот кнопка:
<span class="burger"></span>
Вот стили:

.burger{position:relative;height:22px;width:22px;background:red;display:inline-block;margin-right:15px;vertical-align:middle;transition:transform .2s cubic-bezier(.8,.5,.2,1.4)}
.menu-bottom__text:hover{color:red}
.burger.open{transform:rotate(90deg);background:none}
.burger:before,.burger:after{content:'';width:4px;height:22px;position:absolute;left:4px}
.burger:before{border-left:5px solid #e5e5e5;border-right:5px solid #e5e5e5}
.burger:after{width:22px;height:4px;left:0;top:4px;border-top:5px solid #e5e5e5;border-bottom:5px solid #e5e5e5}
.burger.open:before,.burger.open:after{position:absolute;left:10px;content:' ';height:28px;width:3px;background-color:red;border:none;top:-3px}
.burger.open:before{transform:rotate(45deg)}
.burger.open:after{transform:rotate(-45deg)}

Comments

[Александр AS]

Спасибо!
Пока на тостере были тех неполадки, получилось решить вопрос таким способом..

$('.menu-bottom__text').click(function(){
        if ($('.menu-bottom').css('display') == 'none') {
            $('.menu-bottom').slideDown();
            $('.icon').addClass('open');
        } else {
            $('.menu-bottom').slideUp();
            $('.icon').removeClass('open');
        }
    });

[alex-1917]

обновил ответ, сделал бургер-кнопку на ОДНОМ элементе и стили сократил в три раза)))

Answer 2

[Дмитрий Свиридов]

Я думаю, что это просто лучше делать не программно с помощью jquery-анимации, а с помощью добавления элементам класса с анимацией через css-свойство transition. Тогда у тебя будет параллельно.