Webleb - HTML UI Elements

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

Menu Radial

Recomendado

Menu de hambúrguer com login 3D

Menu de navegação do Coreboot

Site de portfólio HTML com menu lateral

HTML

CSS

JS

Recomendado

Menu de hambúrguer com login 3D

Menu de navegação do Coreboot

Site de portfólio HTML com menu lateral

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS