我正在開發(fā)一款克朗代克紙牌遊戲，我創(chuàng)建了一個顯示在頁面頂部的選單。在筆記型電腦和電腦上，我希望看起來像常規(guī)選單，考慮到許多玩家都習(xí)慣了這樣的選單，但在行動裝置上，我希望選單項目易於點擊。
<div class="menu-bar" id="menuBar"></div>
這是常規(guī)選單的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;
}
為了讓選單在行動裝置上表現(xiàn)不同，我們將使用媒體查詢：
/* 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;
}
}
最後是 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'));
}
});
您可以在這裡使用程式碼：
https://codepen.io/quantotius/pen/KKOWjyd
以上是克朗代克紙牌遊戲的頂部導(dǎo)航選單，改變了行動裝置上的方面的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費脫衣圖片
Undresser.AI Undress
人工智慧驅(qū)動的應(yīng)用程序，用於創(chuàng)建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發(fā)環(huán)境
Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
什麼是AutoPrefixer，它如何工作？
Jul 02, 2025 am 01:15 AM
Autoprefixer是一個根據(jù)目標(biāo)瀏覽器範(fàn)圍自動為CSS屬性添加廠商前綴的工具。 1.它解決了手動維護前綴易出錯的問題；2.通過PostCSS插件形式工作，解析CSS、分析需加前綴的屬性、依配置生成代碼；3.使用步驟包括安裝插件、設(shè)置browserslist、在構(gòu)建流程中啟用；4.注意事項有不手動加前綴、保持配置更新、非所有屬性都加前綴、建議配合預(yù)處理器使用。
CSS教程，用於創(chuàng)建粘性標(biāo)頭或頁腳
Jul 02, 2025 am 01:04 AM
TocreatestickyheadersandfooterswithCSS,useposition:stickyforheaderswithtopvalueandz-index,ensuringparentcontainersdon’trestrictit.1.Forstickyheaders:setposition:sticky,top:0,z-index,andbackgroundcolor.2.Forstickyfooters,betteruseposition:fixedwithbot
CSS教程，用於創(chuàng)建加載旋轉(zhuǎn)器和動畫
Jul 07, 2025 am 12:07 AM
創(chuàng)建CSS加載旋轉(zhuǎn)器的方法有三種：1.使用邊框的基本旋轉(zhuǎn)器，通過HTML和CSS實現(xiàn)簡單動畫；2.使用多個點的自定義旋轉(zhuǎn)器，通過不同延遲時間實現(xiàn)跳動效果；3.在按鈕中添加旋轉(zhuǎn)器，通過JavaScript切換類來顯示加載狀態(tài)。每種方法都強調(diào)了設(shè)計細(xì)節(jié)如顏色、大小、可訪問性和性能優(yōu)化的重要性，以提升用戶體驗。
CSS教程專注於移動優(yōu)先設(shè)計
Jul 02, 2025 am 12:52 AM
Mobile-firstCSSdesignrequiressettingtheviewportmetatag,usingrelativeunits,stylingfromsmallscreensup,optimizingtypographyandtouchtargets.First,addtocontrolscaling.Second,use%,em,orreminsteadofpixelsforflexiblelayouts.Third,writebasestylesformobile,the
如何創(chuàng)建本質(zhì)上響應(yīng)的網(wǎng)格佈局？
Jul 02, 2025 am 01:19 AM
要創(chuàng)建內(nèi)在響應(yīng)式網(wǎng)格佈局，核心方法是使用CSSGrid的repeat(auto-fit,minmax())模式；1.設(shè)置grid-template-columns:repeat(auto-fit,minmax(200px,1fr))讓瀏覽器自動調(diào)整列數(shù)並限制每列最小和最大寬度；2.使用gap控制格子間距；3.容器應(yīng)設(shè)為相對單位如width:100%、配合box-sizing:border-box避免寬度計算錯誤並用margin:auto居中；4.可選設(shè)置行高與內(nèi)容對齊方式提升視覺一致性，如row
如何將整個網(wǎng)格集中在視口中？
Jul 02, 2025 am 12:53 AM
要讓整個網(wǎng)格佈局在視口中居中顯示，可通過以下方法實現(xiàn)：1.使用margin:0auto實現(xiàn)水平居中，需設(shè)定容器固定寬度，適用於固定佈局；2.利用Flexbox在外層容器設(shè)置justify-content和align-items屬性，結(jié)合min-height:100vh可實現(xiàn)垂直和水平居中，適合全屏展示場景；3.直接使用CSSGrid的place-items屬性在父容器上快速居中，簡潔且現(xiàn)代瀏覽器支持良好，同時需確保父容器有足夠高度。每種方式均有適用場景和限制，根據(jù)實際需求選擇合適的方案即可。
CSS中使用@supports的功能檢測是什麼？
Jul 02, 2025 am 01:14 AM
prainuredetectionIncsssusissuse@supportScheckSifabRowsEsuppecifortSupecifortEfeatureBeforeApplyingReplyingStyles.1.itusesconditionalcsssssbasssbasedonproperty-valueperty-valuepairs，suessas@supports@supports@supports@supports（display：grid）
解決CSS瀏覽器兼容性問題和前綴
Jul 07, 2025 am 01:44 AM
處理CSS瀏覽器兼容性和前綴問題需理解瀏覽器支持差異並合理使用廠商前綴。 1.了解常見問題如Flexbox、Grid支持不一，position:sticky失效，動畫表現(xiàn)不同；2.查閱CanIuse確認(rèn)特性支持情況；3.正確使用-webkit-、-moz-、-ms-、-o-等廠商前綴；4.推薦使用Autoprefixer自動添加前綴；5.安裝PostCSS並配置browserslist指定目標(biāo)瀏覽器；6.構(gòu)建時自動處理兼容性；7.老項目可用Modernizr檢測特性；8.不必追求所有瀏覽器一致，確
