Circular Floating Menu

Circular Floating Menu is based on pure Html5, Css3, and Js. This snippet does not have any framework. This snippet is used to add social links and other sorts of quick links.
Use the below code to make the website more interactive, it’s kind of but not fully user-friendly.

HTML Code:

<ul class="fm_menu">
    <div class="fm_toggle">
        <ion-icon name="add-outline"></ion-icon>
    </div>
    <li style="--i:0;" class="active"> <a href="#">
            <ion-icon name="home-outline"></ion-icon>
        </a> </li>
    <li style="--i:1;"> <a href="#">
            <ion-icon name="person-outline"></ion-icon>
        </a> </li>
    <li style="--i:2;"> <a href="#">
            <ion-icon name="settings-outline"></ion-icon>
        </a> </li>
    <li style="--i:3;"> <a href="#">
            <ion-icon name="mail-outline"></ion-icon>
        </a> </li>
    <li style="--i:4;"> <a href="#">
            <ion-icon name="videocam-outline"></ion-icon>
        </a> </li>
    <li style="--i:5;"> <a href="#">
            <ion-icon name="key-outline"></ion-icon>
        </a> </li>
    <li style="--i:6;"> <a href="#">
            <ion-icon name="game-controller-outline"></ion-icon>
        </a> </li>
    <li style="--i:7;"> <a href="#">
            <ion-icon name="camera-outline"></ion-icon>
        </a> </li>
    <div class="fm_indicator"></div>
</ul>

CSS Code:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(to top, #2c3e50, #4ca1af);
}

.fm_menu {
    position: absolute;
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 0;
    bottom: 0;
}

.fm_menu .fm_toggle {
    position: absolute;
    width: 75px;
    height: 75px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    color: #2c3e50;
    justify-content: center;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
    align-items: center;
    font-size: 3em;
    cursor: pointer;
    transition: 0.5s;
}

.fm_menu .fm_toggle.active {
    transform: rotate(315deg);
    box-shadow: 0 0 0 68px white;
    background: #366677;
    color: #000;
}

.fm_menu .fm_toggle.active:before {
    content: '';
    background: #ffffff;
    position: absolute;
    width: 100%;
    height: 100%;
    border: 6px solid #407e8d;
    border-radius: 50%;
    box-shadow: rgb(204 219 232) 3px 3px 6px 0px inset, rgb(239 239 239 / 82%) -5px -3px 6px 30px inset;
}

.fm_menu li {
    position: absolute;
    left: 10px;
    list-style: none;
    transform: rotate(calc(360deg / 8 * var(--i))) translateX(40px);
    transform-origin: 140px;
    visibility: hidden;
    opacity: 0;
    transition: 0.5s;
    z-index: 10;
}

.fm_menu.active li {
    visibility: visible;
    opacity: 1;
}

.fm_menu li a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 55px;
    height: 55px;
    font-size: 1.75em;
    color: #222327;
    transform: rotate(calc(360deg / -8 * var(--i)));
    border-radius: 50%;
    transition: 0.8s;
}

.fm_menu.active li.active {
    transform: rotate(calc(360deg / 8 * var(--i))) translateX(12px);
}

.fm_indicator {
    position: absolute;
    left: calc(50% + 2.5px);
    transform-origin: right;
    width: 100px;
    height: 1px;
    background: transparent;
    pointer-events: none;
    transition: 0.5s;
}

.fm_indicator::before {
    content: '';
    position: absolute;
    top: -27.5px;
    left: 72px;
    width: 55px;
    height: 55px;
    background: #222327;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
    border-radius: 50%;
    transition: 0.5s;
    opacity: 0;
}

.fm_menu li.active a {
    color: white;
}

.fm_menu.active .fm_indicator::before {
    opacity: 1;
    top: -27.5px;
    left: -27.5px;
    background: #4ca1af;
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}

.fm_menu li:nth-child(2).active~.fm_indicator {
    transform: translateX(-103px) rotate(0deg);
}

.fm_menu li:nth-child(3).active~.fm_indicator {
    transform: translateX(-103px) rotate(45deg);
}

.fm_menu li:nth-child(4).active~.fm_indicator {
    transform: translateX(-103px) rotate(90deg);
}

.fm_menu li:nth-child(5).active~.fm_indicator {
    transform: translateX(-103px) rotate(135deg);
}

.fm_menu li:nth-child(6).active~.fm_indicator {
    transform: translateX(-103px) rotate(180deg);
}

.fm_menu li:nth-child(7).active~.fm_indicator {
    transform: translateX(-103px) rotate(225deg);
}

.fm_menu li:nth-child(8).active~.fm_indicator {
    transform: translateX(-103px) rotate(270deg);
}

.fm_menu li:nth-child(9).active~.fm_indicator {
    transform: translateX(-103px) rotate(315deg);
}

JS Code:

let fm_menuToggle = document.querySelector('.fm_toggle');
let fm_menu = document.querySelector('.fm_menu');
    fm_menuToggle.onclick = function () {
    fm_menu.classList.toggle('active')
    fm_menuToggle.classList.toggle('active')
}

const list = document.querySelectorAll('li');

function activelink() {
    list.forEach((item) =>
    item.classList.remove('active'));
    this.classList.add('active')
}
list.forEach((item) =>
item.addEventListener('click', activelink))

#BeingCodeStuffer