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

Menu Radial

Recomendado

Menu animado

Exemplo de código de menu suspenso HTML

Efeitos do menu suspenso

HTML

CSS

JS

Recomendado

Menu animado

Exemplo de código de menu suspenso HTML

Efeitos do menu suspenso

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS