Skip to content

Instantly share code, notes, and snippets.

@tylerdigital

tylerdigital/index.html

Created August 26, 2012 17:39
Show Gist options
  • Save tylerdigital/3481904 to your computer and use it in GitHub Desktop.
Save tylerdigital/3481904 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<div id="testfield" class="span16">
<div class="flyout-wrap">
<a class="flyout-btn" href="#" title="Toggle"><span>Flyout Menu Toggle</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><!-- .flyout -->
</div><!-- .flyout-wrap -->
<h1><a href="https://path.com/">Path</a> 2.0 Flyout Menu using CSS by <a href="http://sparanoid.com/">Tunghsiao Liu</a></h1>
</div><!-- #testfield -->
Raw
script.js
$(".flyout-btn").click(function() {
$(".flyout-btn").toggleClass("btn-rotate");
$(".flyout").find("a").removeClass();
$(".flyout").removeClass("flyout-init fade").toggleClass("expand");
});
$(".flyout").find("a").click(function() {
$(".flyout-btn").toggleClass("btn-rotate");
$(".flyout").removeClass("expand").addClass("fade");
$(this).addClass("clicked");
});
Raw
style.less
/*!
Path 2.0 Flyout Menu using CSS
Contributed to Path by Tunghsiao Liu
sparanoid.com
*/
/*!
*/
* { margin: 0; padding: 0; text-decoration: none; }
:root {
padding: 60px;
background: #f9f4f0;
font-family: Helvetica, 'Hiragino Sans GB', Arial, sans-serif;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-font-smoothing: antialiased;
}
@rate: 18deg;
@d1: @rate * 0;
@d2: @rate * 1;
@d3: @rate * 2;
@d4: @rate * 3;
@d5: @rate * 4;
@d6: @rate * 5;
.animation (@var) {
-webkit-animation: @arguments;
-moz-animation: @arguments;
-ms-animation: @arguments;
-o-animation: @arguments;
animation: @arguments;
}
.animation-delay (@var) {
-webkit-animation-delay: @arguments;
-moz-animation-delay: @arguments;
-ms-animation-delay: @arguments;
-o-animation-delay: @arguments;
animation-delay: @arguments;
}
.transform (@var) {
-webkit-transform: @arguments;
-moz-transform: @arguments;
-ms-transform: @arguments;
-o-transform: @arguments;
transform: @arguments;
}
.transition (@var) {
-webkit-transition: @arguments;
-moz-transition: @arguments;
-ms-transition: @arguments;
-o-transition: @arguments;
transition: @arguments;
}
#testfield {
width: 210px;
margin: 0 auto;
//background: #fff;
h1 {
background: #f1e7de;
border-radius: 3px;
border: 1px solid #d3bfae;
padding: 7px 10px;
margin: 20px 0 10px;
font-size: 12px;
line-height: 1.6;
color: #6d492a;
text-shadow: #fff 0 1px 1px;
box-shadow: inset #fff 0 1px 0 0;
a {
color: #6d492a;
border-bottom: 1px dotted #d3bfae;
&:hover {
border-color: #6d492a;
}
}
}
.flyout-wrap {
height: 191px;
position: relative;
.flyout {
position: relative;
margin: 0 0 1px 6px;
line-height: 0;
padding: 0; // FIXME: hotfix for codepen
& > li {
position: absolute;
background: yellow;
height: 170px;
display: block;
-webkit-transform-origin: 25px / 2 bottom;
-moz-transform-origin: 25px / 2 bottom;
transform-origin: 25px / 2 bottom;
&:nth-of-type(1) { .transform(rotate(@d1)); }
&:nth-of-type(2) { .transform(rotate(@d2)); }
&:nth-of-type(3) { .transform(rotate(@d3)); }
&:nth-of-type(4) { .transform(rotate(@d4)); }
&:nth-of-type(5) { .transform(rotate(@d5)); }
&:nth-of-type(6) { .transform(rotate(@d6)); }
a {
position: absolute;
display: block;
border-radius: 50%;
height: 26px;
width: 26px;
border: 3px solid #fff;
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;
text-indent: -99999px;
overflow: hidden;
background: #444;
&:active {
background: #000;
border-color: #555;
span {
opacity: .3;
}
}
span {
display: block;
height: 26px;
width: 26px;
background: url(http://sparanoid.com/lab/path-menu/star.svg) no-repeat center center;
background-size: 16px 16px;
// -webkit-mask-image: url(http://sparanoid.com/lab/path-menu/star.svg);
}
}
}
}
// triggers
// LESS doesn't support loops and parametric mixins very well,
// a workaround solution: use Textmate
.flyout-init li { display: none; }
.flyout.expand li a { .animation(expand .6s ease 1 backwards); top: 10px; }
.flyout li a { .animation(contract .35s ease-out 1 backwards); top: 150px; }
.flyout.fade li a.clicked { .animation(clicked .5s ease-out 1 forwards); top: 10px; }
.flyout.fade li a:not(.clicked) { .animation(fade .5s ease-out 1 forwards); top: 10px;
span { .transition(opacity .3s ease); opacity: .1; }
}
.flyout.fade li a:not(.clicked) span { opacity: .1; -webkit-transition: opacity 1.5s ease; }
.flyout li:nth-of-type(1) a { .animation-delay(.20s); }
.flyout li:nth-of-type(2) a { .animation-delay(.16s); }
.flyout li:nth-of-type(3) a { .animation-delay(.12s); }
.flyout li:nth-of-type(4) a { .animation-delay(.08s); }
.flyout li:nth-of-type(5) a { .animation-delay(.04s); }
.flyout li:nth-of-type(6) a { .animation-delay(.00s); }
.flyout li:nth-of-type(1) a:not(.clicked) span { .animation(spin1-contract .9s ease-out 1 backwards); }
.flyout li:nth-of-type(2) a:not(.clicked) span { .animation(spin2-contract .9s ease-out 1 backwards); }
.flyout li:nth-of-type(3) a:not(.clicked) span { .animation(spin3-contract .9s ease-out 1 backwards); }
.flyout li:nth-of-type(4) a:not(.clicked) span { .animation(spin4-contract .9s ease-out 1 backwards); }
.flyout li:nth-of-type(5) a:not(.clicked) span { .animation(spin5-contract .9s ease-out 1 backwards); }
.flyout li:nth-of-type(6) a:not(.clicked) span { .animation(spin6-contract .9s ease-out 1 backwards); }
.flyout.expand li:nth-of-type(1) a { .animation-delay(.00s); }
.flyout.expand li:nth-of-type(2) a { .animation-delay(.04s); }
.flyout.expand li:nth-of-type(3) a { .animation-delay(.08s); }
.flyout.expand li:nth-of-type(4) a { .animation-delay(.12s); }
.flyout.expand li:nth-of-type(5) a { .animation-delay(.16s); }
.flyout.expand li:nth-of-type(6) a { .animation-delay(.20s); }
.flyout.expand li:nth-of-type(1) a span { .transform(rotate(-@d1)); .animation(spin1-expand .6s ease-out 1 backwards); }
.flyout.expand li:nth-of-type(2) a span { .transform(rotate(-@d2)); .animation(spin2-expand .6s ease-out 1 backwards); }
.flyout.expand li:nth-of-type(3) a span { .transform(rotate(-@d3)); .animation(spin3-expand .6s ease-out 1 backwards); }
.flyout.expand li:nth-of-type(4) a span { .transform(rotate(-@d4)); .animation(spin4-expand .6s ease-out 1 backwards); }
.flyout.expand li:nth-of-type(5) a span { .transform(rotate(-@d5)); .animation(spin5-expand .6s ease-out 1 backwards); }
.flyout.expand li:nth-of-type(6) a span { .transform(rotate(-@d6)); .animation(spin6-expand .6s ease-out 1 backwards); }
.flyout.fade li:nth-of-type(1) a.clicked span { .transform(rotate(-@d1)); }
.flyout.fade li:nth-of-type(2) a.clicked span { .transform(rotate(-@d2)); }
.flyout.fade li:nth-of-type(3) a.clicked span { .transform(rotate(-@d3)); }
.flyout.fade li:nth-of-type(4) a.clicked span { .transform(rotate(-@d4)); }
.flyout.fade li:nth-of-type(5) a.clicked span { .transform(rotate(-@d5)); }
.flyout.fade li:nth-of-type(6) a.clicked span { .transform(rotate(-@d6)); }
.flyout-btn {
position: absolute;
bottom: 0;
left: 0;
border-radius: 50%;
height: 36px;
width: 36px;
border: 4px solid #fff;
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;
text-indent: -99999px;
overflow: hidden;
background: #f76f54;
background: -webkit-linear-gradient(top, #f76f54 0%,#dd3535 49%,#d32121 51%,#c61f1f 100%);
background: -moz-linear-gradient(top, #f76f54 0%,#dd3535 49%,#d32121 51%,#c61f1f 100%);
background: -ms-linear-gradient(top, #f76f54 0%,#dd3535 49%,#d32121 51%,#c61f1f 100%);
background: -o-linear-gradient(top, #f76f54 0%,#dd3535 49%,#d32121 51%,#c61f1f 100%);
background: linear-gradient(top, #f76f54 0%,#dd3535 49%,#d32121 51%,#c61f1f 100%);
z-index: 9999;
outline: none;
&:hover {
// never mind
}
span {
display: block;
height: 36px;
width: 36px;
background: url(http://sparanoid.com/lab/path-menu/cross.svg) no-repeat center center;
-webkit-transition: -webkit-transform .4s ease;
-moz-transition: -moz-transform .4s ease;
transition: transform .4s ease;
}
}
.flyout-btn.btn-rotate span {
.transform(rotate(-135deg));
}
.ani-expand {
0% { top: 150px; }
50% { top: -10px; }
70% { top: 15px; }
100% { top: 10px; }
}
.ani-contract {
0% { top: 10px; }
40% { top: -25px; }
100% { top: 150px; }
}
.ani-clicked {
0% { -webkit-transform: scale(1); opacity: 1; }
100% { -webkit-transform: scale(5); opacity: 0; }
}
@-webkit-keyframes expand { .ani-expand }
@-moz-keyframes expand { .ani-expand }
@-webkit-keyframes contract { .ani-contract }
@-moz-keyframes contract { .ani-contract }
// a small trick
@-webkit-keyframes clicked {
0% { -webkit-transform: scale(1); opacity: 1; top: 10px; }
90% { top: 10px; }
99% { -webkit-transform: scale(6); opacity: 0; top: 150px; }
100% { -webkit-transform: scale(0); }
}
@-moz-keyframes clicked {
0% { -moz-transform: scale(1); opacity: 1; top: 10px; }
90% { top: 10px; }
99% { -moz-transform: scale(6); opacity: 0; top: 150px; }
100% { -moz-transform: scale(0); }
}
@-webkit-keyframes fade {
0% { -webkit-transform: scale(1); opacity: 1; top: 10px; }
90% { opacity: 0; top: 10px; }
99% { -webkit-transform: scale(0); top: 150px; }
100% { -webkit-transform: scale(0); }
}
@-moz-keyframes fade {
0% { -moz-transform: scale(1); opacity: 1; top: 10px; }
90% { opacity: 0; top: 10px; }
99% { -moz-transform: scale(0); top: 150px; }
100% { -moz-transform: scale(0); }
}
.ani-spin1-expand { 0% { .transform(rotate(0 - @d1)); } 60% { .transform(rotate(-360deg - @d1)); } 100% { .transform(rotate(-360deg - @d1)); } }
.ani-spin2-expand { 0% { .transform(rotate(0 - @d2)); } 60% { .transform(rotate(-360deg - @d2)); } 100% { .transform(rotate(-360deg - @d2)); } }
.ani-spin3-expand { 0% { .transform(rotate(0 - @d3)); } 60% { .transform(rotate(-360deg - @d3)); } 100% { .transform(rotate(-360deg - @d3)); } }
.ani-spin4-expand { 0% { .transform(rotate(0 - @d4)); } 60% { .transform(rotate(-360deg - @d4)); } 100% { .transform(rotate(-360deg - @d4)); } }
.ani-spin5-expand { 0% { .transform(rotate(0 - @d5)); } 60% { .transform(rotate(-360deg - @d5)); } 100% { .transform(rotate(-360deg - @d5)); } }
.ani-spin6-expand { 0% { .transform(rotate(0 - @d6)); } 60% { .transform(rotate(-360deg - @d6)); } 100% { .transform(rotate(-360deg - @d6)); } }
.ani-spin1-contract { 0% { .transform(rotate(0 - @d1)); } 50% { .transform(rotate( 360deg)); } 100% { .transform(rotate( 360deg)); } }
.ani-spin2-contract { 0% { .transform(rotate(0 - @d2)); } 50% { .transform(rotate( 360deg)); } 100% { .transform(rotate( 360deg)); } }
.ani-spin3-contract { 0% { .transform(rotate(0 - @d3)); } 50% { .transform(rotate( 360deg)); } 100% { .transform(rotate( 360deg)); } }
.ani-spin4-contract { 0% { .transform(rotate(0 - @d4)); } 50% { .transform(rotate( 360deg)); } 100% { .transform(rotate( 360deg)); } }
.ani-spin5-contract { 0% { .transform(rotate(0 - @d5)); } 50% { .transform(rotate( 360deg)); } 100% { .transform(rotate( 360deg)); } }
.ani-spin6-contract { 0% { .transform(rotate(0 - @d6)); } 50% { .transform(rotate( 360deg)); } 100% { .transform(rotate( 360deg)); } }
@-webkit-keyframes spin1-expand { .ani-spin1-expand }
@-webkit-keyframes spin2-expand { .ani-spin2-expand }
@-webkit-keyframes spin3-expand { .ani-spin3-expand }
@-webkit-keyframes spin4-expand { .ani-spin4-expand }
@-webkit-keyframes spin5-expand { .ani-spin5-expand }
@-webkit-keyframes spin6-expand { .ani-spin6-expand }
@-moz-keyframes spin1-expand { .ani-spin1-expand }
@-moz-keyframes spin2-expand { .ani-spin2-expand }
@-moz-keyframes spin3-expand { .ani-spin3-expand }
@-moz-keyframes spin4-expand { .ani-spin4-expand }
@-moz-keyframes spin5-expand { .ani-spin5-expand }
@-moz-keyframes spin6-expand { .ani-spin6-expand }
@-webkit-keyframes spin1-contract { .ani-spin1-contract }
@-webkit-keyframes spin2-contract { .ani-spin2-contract }
@-webkit-keyframes spin3-contract { .ani-spin3-contract }
@-webkit-keyframes spin4-contract { .ani-spin4-contract }
@-webkit-keyframes spin5-contract { .ani-spin5-contract }
@-webkit-keyframes spin6-contract { .ani-spin6-contract }
@-moz-keyframes spin1-contract { .ani-spin1-contract }
@-moz-keyframes spin2-contract { .ani-spin2-contract }
@-moz-keyframes spin3-contract { .ani-spin3-contract }
@-moz-keyframes spin4-contract { .ani-spin4-contract }
@-moz-keyframes spin5-contract { .ani-spin5-contract }
@-moz-keyframes spin6-contract { .ani-spin6-contract }
}
}
.bsap {
position: fixed;
top: 0;
right: 0;
width: 130px;
margin: 15px;
padding: 10px;
background: rgba(255, 255, 255, .5);
border: 1px solid rgba(0, 0, 0, .1);
}
.bsap:hover { background: rgba(255, 255, 255, .95); }
.bsap a { color: #555; }
.bsap a:hover { color: #000; }
.bsa_it_t {
font-size: 14px;
display: block;
padding: 5px 0;
border-bottom: 1px solid rgba(0, 0, 0, .05);
}
.bsa_it_d {
font-size: 12px;
display: block;
padding: 5px 0;
}
.bsa_it_p { font-size: 10px; }
.bsa_it_p a { opacity: .5; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment