Home > Javascript > Ring/Circle Toggle Navigation Concept
Ring/Circle Toggle Navigation Concept

Ring/Circle Toggle Navigation Concept

A ring navigation concept built with JavaScript and CSS that all the menu items are absolutely positioned in the circles when toggled.

Code the ring navigation (HTML)

<nav class=”top-right open”>
<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>

The primary CSS styles for the ring navigation.

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

  Website Demo

About Shailja Sharma