Circular Radial Menu Navbar

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Circular/Radial Menu</title>
    <style>
        :root {
            --menu-size: 60px; /* The size of the main button */
            --menu-item-size: 50px;
            --menu-radius: 150px; /* How far the items fly out */

--color-background: #f4f4f5;
            --color-primary: #6d28d9;
            --color-primary-light: #8b5cf6;
            --color-surface: #ffffff;
            --color-text-light: #ffffff;
            --color-text-dark: #374151;
            
            --transition-speed: 0.4s;
            --transition-curve: cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Bouncy */
        }

body { margin: 0; font-family: sans-serif; background-color: var(--color-background); }
        .content { min-height: 150vh; padding: 2rem; }

/*
        ========================================
        The Main Menu Container
        ========================================
        Fixed to the bottom-right of the screen.
        */
        .radial-menu {
            position: fixed;
            bottom: 2rem; right: 2rem;
            width: var(--menu-size); height: var(--menu-size);
            z-index: 1000;
        }

/* The invisible checkbox that tracks the menu's state (open/closed) */
        #menu-toggle-checkbox {
            display: none;
        }

/*
        ========================================
        The Main Menu Button (The Label)
        ========================================
        This is what the user clicks.
        */
        .menu-toggle-label {
            position: absolute; top: 0; left: 0;
            width: 100%; height: 100%;
            background-color: var(--color-primary);
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            color: var(--color-text-light);
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            transition: transform var(--transition-speed) ease;
            z-index: 2; /* Sits above the menu items */
        }
        .menu-toggle-label:hover { background-color: var(--color-primary-light); }
        
        /* The 'plus' icon and its transition to an 'X' */
        .icon-open, .icon-close { position: absolute; width: 24px; height: 24px; transition: transform 0.3s ease, opacity 0.3s ease; }
        #menu-toggle-checkbox:checked + .menu-toggle-label .icon-open { transform: rotate(45deg); opacity: 0; }
        #menu-toggle-checkbox:checked + .menu-toggle-label .icon-close { transform: rotate(0); opacity: 1; }
        .icon-close { opacity: 0; transform: rotate(-45deg); }

/*
        ========================================
        The Navigation Links (Menu Items)
        ========================================
        */
        .menu-items { list-style: none; margin: 0; padding: 0; }

.menu-item {
            position: absolute;
            top: 5px; left: 5px; /* Centered with the main button */
            width: var(--menu-item-size); height: var(--menu-item-size);
            
            /* Hidden by default and positioned in the center */
            opacity: 0;
            transform: translate(0, 0) scale(0.5);
            transition: transform var(--transition-speed) var(--transition-curve), 
                        opacity var(--transition-speed) var(--transition-curve);
            pointer-events: none;
            z-index: 1;
        }
        
        .menu-item a {
            display: flex; align-items: center; justify-content: center;
            width: 100%; height: 100%;
            background-color: var(--color-surface);
            color: var(--color-text-dark);
            border-radius: 50%;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        }
        .menu-item a:hover { background-color: #f9fafb; }
        .menu-item svg { width: 24px; height: 24px; }
        
        /*
        ========================================
        Open State and Circular Positioning
        ========================================
        When the checkbox is checked, this block becomes active.
        */
        #menu-toggle-checkbox:checked ~ .menu-items .menu-item {
            opacity: 1;
            pointer-events: auto; /* Make items clickable */
        }
        
        /*
        ========================================
        The magic happens here
        ========================================
        These angles are for a menu in the bottom-right corner,
        fanning out up and to the left.
        */

/* Item 1: Positioned at 90 degrees */
        #menu-toggle-checkbox:checked ~ .menu-items .menu-item:nth-child(1) {
            transform: translateY(calc(-1 * var(--menu-radius)));
        }
        
        /* Item 2: Positioned at 112.5 degrees */
        #menu-toggle-checkbox:checked ~ .menu-items .menu-item:nth-child(2) {
            transform: translate(calc(-0.383 * var(--menu-radius)), calc(-0.924 * var(--menu-radius)));
        }
        
        /* Item 3: Positioned at 135 degrees */
        #menu-toggle-checkbox:checked ~ .menu-items .menu-item:nth-child(3) {
            transform: translate(calc(-0.707 * var(--menu-radius)), calc(-0.707 * var(--menu-radius)));
        }

/* Item 4: Positioned at 157.5 degrees */
        #menu-toggle-checkbox:checked ~ .menu-items .menu-item:nth-child(4) {
             transform: translate(calc(-0.924 * var(--menu-radius)), calc(-0.383 * var(--menu-radius)));
        }
        
        /* Item 5: Positioned at 180 degrees */
        #menu-toggle-checkbox:checked ~ .menu-items .menu-item:nth-child(5) {
            transform: translateX(calc(-1 * var(--menu-radius)));
        }
    </style>
</head>
<body>

<div class="content">
        <h1>Circular/Radial Menu</h1>
        <p>Click the button in the bottom-right corner to see the menu items fan out.</p>
    </div>