jQuery Plugins › jQuery Menu Plugins › jQuery Flyout Menu

Path Style Flyout Menu With jQuery And CSS3 - Flyout Menu

File Size: 13.6 KB
Views Total: 10988
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Demo Download

More in this category...

View Recommended Plugins

TOP 30 jQuery Plugins 2023

Chrome, IE10+, FireFox, Opera, Safari#circle menu
Path Style Flyout Menu With jQuery And CSS3 - Flyout Menu

Just another jQuery implementation of a Path.com style animated flyout circle menu that works on all major browsers which have CSS3 support.

How to use it:

1. Create the flyout menu with a toggle button following the markup structure like this:

<div class="flyout-wrap">
  <a class="flyout-btn" href="#" title="Toggle">
    <span>Toggle Button</span>
  </a>
  <ul class="flyout flyout-init">
    <li><a href="#"><span>Item</span></a></li>
    <li><a href="#"><span>Item</span></a></li>
    <li><a href="#"><span>Item</span></a></li>
    <li><a href="#"><span>Item</span></a></li>
    <li><a href="#"><span>Item</span></a></li>
    <li><a href="#"><span>Item</span></a></li>
  </ul>
</div>

2. The basic CSS styles for the flyout menu.

.flyout-wrap {
  position: relative;
  height: 191px
}

.flyout-wrap .flyout {
  position: relative;
  margin: 0 0 1px 6px;
  line-height: 0
}

.flyout-wrap .flyout>li {
  position: absolute;
  display: block;
  height: 170px;
  background: #ff0;
  -webkit-transform-origin: 12.5px bottom;
  -ms-transform-origin: 12.5px bottom;
  transform-origin: 12.5px bottom
}

.flyout-wrap .flyout>li:nth-of-type(1) {
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg)
}

.flyout-wrap .flyout>li:nth-of-type(2) {
  -webkit-transform: rotate(18deg);
  -ms-transform: rotate(18deg);
  transform: rotate(18deg)
}

.flyout-wrap .flyout>li:nth-of-type(3) {
  -webkit-transform: rotate(36deg);
  -ms-transform: rotate(36deg);
  transform: rotate(36deg)
}

.flyout-wrap .flyout>li:nth-of-type(4) {
  -webkit-transform: rotate(54deg);
  -ms-transform: rotate(54deg);
  transform: rotate(54deg)
}

.flyout-wrap .flyout>li:nth-of-type(5) {
  -webkit-transform: rotate(72deg);
  -ms-transform: rotate(72deg);
  transform: rotate(72deg)
}

.flyout-wrap .flyout>li:nth-of-type(6) {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg)
}

.flyout-wrap .flyout>li a {
  position: absolute;
  display: block;
  width: 26px;
  height: 26px;
  overflow: hidden;
  text-indent: -99999px;
  background: #444;
  border: 3px solid #fff;
  border-radius: 50%;
  -webkit-box-shadow: rgba(0,0,0,.4)0 0 5px 0, rgba(0,0,0,.2)0 0 0 1px, inset rgba(0,0,0,.5)0 0 2px 0;
  box-shadow: rgba(0,0,0,.4)0 0 5px 0, rgba(0,0,0,.2)0 0 0 1px, inset rgba(0,0,0,.5)0 0 2px 0
}

.flyout-wrap .flyout>li a:active {
  background: #000;
  border-color: #555
}

.flyout-wrap .flyout>li a:active span { opacity: .3 }

.flyout-wrap .flyout>li a span {
  display: block;
  width: 26px;
  height: 26px;
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNnB4JyBoZWlnaHQ9JzE2cHgnPjxwYXRoIGZpbGw9JyNmZmYnIGQ9J00xMS4wNDUsOS44NzlsMS45MDYsNi4xMTRsLTQuOTQ5LTMuNzkxTDMuMDU5LDE2bDEuOS02LjExN0wwLDYuMTE0bDYuMTIzLDAuMDEzTDcuOTk4LDBsMS44NzksNi4xMkwxNiw2LjEwNEwxMS4wNDUsOS44Nzl6Jy8+PC9zdmc+DQo=) no-repeat center center;
  -webkit-background-size: 16px 16px;
  background-size: 16px 16px
}

.flyout-wrap .flyout-init li { display: none }

.flyout-wrap .flyout li a {
  top: 150px;
  -webkit-animation: contract .35s ease-out 1 backwards;
  animation: contract .35s ease-out 1 backwards
}

.flyout-wrap .flyout.expand li a {
  top: 10px;
  -webkit-animation: expand .6s ease 1 backwards;
  animation: expand .6s ease 1 backwards
}

.flyout-wrap .flyout.fade li a.clicked {
  top: 10px;
  -webkit-animation: clicked .5s ease-out 1 forwards;
  animation: clicked .5s ease-out 1 forwards
}

.flyout-wrap .flyout.fade li a:not(.clicked) {
  top: 10px;
  -webkit-animation: fade .5s ease-out 1 forwards;
  animation: fade .5s ease-out 1 forwards
}

.flyout-wrap .flyout.fade li a:not(.clicked) span {
  opacity: .1;
  -webkit-transition: opacity .5s ease;
  transition: opacity .5s ease
}

.flyout-wrap .flyout li:nth-of-type(1) a {
  -webkit-animation-delay: .2s;
  animation-delay: .2s
}

.flyout-wrap .flyout li:nth-of-type(1) a:not(.clicked) span {
  -webkit-animation: spin1-contract .9s ease-out 1 backwards;
  animation: spin1-contract .9s ease-out 1 backwards
}

.flyout-wrap .flyout.expand li:nth-of-type(1) a {
  -webkit-animation-delay: 0s;
  animation-delay: 0s
}

.flyout-wrap .flyout.expand li:nth-of-type(1) a span {
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-animation: spin1-expand .6s ease-out 1 backwards;
  animation: spin1-expand .6s ease-out 1 backwards
}

.flyout-wrap .flyout.fade li:nth-of-type(1) a.clicked span {
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg)
}

.flyout-wrap .flyout li:nth-of-type(2) a {
  -webkit-animation-delay: .16s;
  animation-delay: .16s
}

.flyout-wrap .flyout li:nth-of-type(2) a:not(.clicked) span {
  -webkit-animation: spin2-contract .9s ease-out 1 backwards;
  animation: spin2-contract .9s ease-out 1 backwards
}

.flyout-wrap .flyout.expand li:nth-of-type(2) a {
  -webkit-animation-delay: .04s;
  animation-delay: .04s
}

.flyout-wrap .flyout.expand li:nth-of-type(2) a span {
  -webkit-transform: rotate(-18deg);
  -ms-transform: rotate(-18deg);
  transform: rotate(-18deg);
  -webkit-animation: spin2-expand .6s ease-out 1 backwards;
  animation: spin2-expand .6s ease-out 1 backwards
}

.flyout-wrap .flyout.fade li:nth-of-type(2) a.clicked span {
  -webkit-transform: rotate(-18deg);
  -ms-transform: rotate(-18deg);
  transform: rotate(-18deg)
}

.flyout-wrap .flyout li:nth-of-type(3) a {
  -webkit-animation-delay: .12s;
  animation-delay: .12s
}

.flyout-wrap .flyout li:nth-of-type(3) a:not(.clicked) span {
  -webkit-animation: spin3-contract .9s ease-out 1 backwards;
  animation: spin3-contract .9s ease-out 1 backwards
}

.flyout-wrap .flyout.expand li:nth-of-type(3) a {
  -webkit-animation-delay: .08s;
  animation-delay: .08s
}

.flyout-wrap .flyout.expand li:nth-of-type(3) a span {
  -webkit-transform: rotate(-36deg);
  -ms-transform: rotate(-36deg);
  transform: rotate(-36deg);
  -webkit-animation: spin3-expand .6s ease-out 1 backwards;
  animation: spin3-expand .6s ease-out 1 backwards
}

.flyout-wrap .flyout.fade li:nth-of-type(3) a.clicked span {
  -webkit-transform: rotate(-36deg);
  -ms-transform: rotate(-36deg);
  transform: rotate(-36deg)
}

.flyout-wrap .flyout li:nth-of-type(4) a {
  -webkit-animation-delay: .08s;
  animation-delay: .08s
}

.flyout-wrap .flyout li:nth-of-type(4) a:not(.clicked) span {
  -webkit-animation: spin4-contract .9s ease-out 1 backwards;
  animation: spin4-contract .9s ease-out 1 backwards
}

.flyout-wrap .flyout.expand li:nth-of-type(4) a {
  -webkit-animation-delay: .12s;
  animation-delay: .12s
}

.flyout-wrap .flyout.expand li:nth-of-type(4) a span {
  -webkit-transform: rotate(-54deg);
  -ms-transform: rotate(-54deg);
  transform: rotate(-54deg);
  -webkit-animation: spin4-expand .6s ease-out 1 backwards;
  animation: spin4-expand .6s ease-out 1 backwards
}

.flyout-wrap .flyout.fade li:nth-of-type(4) a.clicked span {
  -webkit-transform: rotate(-54deg);
  -ms-transform: rotate(-54deg);
  transform: rotate(-54deg)
}

.flyout-wrap .flyout li:nth-of-type(5) a {
  -webkit-animation-delay: .04s;
  animation-delay: .04s
}

.flyout-wrap .flyout li:nth-of-type(5) a:not(.clicked) span {
  -webkit-animation: spin5-contract .9s ease-out 1 backwards;
  animation: spin5-contract .9s ease-out 1 backwards
}

.flyout-wrap .flyout.expand li:nth-of-type(5) a {
  -webkit-animation-delay: .16s;
  animation-delay: .16s
}

.flyout-wrap .flyout.expand li:nth-of-type(5) a span {
  -webkit-transform: rotate(-72deg);
  -ms-transform: rotate(-72deg);
  transform: rotate(-72deg);
  -webkit-animation: spin5-expand .6s ease-out 1 backwards;
  animation: spin5-expand .6s ease-out 1 backwards
}

.flyout-wrap .flyout.fade li:nth-of-type(5) a.clicked span {
  -webkit-transform: rotate(-72deg);
  -ms-transform: rotate(-72deg);
  transform: rotate(-72deg)
}

.flyout-wrap .flyout li:nth-of-type(6) a {
  -webkit-animation-delay: 0s;
  animation-delay: 0s
}

.flyout-wrap .flyout li:nth-of-type(6) a:not(.clicked) span {
  -webkit-animation: spin6-contract .9s ease-out 1 backwards;
  animation: spin6-contract .9s ease-out 1 backwards
}

.flyout-wrap .flyout.expand li:nth-of-type(6) a {
  -webkit-animation-delay: .2s;
  animation-delay: .2s
}

.flyout-wrap .flyout.expand li:nth-of-type(6) a span {
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  -webkit-animation: spin6-expand .6s ease-out 1 backwards;
  animation: spin6-expand .6s ease-out 1 backwards
}

.flyout-wrap .flyout.fade li:nth-of-type(6) a.clicked span {
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg)
}

.flyout-wrap .flyout-btn {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 9999;
  width: 36px;
  height: 36px;
  overflow: hidden;
  text-indent: -99999px;
  background: #f76f54;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f76f54), color-stop(49%, #dd3535), color-stop(51%, #d32121), to(#c61f1f));
  background: -webkit-linear-gradient(top, #f76f54 0, #dd3535 49%, #d32121 51%, #c61f1f 100%);
  background: linear-gradient(top, #f76f54 0, #dd3535 49%, #d32121 51%, #c61f1f 100%);
  border: 4px solid #fff;
  border-radius: 50%;
  outline: 0;
  -webkit-box-shadow: rgba(0,0,0,.3)0 3px 8px 0, rgba(0,0,0,.2)0 0 0 1px, inset rgba(0,0,0,.3)0 0 0 1px, inset rgba(255,255,255,.3)0 1px 0 1px;
  box-shadow: rgba(0,0,0,.3)0 3px 8px 0, rgba(0,0,0,.2)0 0 0 1px, inset rgba(0,0,0,.3)0 0 0 1px, inset rgba(255,255,255,.3)0 1px 0 1px
}

.flyout-wrap .flyout-btn span {
  display: block;
  width: 36px;
  height: 36px;
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMHB4JyBoZWlnaHQ9JzIwcHgnPjxnPjxwYXRoIGZpbGw9JyNmZmYnIGQ9J00yMCwxMS40MDJjMCwwLjQ1My0wLjM2NywwLjgyLTAuODIyLDAuODJIMC44MmMtMC40NTMsMC0wLjgyLTAuMzY3LTAuODItMC44MlY4LjU5OCBjMC0wLjQ1NCwwLjM2Ny0wLjgyMSwwLjgyLTAuODIxaDE4LjM1N0MxOS42MzMsNy43NzYsMjAsOC4xNDQsMjAsOC41OThWMTEuNDAyeicvPjxwYXRoIGZpbGw9JyNmZmYnIGQ9J004LjU5OCwyMGMtMC40NTMsMC0wLjgyMS0wLjM2Ny0wLjgyMS0wLjgyVjAuODIxYzAtMC40NTIsMC4zNjgtMC44MiwwLjgyMS0wLjgyaDIuODA0IGMwLjQ1MywwLDAuODIsMC4zNjgsMC44MiwwLjgyVjE5LjE4YzAsMC40NTMtMC4zNjcsMC44Mi0wLjgyLDAuODJIOC41OTh6Jy8+PC9nPjwvc3ZnPg0K) no-repeat center center;
  -webkit-transition: -webkit-transform .4s ease;
  transition: transform .4s ease
}

.flyout-wrap .flyout-btn.btn-rotate span {
  -webkit-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  transform: rotate(-135deg)
}

.flyout-wrap .ani-expand 0 {
  top:150px
}

.flyout-wrap .ani-expand 50% {
  top:-10px
}

.flyout-wrap .ani-expand 70% {
  top:15px
}

.flyout-wrap .ani-contract 0, .flyout-wrap .ani-expand 100% {
  top:10px
}

.flyout-wrap .ani-contract 40% {
  top:-25px
}

.flyout-wrap .ani-contract 100% {
  top:150px
}

.flyout-wrap .ani-clicked 0 {
  opacity:1;
  -webkit-transform:scale(1);
  -ms-transform:scale(1);
  transform:scale(1)
}

.flyout-wrap .ani-clicked 100% {
  opacity:0;
  -webkit-transform:scale(5);
  -ms-transform:scale(5);
  transform:scale(5)
}

3. The core CSS animations for the menu expand effects.

@-webkit-keyframes 
expand { 0% {
top:150px
}
50% {
top:-10px
}
70% {
top:15px
}
100% {
top:10px
}
}
@keyframes 
expand { 0% {
top:150px
}
50% {
top:-10px
}
70% {
top:15px
}
100% {
top:10px
}
}
@-webkit-keyframes 
contract { 0% {
top:10px
}
40% {
top:-25px
}
100% {
top:150px
}
}
@keyframes 
contract { 0% {
top:10px
}
40% {
top:-25px
}
100% {
top:150px
}
}
@-webkit-keyframes 
clicked { 0% {
-webkit-transform:scale(1);
transform:scale(1);
opacity:1;
top:10px
}
90% {
top:10px
}
99% {
-webkit-transform:scale(6);
transform:scale(6);
opacity:0;
top:150px
}
100% {
-webkit-transform:scale(0);
transform:scale(0)
}
}
@keyframes 
clicked { 0% {
-webkit-transform:scale(1);
transform:scale(1);
opacity:1;
top:10px
}
90% {
top:10px
}
99% {
-webkit-transform:scale(6);
transform:scale(6);
opacity:0;
top:150px
}
100% {
-webkit-transform:scale(0);
transform:scale(0)
}
}
@-webkit-keyframes 
fade { 0% {
-webkit-transform:scale(1);
transform:scale(1);
opacity:1;
top:10px
}
90% {
opacity:0;
top:10px
}
99% {
-webkit-transform:scale(0);
transform:scale(0);
top:150px
}
100% {
-webkit-transform:scale(0);
transform:scale(0)
}
}
@keyframes 
fade { 0% {
-webkit-transform:scale(1);
transform:scale(1);
opacity:1;
top:10px
}
90% {
opacity:0;
top:10px
}
99% {
-webkit-transform:scale(0);
transform:scale(0);
top:150px
}
100% {
-webkit-transform:scale(0);
transform:scale(0)
}
}
@-webkit-keyframes 
spin1-expand { 0% {
-webkit-transform:rotate(0deg);
transform:rotate(0deg)
}
100%, 60% {
-webkit-transform:rotate(-360deg);
transform:rotate(-360deg)
}
}
@keyframes 
spin1-expand { 0% {
-webkit-transform:rotate(0deg);
transform:rotate(0deg)
}
100%, 60% {
-webkit-transform:rotate(-360deg);
transform:rotate(-360deg)
}
}
@-webkit-keyframes 
spin1-contract { 0% {
-webkit-transform:rotate(0deg);
transform:rotate(0deg)
}
100%, 50% {
-webkit-transform:rotate(360deg);
transform:rotate(360deg)
}
}
@keyframes 
spin1-contract { 0% {
-webkit-transform:rotate(0deg);
transform:rotate(0deg)
}
100%, 50% {
-webkit-transform:rotate(360deg);
transform:rotate(360deg)
}
}
@-webkit-keyframes 
spin2-expand { 0% {
-webkit-transform:rotate(-18deg);
transform:rotate(-18deg)
}
100%, 60% {
-webkit-transform:rotate(-378deg);
transform:rotate(-378deg)
}
}
@keyframes 
spin2-expand { 0% {
-webkit-transform:rotate(-18deg);
transform:rotate(-18deg)
}
100%, 60% {
-webkit-transform:rotate(-378deg);
transform:rotate(-378deg)
}
}
@-webkit-keyframes 
spin2-contract { 0% {
-webkit-transform:rotate(-18deg);
transform:rotate(-18deg)
}
100%, 50% {
-webkit-transform:rotate(360deg);
transform:rotate(360deg)
}
}
@keyframes 
spin2-contract { 0% {
-webkit-transform:rotate(-18deg);
transform:rotate(-18deg)
}
100%, 50% {
-webkit-transform:rotate(360deg);
transform:rotate(360deg)
}
}
@-webkit-keyframes 
spin3-expand { 0% {
-webkit-transform:rotate(-36deg);
transform:rotate(-36deg)
}
100%, 60% {
-webkit-transform:rotate(-396deg);
transform:rotate(-396deg)
}
}
@keyframes 
spin3-expand { 0% {
-webkit-transform:rotate(-36deg);
transform:rotate(-36deg)
}
100%, 60% {
-webkit-transform:rotate(-396deg);
transform:rotate(-396deg)
}
}
@-webkit-keyframes 
spin3-contract { 0% {
-webkit-transform:rotate(-36deg);
transform:rotate(-36deg)
}
100%, 50% {
-webkit-transform:rotate(360deg);
transform:rotate(360deg)
}
}
@keyframes 
spin3-contract { 0% {
-webkit-transform:rotate(-36deg);
transform:rotate(-36deg)
}
100%, 50% {
-webkit-transform:rotate(360deg);
transform:rotate(360deg)
}
}
@-webkit-keyframes 
spin4-expand { 0% {
-webkit-transform:rotate(-54deg);
transform:rotate(-54deg)
}
100%, 60% {
-webkit-transform:rotate(-414deg);
transform:rotate(-414deg)
}
}
@keyframes 
spin4-expand { 0% {
-webkit-transform:rotate(-54deg);
transform:rotate(-54deg)
}
100%, 60% {
-webkit-transform:rotate(-414deg);
transform:rotate(-414deg)
}
}
@-webkit-keyframes 
spin4-contract { 0% {
-webkit-transform:rotate(-54deg);
transform:rotate(-54deg)
}
100%, 50% {
-webkit-transform:rotate(360deg);
transform:rotate(360deg)
}
}
@keyframes 
spin4-contract { 0% {
-webkit-transform:rotate(-54deg);
transform:rotate(-54deg)
}
100%, 50% {
-webkit-transform:rotate(360deg);
transform:rotate(360deg)
}
}
@-webkit-keyframes 
spin5-expand { 0% {
-webkit-transform:rotate(-72deg);
transform:rotate(-72deg)
}
100%, 60% {
-webkit-transform:rotate(-432deg);
transform:rotate(-432deg)
}
}
@keyframes 
spin5-expand { 0% {
-webkit-transform:rotate(-72deg);
transform:rotate(-72deg)
}
100%, 60% {
-webkit-transform:rotate(-432deg);
transform:rotate(-432deg)
}
}
@-webkit-keyframes 
spin5-contract { 0% {
-webkit-transform:rotate(-72deg);
transform:rotate(-72deg)
}
100%, 50% {
-webkit-transform:rotate(360deg);
transform:rotate(360deg)
}
}
@keyframes 
spin5-contract { 0% {
-webkit-transform:rotate(-72deg);
transform:rotate(-72deg)
}
100%, 50% {
-webkit-transform:rotate(360deg);
transform:rotate(360deg)
}
}
@-webkit-keyframes 
spin6-expand { 0% {
-webkit-transform:rotate(-90deg);
transform:rotate(-90deg)
}
100%, 60% {
-webkit-transform:rotate(-450deg);
transform:rotate(-450deg)
}
}
@keyframes 
spin6-expand { 0% {
-webkit-transform:rotate(-90deg);
transform:rotate(-90deg)
}
100%, 60% {
-webkit-transform:rotate(-450deg);
transform:rotate(-450deg)
}
}
@-webkit-keyframes 
spin6-contract { 0% {
-webkit-transform:rotate(-90deg);
transform:rotate(-90deg)
}
100%, 50% {
-webkit-transform:rotate(360deg);
transform:rotate(360deg)
}
}
@keyframes 
spin6-contract { 0% {
-webkit-transform:rotate(-90deg);
transform:rotate(-90deg)
}
100%, 50% {
-webkit-transform:rotate(360deg);
transform:rotate(360deg)
}
}

4. Use JavaScript (jQuery script) to toggle CSS styles based on the toggle state of your flyout menu.

(function() {
    $(".flyout-btn").click(function() {
        return $(".flyout-btn").toggleClass("btn-rotate"), $(".flyout").find("a").removeClass(), $(".flyout").removeClass("flyout-init fade").toggleClass("expand")
    }), $(".flyout").find("a").click(function() {
        return $(".flyout-btn").toggleClass("btn-rotate"), $(".flyout").removeClass("expand").addClass("fade"), $(this).addClass("clicked")
    })
}).call(this);

This awesome jQuery plugin is developed by sparanoid. For more Advanced Usages, please check the demo page or visit the official website.