<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 itemin 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 verticallyReplace -0deg with -60deg, -180deg, -240deg, -300deg for another itemin 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%;}