Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI

CodeMyUI/index.html

Created November 15, 2017 06:46
Show Gist options
  • Save CodeMyUI/4889fa73152a4ada950d713cd9178ee7 to your computer and use it in GitHub Desktop.
Save CodeMyUI/4889fa73152a4ada950d713cd9178ee7 to your computer and use it in GitHub Desktop.
Download ZIP
Unnamed Menu - CSS
Raw
index.html
<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>
Raw
script.js
$(".menu").click(function(){
$(this).parent().toggleClass("close");
});
//Based on: https://dribbble.com/shots/3377940-Home-Budget-App-Interactions
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://codepen.io/OfficialAntarctica/pen/2677821722cd9e02c2c882a17c5b2072.js?2"></script>
Raw
style.scss
$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);
}
}
}
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment