Un menu de navigation supérieur pour les jeux de solitaire Klondike, qui change d'aspect sur les appareils mobiles

Je travaille sur un jeu de solitaire Klondike et j'ai créé un menu qui s'affiche en haut de la page. Sur les ordinateurs portables et les ordinateurs, je veux ressembler à des menus normaux, étant donné que de nombreux joueurs sont habitués à de tels menus, mais sur les appareils mobiles, je voulais que les éléments de menu soient faciles à cliquer.

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

Voici le style CSS pour le menu régulier :

        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;
        }

Pour que le menu agisse différemment sur les appareils mobiles, nous allons utiliser des requêtes multimédias :

        /* 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;
            }
        }

et enfin le javascript :

        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'));
            }
        });

Vous pouvez jouer avec le code ici :
https://codepen.io/quantotius/pen/KKOWjyd

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!