I am in the process of developing a script that will control two key functions upon clicking the menu button on the website. The menu button is designed as a hamburger menu and will toggle the display of the menu links. The first function focuses on showing/hiding the menu links, while the second function involves fading an element on the page. Both of these actions are triggered when the menu button is clicked.
Currently, I am encountering difficulties with the first function which involves creating a delay or fade effect for the menu links. Specifically, I aim to have the '.navbar-item' elements fade in and out when the menu is clicked. As for the second function, the goal is to reset the opacity to 1.0 upon clicking the menu button for a second time. However, I am struggling to ensure that these effects take place only after the completion of the previous action. For instance, clicking the menu should lead to the menu links fading in and the '.values' element dimming. Subsequent clicks on the menu should then fade out the menu links and restore the opacity of '.values' back to 100%.
<div class="container">
<section class="header">
<h2 class="title"><a href="index.html">Title</a>
<li class="client-item"><a class="client-link" href="#"><i class="fa fa-bars"></i></a></li></h2>
</section>
<nav class="navbar" style="display: none;">
<ul class="navbar-list">
<li class="navbar-item"><a class="navbar-link" href="#" target="_top">Contact</a></li>
<li class="navbar-item navbar-link">Store</li>
</ul>
</nav>
<div class="section values">
<div class="container">
<div class="row">
<div class="one-full column">
</div>
</div>
</div>
</div>
// Main Script For Site
$(document).ready(function() {
$('.client-link').click(function() {
$('.navbar').slideToggle("fast");
$('.values').animate({opacity:'0.6'});
});
});