Spinning Flyout menu

onClick event that spins + to an x and a menu flyout appears

by Thomas Orthbandt

HTML

<div id="circle-mod">
  <div id="container-circle" class="">
    <div id="buttonFlyout" class="btnBg hide" style="display: none;">
      <ul>
        <li><a href="#">Invoice</a></li>
        <li><a href="#">Estimate</a></li>
        <li><a href="#">Receive Payment</a></li>
        <li><a href="#">Expense</a></li>
        <div class="caret-right"></div>
        <li class="moreLess"><a href="#">Show More</a></li>
      </ul>
    </div>
    <div id="innerBtn">
      <div id="base-button" class="">
        <div><span><img src="http://twodesignz.com/portfolio/intuit_projects/harmony/globalNav/jquery_v1/img/cn-plus.png"></span></div>
      </div>
    </div>
  </div>
</div>

CSS

#circle-mod {
	background: 			#193048;
	border-radius: 			100px;
 	height: 				55px;
	left:					42%;
  	position: 				absolute;
	top:					3px;
	width: 					55px;
  	z-index:				999999;
}

#container-circle {
	border-radius: 			100px;
	height: 				45px;
  	left: 					5px;
  	position: 				relative;
	top: 					1px;
	transition:		 		all .3s ease-in 0s;
  	width: 					45px;
}

#container-circle:hover {
	background:				#153e56;
	background-position: 	0px 0px;
	border-radius: 			100px;
	height:					45px;
	left:					5px;
	position:				absolute;
	top:					1px;
	width:					45px;
}

#buttonFlyout.open {
	left: 					-57px;
	top: 					42px;
}

#innerBtn {
	border-radius: 			100px;
	height: 				35px;
  	left: 					5px;
  	position: 				absolute;
	top: 					5px;
	transition: 			all 0.9s ease-in 0s;
  	width: 					35px;
}

/*****************************************************
	BASE BUTTON
*****************************************************/
#base-button {
	border-radius: 			100px;
	box-shadow: 			rgba(0,0,0,.5) 0px 0px 2px;
  	height:					25px;
	left: 					5px;
	position: 				absolute;
	text-align: 			center;
	top: 					5px;
	transition:		 		all .9s ease-in 0s;
	width: 					25px;
}

#base-button:active {
  	height: 				25px; 
  	width: 					25px;
}

#base-button div span {
	display: 				block;
	height: 				25px;
	transform: 				rotate(0);
	transition: 			all 600ms;
	width:					26px;
}

#base-button.open div span {
	height:					25px;
	transform: 				rotate(225deg);
	transition: 			all 1200ms;
	width:					26px;
}

#base-button div {
	background: 			#02708D; 
	border: 				1px solid #fff;
	border-radius: 			100px;
	cursor:		 			pointer;
	height: 				25px;
	margin: 				0px;
	padding: 				0;
	text-align: 			center;
	width: 					25px;
}

#base-button div span img {
	height: 				14px;
	margin: 				5px 0;
	width: 					14px;
}

/*****************************************************
	BUTTON BACKGROUND
*****************************************************/
.btnBg {
	box-shadow: 			0px...

JavaScript

// FadeIn/Out the SELECTED class
$(function() {
  var delay = 40,
    delayTime, btns = $('.btnBg');

  $('#base-button').toggle(function() {
      $(this).addClass('open');

      btns.each(function(i) {
        delaytime = i * delay;
        var element = $(this);

        window.setTimeout(function() {
          element.addClass('open').fadeIn(500);
        }, delayTime);
      });
    },

    function() {
      $(this).removeClass('open');

      var ii = 100;
      $($(btns).get().reverse()).each(function(i) {
        delayTime = i * delay;
        var element = $(this);
        window.setTimeout(function() {
          element.removeClass('show open').fadeOut(100)
        }, delaytime);
      });
    });
}); // END function

$(function() {
  $('#base-button').toggle(function() {
      $(this).closest('#container-circle').addClass('selected')
    },
    function() {
      $(this).closest('#container-circle').removeClass('selected')
    });
});