Ich arbeite an einem Klondike-Solitärspiel und habe ein Menü erstellt, das oben auf der Seite angezeigt wird. Auf Laptops und Computern möchte ich wie normale Menüs aussehen, da viele Spieler an solche Menüs gewöhnt sind, aber auf mobilen Geräten wollte ich, dass die Menüelemente einfach anzuklicken sind.
<div class="menu-bar" id="menuBar"></div>
Hier ist der CSS-Stil für das reguläre Menü:
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;
}
Damit das Menü auf Mobilgeräten anders funktioniert, verwenden wir Medienabfragen:
/* 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;
}
}
und schließlich das 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'));
}
});
Hier können Sie mit dem Code spielen:
https://codepen.io/quantotius/pen/KKOWjyd
Das obige ist der detaillierte Inhalt vonEin Top-Navigationsmenü für ein Klondike Solitaire-Spiel, das auf Mobilgeräten sein Aussehen ändert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
