Rings Navigation Concept

index.html

<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>

rings-navigation-concept.markdown

Rings Navigation Concept

Links are absolutely positioned on top of each other making several rings.

A Pen by Bennett Feely on CodePen.

License.

script.js

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);

style.scss

$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;
	}
}