JSFiddle - React, Tailwind, and code Playground

by gregborbonus

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<div id="burgerButton">
<p>
MENU BUTTON
</p>
</div>
<div class="navigation-item">
Item One
</div>
<div class="navigation-item">
Item Two
</div>
<div class="navigation-item">
Item Three
</div>
<div class="navigation-item">
Item Four
</div>
<div class="navigation-item">
Item Five
</div>
<div class="navigation-item">
Item Six
</div>
<div class="navigation-item">
Item One
</div>
<div class="score">

</div>

CSS

#burgerButton {
  width:300px;
  height:100px;
  border:1px solid #000;
}

.navigation-item {
  width: 100px;
  	margin-left: 10em;
	  background: #33A1C9;
	  border: 1px solid #000;
}

JavaScript

// jQuery 1.11.0 on DOM ready

var $hamburgerMenuButton = $('#burgerButton');
var $navTitle = $('.navigation-item');
var $score = $('.score');

$hamburgerMenuButton.click(function(e) {

e.stopPropagation();

    if ( !$hamburgerMenuButton.hasClass('open')) {	    	

    	console.log('hamburgerMenuButton does NOT have class open');
        if ( $navTitle.is(':animated') ) {
    	$score.append('<br>animating ');  
		    	return false;
		    }
    	$hamburgerMenuButton.addClass('open');
    	console.log('class open ADDED to hamburgerMenuButton');
      $score.append('<br>class open ADDED ');


			var delay = 0;
			$navTitle.each(function(){
			    $(this).delay(delay).animate({
			        'margin-left':'0px'
			    },500,'easeOutQuint'); 
			    delay += 33;
			}); // animation end
      
      $score.append('<br>clicked ');
      
	} // if end	

    else {
    
    	console.log('hamburgerMenuButton does HAVE class open');
     		if ( $navTitle.is(':animated') ) {
    	$score.append('<br>animating ');  
		    	return false;
		    }
    	$hamburgerMenuButton.removeClass('open');
    	console.log('class open REMOVED from hamburgerMenuButton');
      $score.append('<br>class open REMOVED ');



			var delay = 0;
			$navTitle.each(function(){
			    $(this).delay(delay).animate({
			        'margin-left':'10em'
			    },500,'easeOutQuint'); 
			    delay += 33;
			}); // animation end		    	
      
      $score.append('<br>clicked again');
      
	} // else end				
}); // $hamburgerMenuButton click end