Как реализовать появление меню с анимацией при клике с помощью JS?

Question

Буду очень признателен за помощь.

Нужно реализовать появление меню при клике. Также, чтобы отрабатывала анимация.

При нажатии на .dropdown_btn должен появляться .dropdown_content. Также .dropdown_btn должен сменить цвет на синий, пока меню не закроется. Иконка (стрелочка) должна поворачиваться вниз при закрытом меню и вверх при открытом.

Вот так:

<nav>

                <ul>
                    <li class="dropdown">
                        <a class="dropdown_btn">Features <img src="icon/dropdown.svg" alt=""></a>

                        <div class="dropdown_content" id="dropdown_content">
                             <p>Здесь контент меню</p>                        
                        </div>
                    </li>

                    <li><a href="customers.html">Customers</a></li>
                    <li><a href="#">Company</a></li>
                    <li><a href="#">Pricing</a></li>
                </ul>

            </nav>

Заранее спасибо за объяснение.

Хорошего вечера!

Answer 1

<nav>
<div class="wrapper">
    <ul> 
        
        <li class="clickSlide">
          <a href="javascript:void(0)">Примеры <span>&#x25BC;</span></a>
            <ul>
                <li><a href="#">Пример</a></li>
                <li><a href="#">И тут пример</a></li>
                <li><a href="#">И даже тут</a></li>
            </ul>
        </li>
    </ul>
</div>
</nav>
$(document).ready(function(){
    
    $(".clickSlide ul").hide();
    $(".clickSlide").click(function(){
        $(this).children("ul").stop(true,true).slideToggle("fast"),
        $(this).toggleClass("dropdown-active");
    });
    
});

БЛОГ НА HUSL

Как реализовать появление меню с анимацией при клике с помощью JS?

Ответы (1 шт):