Rings Navigation Concept
Links are absolutely positioned on top of each other making several rings.
A Pen by Bennett Feely on CodePen.
<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; | |
} | |
} |