Circular navigation

<div class="navigation">
<!-- The trigger element that will show all circles when user clicks it -->
...
<!-- A circle menu item -->
<div class="navigation__circle">
<!-- The content -->
<div class="navigation__content">
...
</div>
</div>
<!-- Repeat menu items -->
...
</div>
.navigation {
position: relative;
}
.navigation__circle {
/* Position */
position: absolute;
top: 0;
/*
80px is the distance from the item to the trigger element.
Replace 0deg with 60deg, 180deg, 240deg, 300deg for another item
in case you want to have a total of 6 menu items.
The formulation is 360 / numberOfItems * indexOfItem
*/
transform: rotate(0deg) translateX(-80px);
/* Must have the same size as the trigger element */
height: 32px;
width: 32px;
}
.navigation__content {
/*
Rotate it to make it displayed vertically
Replace -0deg with -60deg, -180deg, -240deg, -300deg for another item
in case you want to have a total of 6 menu items.
The formulation is -(360 / numberOfItems * indexOfItem)
*/
transform: rotate(-0deg);
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Take full size */
height: 100%;
width: 100%;
}
1
2
3
4
5
6