Radar / körkörös menü

<nav class="radial-menu">
    <button class="radial-toggle" type="button" aria-label="Menü megnyitása">
        <span></span>
        <span></span>
        <span></span>
    </button>

    <div class="radial-items">
        <a href="#" class="radial-item item-1" aria-label="Kezdőlap">
            <i class="bi bi-house-door-fill"></i>
        </a>

        <a href="#" class="radial-item item-2" aria-label="Rólunk">
            <i class="bi bi-person-fill"></i>
        </a>

        <a href="#" class="radial-item item-3" aria-label="Szolgáltatások">
            <i class="bi bi-grid-fill"></i>
        </a>

        <a href="#" class="radial-item item-4" aria-label="Portfólió">
            <i class="bi bi-images"></i>
        </a>

        <a href="#" class="radial-item item-5" aria-label="Kapcsolat">
            <i class="bi bi-envelope-fill"></i>
        </a>
    </div>
</nav>

.radial-menu {
    position: relative;
    width: 360px;
    height: 360px;
    margin: 0 auto;
}

/* KÖZÉPSŐ GOMB */

.radial-toggle {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 20;

    width: 76px;
    height: 76px;

    margin: -38px 0 0 -38px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;

    padding: 0;

    border: 1px solid rgba(46, 204, 113, 0.6);
    border-radius: 50%;

    background: #0b1511;

    cursor: pointer;

    box-shadow:
        0 0 22px rgba(46, 204, 113, 0.18),
        inset 0 0 18px rgba(46, 204, 113, 0.05);

    transition:
        background 0.3s ease,
        box-shadow 0.3s ease;
}

.radial-toggle:hover {
    background: #102219;

    box-shadow:
        0 0 30px rgba(46, 204, 113, 0.3),
        inset 0 0 20px rgba(46, 204, 113, 0.08);
}

.radial-toggle span {
    width: 23px;
    height: 2px;

    background: #2ecc71;
    border-radius: 4px;

    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}

/* KÖR */

.radial-menu::before {
    content: "";

    position: absolute;
    left: 50%;
    top: 50%;

    width: 250px;
    height: 250px;

    margin: -125px 0 0 -125px;

    border: 1px solid rgba(46, 204, 113, 0.08);
    border-radius: 50%;

    opacity: 0;
    transform: scale(0.8);

    transition:
        opacity 0.4s ease,
        transform 0.5s ease;
}

.radial-menu.open::before {
    opacity: 1;
    transform: scale(1);
}

/* IKONOK KONTÉNERE */

.radial-items {
    position: absolute;
    inset: 0;

    pointer-events: none;
}

/* IKONOK */

.radial-item {
    position: absolute;

    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: -29px 0 0 -29px;

    color: #7f8b9c;

    text-decoration: none;

    background: #0b1118;

    border: 1px solid rgba(255, 255, 255, 0.12);

    border-radius: 50%;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.radial-item i {
    font-size: 19px;
}

/* NYITOTT ÁLLAPOT */

.radial-menu.open .radial-items {
    pointer-events: auto;
}

.radial-menu.open .radial-item {
    opacity: 1;
    pointer-events: auto;
}

/* FIX POZÍCIÓK */

.radial-menu.open .item-1 {
    left: 50%;
    top: calc(50% - 130px);
}

.radial-menu.open .item-2 {
    left: calc(50% + 92px);
    top: calc(50% - 55px);
}

.radial-menu.open .item-3 {
    left: calc(50% + 75px);
    top: calc(50% + 88px);
}

.radial-menu.open .item-4 {
    left: calc(50% - 75px);
    top: calc(50% + 88px);
}

.radial-menu.open .item-5 {
    left: calc(50% - 112px);
    top: calc(50% - 55px);
}

/* HOVER */

.radial-item:hover {
    color: #2ecc71;

    border-color: rgba(46, 204, 113, 0.7);

    box-shadow:
        0 0 18px rgba(46, 204, 113, 0.25),
        inset 0 0 12px rgba(46, 204, 113, 0.06);
}

/* KÖZÉPSŐ GOMB - NYITVA */

.radial-menu.open .radial-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.radial-menu.open .radial-toggle span:nth-child(2) {
    opacity: 0;
}

.radial-menu.open .radial-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 500px) {
    .radial-menu {
        transform: scale(0.85);
        transform-origin: center;
    }
}

document.querySelectorAll(".radial-menu").forEach(menu => {
    const toggle = menu.querySelector(".radial-toggle");

    toggle.addEventListener("click", function (event) {
        event.stopPropagation();
        menu.classList.toggle("open");
    });

    menu.querySelectorAll(".radial-item").forEach(item => {
        item.addEventListener("click", function (event) {
            event.stopPropagation();
        });
    });

    document.addEventListener("click", function (event) {
        if (!menu.contains(event.target)) {
            menu.classList.remove("open");
        }
    });
});

További elemek ebből a kategóriából