Path Style Flyout Menu With jQuery And CSS3 - Flyout Menu
File Size: | 13.6 KB |
---|---|
Views Total: | 11051 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.