Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Rings Navigation Concept
<nav class="top-right">
<a class="disc l1">
<div>Messages</div>
</a>
<a class="disc l2">
<div>Photos</div>
</a>
<a class="disc l3">
<div>Profile</div>
</a>
<a class="disc l4">
<div>Likes</div>
</a>
<a class="disc l5 toggle">
Menu
</a>
</nav>
toggle = document.querySelectorAll(".toggle")[0];
nav = document.querySelectorAll("nav")[0];
toggle_open_text = 'Menu';
toggle_close_text = 'Close';
toggle.addEventListener('click', function() {
nav.classList.toggle('open');
if (nav.classList.contains('open')) {
toggle.innerHTML = toggle_close_text;
} else {
toggle.innerHTML = toggle_open_text;
}
}, false);
$size : 50px;
$items : 5;
$transition : .5s;
$bounce : cubic-bezier(.3,1.4,.5,.9);
$color-inner : gold;
$color-outer : tomato;
$background: mix($color-inner, $color-outer);
$black : shade($color-outer, 80%);
$start-scale : .5;
$start-rot : 190deg;
@import url('https://fonts.googleapis.com/css?family=Alegreya+Sans:800,900');
html, body { height: 100%; }
body {
background: beige;
font-family: Alegreya Sans, sans-serif;
}
nav {
display: block;
position: fixed;
width: $size * $items * 2;
height: $size * $items * 2;
user-select: none;
transform: translate3d($size*.5,-$size*.5,0);
transition: transform $transition $bounce;
&.open {
transform: translate3d(0,0,0);
}
&.top-right {
top: -$size * ($items - 2.2);
right: -$size * ($items - 2.2);
}
}
.disc {
position: absolute;
display: inline-block;
text-align: center;
cursor: pointer;
font: $size*.5 Alegreya Sans, sans-serif;
line-height: $size * .8;
padding-top: $size * .2;
border-radius: $size * $items;
transform: scale3d($start-scale, $start-scale, $start-scale) rotate3d(0,0,1,$start-rot);
pointer-events: none;
opacity: 0;
cursor: pointer;
transition: transform $transition $bounce, opacity $transition;
div {
transform: rotate(180deg);
}
.open & {
pointer-events: auto;
opacity: 1;
}
}
@for $i from 1 through $items {
.l#{$i} {
$i : $i - 1;
$-i : $items - $i;
$pct : $i/$items * 100%;
$color : mix($color-inner, $color-outer, $pct);
top: $i * $size;
left: $i * $size;
right: $i * $size;
bottom: $i * $size;
background: $color;
transition-delay: $i * $transition/$items;
.open & {
transition-delay: $i * $transition/$items;
transform: scale3d(1,1,1) rotate3d(0,0,1,$start-rot);
opacity: 1;
&:hover {
background: shade($color, 90%);
color: $color;
transition-delay: 0s;
}
&:active {
background: shade($color, 50%);
color: $color;
}
&.toggle {
transform: scale3d(.9,.9,.9) rotate3d(0,0,1,$start-rot - 180deg);
}
}
}
}
.toggle {
line-height: $size*2;
padding: 0;
width: $size*2;
background: $color-inner;
opacity: 1;
transform: none;
pointer-events: auto;
transition-delay: 0s;
.open & {
transform: rotate3d(0,0,1,0deg);
}
&:hover {
background: shade($color-inner, 90%);
color: $color-inner;
}
&:active {
background: shade($color-inner, 50%);
color: rgba($color-inner, .5);
transform: scale(.9);
transition-duration: 0s;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment