모바일 장치의 측면을 변화시키는 클론다이크 솔리테어 게임의 상위 탐색 메뉴

클론다이크 솔리테어 게임을 작업 중인데 페이지 상단에 표시되는 메뉴를 만들었습니다. 노트북이나 컴퓨터에서는 많은 플레이어들이 익숙한 메뉴인 점을 고려하여 일반 메뉴처럼 보이도록 하고 싶었지만, 모바일 기기에서는 메뉴 항목을 클릭하기 쉽게 만들고 싶었습니다.

<div class="menu-bar" id="menuBar"></div>

다음은 일반 메뉴의 CSS 스타일입니다.

        body {
            padding: 0;
            margin: 0;
        }

        /* Basic menu styling for desktop */
        .menu-bar {
            display: flex;
            background-color: #333;
            padding: 10px;
            justify-content: flex-start;
            /* Align menu items to the left */

            font-family: Arial, Helvetica, sans-serif
        }

        .menu-item {
            color: white;
            padding: 10px;
            cursor: pointer;
            position: relative;
            text-align: center;
            flex: 0;
            display: flex;
            /* Align icon and text on the same line */
            align-items: center;
            justify-content: center;
            white-space: nowrap;
        }

        .menu-item {
            text-align: left;
        }

        .menu-item i {
            font-size: 1.5rem;
            margin-right: 8px;
            /* Space between icon and text */
        }

        .menu-item .shortcut,
        .submenu-item .shortcut {
            color: #999;
        }

        .menu-item .shortcut {
            display: none;
            /* too ugly on main items */
        }


        .submenu {
            display: none;
            position: absolute;
            background-color: #444;
            top: 40px;
            left: 0;
            width: 150px;
        }

        .submenu-item {
            padding: 10px;
            color: white;
        }

        .submenu-item:hover {
            background-color: #666;
        }

        .menu-item.active .submenu {
            display: block;
        }

모바일 장치에서 메뉴가 다르게 작동하도록 하기 위해 미디어 쿼리를 사용할 것입니다.

        /* Mobile styles */
        @media (max-width: 768px) {
            .menu-bar {
                flex-direction: column;
                position: relative;
                display: grid;
                /* Grid layout for mobile */
                grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
                /* Evenly divide menu items into columns */
                gap: 10px;
            }

            .menu-item {
                padding: 15px 5px;
                display: block;
                /* Stack icon and text vertically on mobile */
                white-space: normal;
            }

            .menu-item {
                text-align: center;
            }

            .menu-item i {
                font-size: 2rem;
                /* Larger icon for mobile */
                margin-right: 0;
                /* Remove margin on mobile */
                display: block;
                /* Icon on a separate line */
                text-align: center;
            }

            .menu-item .shortcut {
                display: none;
                /* Hide shortcuts on mobile */
            }

            .submenu {
                position: static;
                display: none;
                width: 100%;
                background-color: #333;
                top: 0;
                left: 0;
                z-index: 10;
            }

            .menu-item.active .submenu {
                display: block;
            }

            .menu-bar.active .menu-item {
                display: none;
            }

            .menu-bar.active .menu-item.active {
                display: block;
            }

            .submenu .close-btn {
                color: white;
                padding: 10px;
                cursor: pointer;
                text-align: center;
                background-color: #444;
            }

            .submenu .close-btn:hover {
                background-color: #666;
            }
        }

그리고 마지막으로 자바스크립트:

        const menuData = [
            {
                icon: "fa-solid fa-gamepad", // Icon for "New Game..."
                icon_text: "?", // Emoji for game controller
                name: "New Game...",
                shortcut: "",
                submenu: {
                    items: [
                        {
                            name: "Restart",
                            icon: "fa-solid fa-undo-alt", // Icon for "Restart"
                            icon_text: "?", // Emoji for restart
                            shortcut: "Ctrl+N"
                        },
                        {
                            name: "Start New",
                            icon: "fa-solid fa-play-circle", // Icon for "Start New"
                            icon_text: "▶️", // Emoji for start/play
                            shortcut: ""
                        }
                    ]
                }
            },
            {
                icon: "fa-solid fa-cog", // Icon for "Settings..."
                name: "Settings...",
                icon_text: "⚙️", // Emoji for settings
                shortcut: "Ctrl+S",
                submenu: null
            },
            {
                icon: "fa-solid fa-th-large", // Icon for "More Solitaire..."
                icon_text: "?", // Emoji for cards/games
                name: "More Solitaire...",
                shortcut: "Ctrl+P",
                submenu: null
            }
        ];



        function createMenu(menuData) {
            const mode = "emoji";
            const menuBar = document.getElementById('menuBar');

            menuData.forEach(item => {
                const menuItem = document.createElement('div');
                menuItem.classList.add('menu-item');

                // Add icon
                const icon = document.createElement('i');
                (mode === "emoji")
                    ? (icon.innerText = item.icon_text, icon.style["font-style"] = "normal")
                    : icon.className = item.icon;
                menuItem.appendChild(icon);

                // Add name
                const name = document.createElement('div');
                name.textContent = item.name;
                menuItem.appendChild(name);

                // Add shortcut if available
                if (item.shortcut) {
                    const shortcut = document.createElement('span');
                    shortcut.classList.add('shortcut');
                    shortcut.textContent = ` (${item.shortcut})`;
                    menuItem.appendChild(shortcut);
                }

                // Check for submenu
                if (item.submenu) {
                    const submenu = document.createElement('div');
                    submenu.classList.add('submenu');

                    item.submenu.items.forEach(subItem => {
                        const submenuItem = document.createElement('div');
                        submenuItem.classList.add('submenu-item');

                        // Submenu item icon
                        const subIcon = document.createElement('i');
                        (mode === "emoji")
                            ? (subIcon.innerText = subItem.icon_text, subIcon.style["font-style"] = "normal")
                            : subIcon.className = subItem.icon;
                        submenuItem.appendChild(subIcon);

                        // Submenu item name
                        const subName = document.createTextNode(` ${subItem.name}`);
                        submenuItem.appendChild(subName);

                        // Submenu item shortcut
                        if (subItem.shortcut) {
                            const subShortcut = document.createElement('span');
                            subShortcut.classList.add('shortcut');
                            subShortcut.textContent = ` (${subItem.shortcut})`;
                            submenuItem.appendChild(subShortcut);
                        }

                        submenu.appendChild(submenuItem);
                    });

                    // Add a close button at the end of the submenu for mobile
                    const closeButton = document.createElement('div');
                    closeButton.classList.add('submenu-item'); // Make it look like other submenu items

                    // Add the chevron icon
                    const closeIcon = document.createElement('i');
                    (mode === "emoji")
                        ? (closeIcon.innerText = '⬆️', closeIcon.style["font-style"] = "normal")
                        : closeIcon.className = 'fa-solid fa-chevron-up';
                    closeButton.appendChild(closeIcon);

                    // Add the "Close" text
                    const closeText = document.createTextNode(' Close');
                    closeButton.appendChild(closeText);

                    closeButton.addEventListener('click', function (event) {
                        event.stopPropagation(); // Prevent the click from propagating to the parent .menu-item
                        menuItem.classList.remove('active'); // Close the submenu
                    });
                    submenu.appendChild(closeButton);

                    menuItem.appendChild(submenu);

                    // Add event listener for clicking to show/hide submenu
                    menuItem.addEventListener('click', function (event) {
                        event.stopPropagation(); // Prevent closing when clicking inside the menu
                        const allMenuItems = document.querySelectorAll('.menu-item');

                        if (window.innerWidth <= 768) {
                            allMenuItems.forEach(item => item.classList.remove('active')); // Close all
                            menuItem.classList.add('active'); // Open clicked one
                        } else {
                            menuItem.classList.toggle('active'); // Toggle submenu on desktop
                        }
                    });

                    // Close the submenu when clicking outside of the menu
                    document.addEventListener('click', function (event) {
                        const allMenuItems = document.querySelectorAll('.menu-item');

                        allMenuItems.forEach(menuItem => {
                            if (!menuItem.contains(event.target)) {
                                menuItem.classList.remove('active'); // Close the submenu if clicked outside
                            }
                        });
                    });
                }




                menuBar.appendChild(menuItem);
            });
        }

        // Initialize the menu
        createMenu(menuData);

        // Add resize event listener to handle dynamic resizing
        window.addEventListener('resize', function () {
            const menuBar = document.getElementById('menuBar');
            if (window.innerWidth > 768) {
                // On desktop, ensure that all submenus are collapsed by default
                const allMenuItems = document.querySelectorAll('.menu-item');
                allMenuItems.forEach(item => item.classList.remove('active'));
            }
        });

여기에서 코드를 사용해 볼 수 있습니다.
https://codepen.io/qualotius/pen/KKOWjyd

위 내용은 모바일 장치의 측면을 변화시키는 클론다이크 솔리테어 게임의 상위 탐색 메뉴의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!