Webleb - UI Elements - Radial Menu

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <ul class="menu">
          <div class="toggle">
            <ion-icon name="add-outline"></ion-icon>
          </div>
          <li style="--i:0" class="active">
            <a data-url="#">
              <ion-icon name="home-outline"></ion-icon>
            </a>
          </li>
          <li style="--i:1">
            <a data-url="#">
              <ion-icon name="person-outline"></ion-icon>
            </a>
          </li>
          <li style="--i:2">
            <a data-url="#">
              <ion-icon name="chatbubble-outline"></ion-icon>
            </a>
          </li>
          <li style="--i:3">
            <a data-url="#">
              <ion-icon name="mail-outline"></ion-icon>
            </a>
          </li>
          <li style="--i:4">
            <a data-url="#">
              <ion-icon name="videocam-outline"></ion-icon>
            </a>
          </li>
          <li style="--i:5">
            <a data-url="#">
              <ion-icon name="camera-outline"></ion-icon>
            </a>
          </li>
          <li style="--i:6">
            <a data-url="#">
              <ion-icon name="settings-outline"></ion-icon>
            </a>
          </li>
          <li style="--i:7">
            <a data-url="#">
              <ion-icon name="key-outline"></ion-icon>
            </a>
          </li>
          <div class="indicator"></div>
        </ul>
      </div>
      <script src="script.js"></script>
      <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .container {
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background:wheat;
  }
  .menu {
    position: relative;
    width: 300px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .menu .toggle {
    position: absolute;
    width: 75px;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #222;
    background: #fff;
    font-size: 3em;
    cursor: pointer;
    border-radius: 50%;
    transition: 0.5s;
  }
  .menu .toggle.active {
    transform: rotate(315deg);
    box-shadow: 0 0 0 68px #fff;
    color: #fff;
    background: #222237;
  }
  .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;
    z-index: 10;
    transition: 0.5s;
  }
  .menu.active li {
    visibility: visible;
    opacity: 1;
  }
  .menu li a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 55px;
    height: 55px;
    font-size: 1.75em;
    color: #222237;
    transform: rotate(calc(360deg / -8 * var(--i)));
    border-radius: 50%;
  }
  .menu.active li.active {
    transform: rotate(calc(360deg / 8 * var(--i))) translateX(12px);
  }
  .indicator {
    position: absolute;
    left: calc(50% - 2.5px);
    transform-origin: right;
    width: 100px;
    height: 1px;
    background: transparent;
    pointer-events: none;
    transition: 0.5s;
  }
  .indicator::before {
    content: "";
    position: absolute;
    top: -27px;
    left: 72px;
    width: 55px;
    height: 55px;
    background: #222237;
    border-radius: 50%;
    box-shadow: 0 0 0 6px #29fd53;
    opacity: 0;
    transition: 0.5s;
  }
  .menu.active .indicator::before {
    opacity: 1;
    top: -27.5px;
    left: -25px;
    background: #29fd53;
    box-shadow: 0 0 0 6px #222237;
  }
  .menu li:nth-child(2).active ~ .indicator {
    transform: translateX(-100px) rotate(0deg);
  }
  .menu li:nth-child(3).active ~ .indicator {
    transform: translateX(-100px) rotate(45deg);
  }
  .menu li:nth-child(4).active ~ .indicator {
    transform: translateX(-100px) rotate(90deg);
  }
  .menu li:nth-child(5).active ~ .indicator {
    transform: translateX(-100px) rotate(135deg);
  }
  .menu li:nth-child(6).active ~ .indicator {
    transform: translateX(-100px) rotate(180deg);
  }
  .menu li:nth-child(7).active ~ .indicator {
    transform: translateX(-100px) rotate(225deg);
  }
  .menu li:nth-child(8).active ~ .indicator {
    transform: translateX(-100px) rotate(270deg);
  }
  .menu li:nth-child(9).active ~ .indicator {
    transform: translateX(-100px) rotate(315deg);
  }

Radial Menu

Recommended

navigation menu

Animated Menu

HTML Landing Page with Menu Template

HTML

CSS

JS

Recommended

navigation menu

Animated Menu

HTML Landing Page with Menu Template

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS