JQuery Hamburger Menu Functions

Question

Below is the script I am trying to write to control two functions when the website's menu button is clicked; it is a hamburger menu that toggles the menu links. The first function shows/hides the menu links and the second fades an element on the page, both activated when the menu button is clicked.

In the first function, I am having trouble creating a delay/fadeIn for the menu links. I need '.navbar-item' to fade in and out when the menu is clicked. In the second function, I need to revert the opacity to 1.0 when the menu is clicked a second time. I can not get any of the effects to occur after the first effect has completed, i.e Menu is clicked to fade in menu links and dim '.values', menu is clicked to fade out menu links and revert '.values' to 100% opacity.

<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'});
  });
});

Please provide your code in the form of a code snippet (see text editor) including the HTML and CSS. Alternatively you can use JSFiddle.net. — Clarus Dignus, Apr 05 '16 at 23:42
No need for two `$(document).ready(function(){...});`, you can add all the code in one. Also, your two click events map to the same element(s) (`.client-link`) and are fired on the same event - those can be consolidated as well. — , Apr 05 '16 at 23:43

score 1 · Accepted Answer · edited May 23 '17 at 11:59

This answer gives how to get simultaneous animations. jQuery's own docs describe slideToggle, including the bits you'd need to set similarly to how animate would need to be set.

I might also point out that there's no reason to separate the animate calls like you have. Since they're triggered by the same thing, they should be called from the same place.

Something like this, I think:

$(document).ready(function() {
  $('.client-link').click(function() {
    var $this = $(this);
    var opening = !$this.data('isOpen');
    $this.data('isOpen',opening);
    if(opening) {
      // opening animations
      $('.navbar').slideDown({duration:'fast',queue:false});
      $('.values').animate({opacity:1},{queue:false});
    } else {
      // closing animations
      $('.navbar').slideUp({duration:'fast',queue:false});
      $('.values').animate({opacity:0},{queue:false});
    }
  });
});

Though you may be better off moving your animations to CSS and just toggling a class.

score 1 · Answer 2 · answered Apr 05 '16 at 23:49

You were very close, you have just made some simple mistakes. Here is a JSFiddle gives you a solution to your problem: https://jsfiddle.net/nv1gytrs/1/

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<div class="client-link"></div>
<div class="navbar"></div>
<div class="values"></div>

CSS:

.client-link {
    height: 100px;
    width: 100px;
    border: 2px solid green;
 }
 .navbar {
    height: 100px;
    width: 100px;
    border: 2px solid red;
 }
 .values {
    height: 100px;
    width: 100px;
    border: 2px solid blue;
    transition: all 1s;
 }
 .fade {
    opacity: 0.2;
 }

JS:

// Main Script For Site

$(document).ready(function() {
    $('.client-link').on("click", function() {
        $('.navbar').slideToggle("fast");
        $('.values').toggleClass("fade");
    });
});

Of course, all of your HTML and CSS would be unique to what you are trying to accomplish, this is just an example.

JQuery Hamburger Menu Functions

2 Answers2