Last active
April 16, 2018 11:10
-
-
Save lesonky/3208867c8ad9ae20592886f8c8248b43 to your computer and use it in GitHub Desktop.
Hamburger Button to Doughnut Menu Snippet #button #ui
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="base"> | |
<div class="menu"> | |
<div class="icon"> | |
<div class="bar"></div> | |
</div> | |
</div> | |
<div class="icons"> | |
<i class="fa fa-user" aria-hidden="true"></i> | |
<i class="fa fa-calendar-o" aria-hidden="true"></i> | |
<i class="fa fa-tachometer" aria-hidden="true"></i> | |
</div> | |
<div class="section"> | |
<div class="cover1"> | |
<div class="cover2"> | |
<a class="content" href="#calender"></a> | |
</div> | |
</div> | |
</div> | |
<a class="section-static top" href="#profile"></a> | |
<a class="section-static bottom" href="#dashboard"></a> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(".menu").click(function(){ | |
$(this).parent().toggleClass("close"); | |
}); | |
//Based on: https://dribbble.com/shots/3377940-Home-Budget-App-Interactions |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$m: #21264B; | |
$iconmargin: 35px; | |
//Took about 100 more lines than I expected | |
body { | |
background-color: $m; | |
overflow-x:hidden; | |
.base { | |
z-index: 90; | |
position: fixed; | |
top: 0px; | |
left: 0px; | |
background-color: #FFFFFF; | |
width: 98px; | |
height: 98px; | |
transition: all 1s cubic-bezier(0.50, -0.75, 0.05, 1); | |
border-bottom-right-radius: 100%; | |
//overflow:hidden; | |
.menu { | |
z-index: 100; | |
background-color: #FFFFFF; | |
position: absolute; | |
top: 0px; | |
left: 0px; | |
width: 100px; | |
height: 100px; | |
border-bottom-right-radius: 200px; | |
cursor: pointer; | |
transition: all 1s cubic-bezier(0.50, -0.75, 0.05, 1), background-color 1s ease; | |
.icon { | |
position: absolute; | |
width: 25px; | |
height: 25px; | |
top: 50%; | |
left: 50%; | |
transform: translate(-100%, -100%); | |
&:before, | |
&:after { | |
content: ''; | |
transform: rotate(0deg); | |
transition: top 0.5s ease 0.5s, transform 0.5s ease, background-color 0.75s ease 0.25s; | |
} | |
.bar, | |
&:before, | |
&:after { | |
position: absolute; | |
height: 5px; | |
left: 0px; | |
right: 0px; | |
border-radius: 5px; | |
background-color: $m; | |
} | |
.bar { | |
transition: opacity 0s linear 0.5s, background-color 0.75s ease 0.25s; | |
opacity: 1; | |
top: 10px; | |
} | |
&:before { | |
top: 0px; | |
} | |
&:after { | |
top: initial; | |
top: 20px; | |
} | |
} | |
} | |
.icons { | |
z-index: 98; | |
position: absolute; | |
top:0px; | |
left:0px; | |
>* { | |
position: absolute; | |
font-size:40px; | |
color:$m; | |
transition: 0.3s cubic-bezier(0.50, -0.25, 0.05, 1); | |
} | |
.fa-user { | |
top:$iconmargin; | |
left:0px; | |
transition-delay:0.2s; | |
} | |
.fa-calendar-o { | |
top:0px; | |
left:0px; | |
color:#fff; | |
transition-delay:0.1s; | |
} | |
.fa-tachometer { | |
top:0px; | |
left:$iconmargin; | |
} | |
} | |
.section { //Overview of the arc: https://codepen.io/k-ya/pen/qrgZpx | |
z-index: 96; | |
position: absolute; | |
top:0px; | |
left:0px; | |
height:0px; | |
width:0px; | |
transform-origin: 100% 100%; | |
transform:rotate(135deg); | |
.cover1 { | |
transform-origin: 100% 100%; | |
&, | |
.cover2, | |
.cover2 .content { | |
position: absolute; | |
width: 600px; | |
height: 600px; | |
} | |
&, | |
.cover2 { | |
top: 50%; | |
left: 50%; | |
transform: translate(-100%, -100%) rotate(4deg); | |
overflow: hidden; | |
pointer-events:none; | |
transition:transform 0.5s ease-in; | |
} | |
.cover2 { | |
transform: translate(50%, -50%) rotate(-8deg); | |
transform-origin: 0% 100%; | |
.content { | |
width: 150px; | |
height: 150px; | |
border-radius: 100%; | |
background-color: #EE1B59; | |
top: 100%; | |
left: 0%; | |
transform: translate(-50%, -50%); | |
transition: background-color 0s, width 1.5s cubic-bezier(0.50, -0.5, 0.05, 1) 0s, height 1.5s cubic-bezier(0.50, -0.5, 0.05, 1) 0s; | |
pointer-events: auto; | |
} | |
} | |
} | |
} | |
.section-static { | |
z-index: 94; | |
width:100px; | |
height:100px; | |
position: absolute; | |
top:0px; | |
left:0px; | |
transform-origin:0% 0%; | |
transition: width 1s cubic-bezier(0.50, -0.75, 0.05, 1), height 1s cubic-bezier(0.50, -0.75, 0.05, 1); | |
&:hover { | |
background-color:#EAEAEA; | |
} | |
&.top { | |
transform:rotate(-45deg); | |
border-bottom-right-radius: 400px; | |
} | |
&.bottom { | |
transform:rotate(45deg); | |
border-bottom-right-radius:400px; | |
} | |
} | |
&.close { | |
width: 300px; | |
height: 300px; | |
transition: all 1.25s cubic-bezier(0.50, 0, 0.05, 1.75); | |
.menu { | |
width: 150px; | |
height: 150px; | |
transition: all 1s cubic-bezier(0.50, 0, 0.05, 1.75), background-color 1s ease; | |
background-color: $m; | |
.icon { | |
.bar, | |
&:before, | |
&:after { | |
background-color: #FFFFFF; | |
} | |
.bar { | |
opacity: 0; | |
} | |
&:before, | |
&:after { | |
transition: top 0.5s linear, transform 0.5s ease 0.5s, background-color 0.75s ease 0.25s; | |
} | |
&:before { | |
top: 10px; | |
transform: rotate(-45deg); | |
} | |
&:after { | |
top: 10px; | |
transform: rotate(45deg); | |
} | |
} | |
} | |
.icons { | |
position: absolute; | |
top:0px; | |
left:0px; | |
>* { | |
position: absolute; | |
font-size:40px; | |
color:$m; | |
transition: 0.3s cubic-bezier(0.50, 0, 0.05, 1.75) 0.7s; | |
pointer-events:none; | |
} | |
.fa-user { | |
top:$iconmargin; | |
left:200px; | |
} | |
.fa-calendar-o { | |
top:141px; | |
left:141px; | |
color:#fff; | |
transition-delay:0.65s; | |
} | |
.fa-tachometer { | |
top:200px; | |
left:$iconmargin; | |
transition-delay:0.8s; | |
} | |
} | |
.section { | |
.cover1 { | |
transform-origin: 100% 100%; | |
&, | |
.cover2, | |
.cover2 .content { | |
position: absolute; | |
width: 600px; | |
height: 600px; | |
} | |
&, | |
.cover2 { | |
top: 50%; | |
left: 50%; | |
transform: translate(-100%, -100%) rotate(16deg); | |
overflow: hidden; | |
transition:transform 0.5s ease-in 0.5s; | |
} | |
.cover2 { | |
transform: translate(50%, -50%) rotate(-32deg); | |
transform-origin: 0% 100%; | |
.content { | |
border-radius: 100%; | |
background-color: #EE1B59; | |
top: 100%; | |
left: 0%; | |
transform: translate(-50%, -50%); | |
transition: background-color 0s, width 1.1s cubic-bezier(0.50, 0, 0.05, 1.75) 0.25s, height 1.1s cubic-bezier(0.50, 0, 0.05, 2) 0.25s; | |
&:hover { | |
background-color:#DD1350; | |
} | |
} | |
} | |
} | |
} | |
.section-static { | |
width:300px; | |
height:300px; | |
transition: width 1.25s cubic-bezier(0.50, 0, 0.05, 2), height 1.25s cubic-bezier(0.50, 0, 0.05, 2); | |
} | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment