Webleb - fragmentos de código

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

Menú radial

Recomendado

Menú de hamburguesa de inicio de sesión en 3D

Menú de navegación

Resplandor al pasar el menú

HTML

CSS

JS

Recomendado

Menú de hamburguesa de inicio de sesión en 3D

Menú de navegación

Resplandor al pasar el menú

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS