<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animated Hamburger Menu with Integrated Cross</title>
    <style>
        /* Basic Reset */
        *, *::before, *::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            height: 100vh;
            position: relative;
            overflow: hidden; /* Prevent scroll when overlay is open */
        }

        /* Hamburger/Cross Button Styles */
        .menu-button {
            position: fixed;
            top: 20px;
            right: 20px;
            width: 35px;
            height: 30px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            z-index: 1001;
            transition: all 0.3s ease;
        }

        .menu-button span {
            display: block;
            height: 3px;
            width: 100%;
            background-color: #333;
            border-radius: 2px;
            transition: all 0.3s ease;
            transform-origin: center;
        }

        /* Transform Hamburger to Cross */
        .menu-button.open span:nth-child(1) {
            transform: rotate(45deg);
        }

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

        .menu-button.open span:nth-child(3) {
            transform: rotate(-45deg);
        }

        /* Overlay Styles */
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.6);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .overlay.active {
            display: flex;
            opacity: 1;
        }

        /* Content Container */
        .content {
            background-color: #fff;
            width: 350px;
            max-width: 90%;
            padding: 40px 30px;
            border-radius: 8px;
            position: relative;
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
            animation: scaleIn 0.3s ease forwards;
        }

        @keyframes scaleIn {
            from { transform: scale(0.8); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }

        /* Close Button (Same as Menu Button) */
        .overlay .menu-button {
            top: 20px;
            right: 20px;
        }

        /* Main Menu Styles */
        .content h2 {
            text-align: center;
            margin-bottom: 30px;
            color: #333;
        }

        .content button {
            width: 100%;
            padding: 12px;
            margin: 10px 0;
            border: none;
            background-color: #007BFF;
            color: #fff;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.2s ease;
        }

        .content button:hover {
            background-color: #0056b3;
        }

        /* Forms Styles */
        .form-container {
            display: none;
            flex-direction: column;
            align-items: center;
        }

        .form-container.active {
            display: flex;
        }

        .form-container h2 {
            text-align: center;
            margin-bottom: 20px;
            color: #333;
        }

        .form-container form {
            width: 100%;
            display: flex;
            flex-direction: column;
        }

        .form-container form input {
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
        }

        .form-container form button {
            padding: 12px;
            margin: 15px 0 0 0;
            border: none;
            background-color: #28A745;
            color: #fff;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.2s ease;
        }

        .form-container form button:hover {
            background-color: #1e7e34;
        }

        /* Responsive Adjustments */
        @media (max-width: 400px) {
            .menu-button {
                top: 15px;
                right: 15px;
                width: 30px;
                height: 25px;
            }

            .menu-button span {
                height: 2px;
            }

            .content {
                width: 90%;
                padding: 20px;
            }
        }
    </style>
</head>
<body>

    <!-- Hamburger/Cross Button (Shared for Menu and Forms) -->
    <div class="menu-button" id="menuButton" aria-label="Menu" aria-expanded="false" role="button" tabindex="0">
        <span></span>
        <span></span>
        <span></span>
    </div>

    <!-- Overlay -->
    <div class="overlay" id="overlay">
        <!-- Main Menu Content -->
        <div class="content" id="menuContent">
            <h2>Main Menu</h2>
            <button id="authBtn">Authorization</button>
            <button id="regBtn">Registration</button>
        </div>

        <!-- Authorization Form -->
        <div class="content form-container" id="authForm">
            <h2>Authorization</h2>
            <form>
                <input type="text" placeholder="Username" required>
                <input type="password" placeholder="Password" required>
                <button type="submit">Login</button>
            </form>
        </div>

        <!-- Registration Form -->
        <div class="content form-container" id="regForm">
            <h2>Registration</h2>
            <form>
                <input type="text" placeholder="Username" required>
                <input type="email" placeholder="Email" required>
                <input type="password" placeholder="Password" required>
                <input type="password" placeholder="Confirm Password" required>
                <button type="submit">Register</button>
            </form>
        </div>
    </div>

    <script>
        // Get Elements
        const menuButton = document.getElementById('menuButton');
        const overlay = document.getElementById('overlay');
        const menuContent = document.getElementById('menuContent');
        const authBtn = document.getElementById('authBtn');
        const regBtn = document.getElementById('regBtn');
        const authForm = document.getElementById('authForm');
        const regForm = document.getElementById('regForm');

        let currentState = 'menu'; // Tracks current view

        // Toggle Menu/Cross Button
        function toggleMenuButton() {
            menuButton.classList.toggle('open');
        }

        // Function to Show Specific Content
        function showContent(content) {
            // Hide all content containers
            menuContent.style.display = 'none';
            authForm.style.display = 'none';
            regForm.style.display = 'none';
            // Remove 'active' class
            authForm.classList.remove('active');
            regForm.classList.remove('active');
            // Show selected content
            content.style.display = 'flex';
            if (content.classList.contains('form-container')) {
                content.classList.add('active');
            }
            currentState = content.id;
        }

        // Function to Open Menu
        function openMenu() {
            toggleMenuButton();
            overlay.classList.add('active');
            showContent(menuContent);
            // Hide menu button when menu is open and cross is inside menu
            // Position remains fixed, but the cross is overlapping inside
        }

        // Function to Close Menu/Form
        function closeOverlay() {
            toggleMenuButton();
            overlay.classList.remove('active');
            // Reset to menu state
            currentState = 'menu';
        }

        // Function to Handle Menu Button Click
        function handleMenuButtonClick() {
            if (!overlay.classList.contains('active')) {
                // Open menu
                openMenu();
            } else {
                // If menu is open, close it
                closeOverlay();
            }
        }

        // Event Listeners
        menuButton.addEventListener('click', handleMenuButtonClick);

        authBtn.addEventListener('click', () => {
            showContent(authForm);
        });

        regBtn.addEventListener('click', () => {
            showContent(regForm);
        });

        // Close overlay when clicking outside the content
        overlay.addEventListener('click', (e) => {
            if (e.target === overlay) {
                closeOverlay();
            }
        });

        // Close overlay with Escape key
        window.addEventListener('keydown', (e) => {
            if (e.key === 'Escape' && overlay.classList.contains('active')) {
                closeOverlay();
            }
        });
    </script>

</body>
</html>No. The cross that the hamburger menu turned into should be INTO the new menu. inside it. namely, in the upper right corner.