CSS 手機彈出菜單是一種通過 CSS 樣式設計出來的彈出式菜單，通常用于 Android 和 iOS 設備上。它可以讓用戶通過點擊按鈕或滑動頁面自動彈出菜單，提供方便快捷的訪問和控制。
在 CSS 中，我們可以使用彈出菜單的樣式，通過定義彈出菜單的背景、邊框、內容和按鈕樣式，來實現彈出菜單的效果。下面是一個基本的 CSS 手機彈出菜單示例：
HTML 代碼：
```html
<button type="button" onclick="openMenu()">打開菜單</button>
<div id="menu" style="display: none;"></div>
CSS 代碼：
```css
#menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: none;
#menu:hover {
display: block;
#menu button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
border-radius: 5px;
cursor: pointer;
#menu button:hover {
background-color: #3e8e41;
#menu button:active,
#menu button:focus {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
border-radius: 5px;
cursor: pointer;
在上面的示例中，我們使用了 CSS 的 `position: fixed` 屬性，將菜單設置為固定位置。`top: 0; left: 0;` 屬性設置了菜單的初始位置和大小。`width: 100%; height: 100%;` 屬性設置了菜單的寬度和高度，以及背景顏色。
在 HTML 中，我們添加了一個按鈕元素，用來觸發菜單的打開和關閉事件。當用戶點擊按鈕時，菜單會被打開或關閉。
CSS 代碼中，我們使用了 `display: none;` 屬性，將菜單設置為不可見狀態。當用戶點擊菜單按鈕時，`display: block;` 屬性會被設置為可見狀態，從而彈出菜單。`#menu:hover` 屬性用于當用戶點擊菜單按鈕時，將菜單的可見狀態切換為不可見狀態。`#menu button:hover` 屬性用于當用戶點擊菜單按鈕時，將按鈕的可見狀態切換為不可見狀態。`#menu button:active, #menu button:focus` 屬性用于當用戶點擊菜單按鈕時，將按鈕的可見狀態切換為不可見狀態。
使用 CSS 手機彈出菜單可以輕松地創建出美觀、簡潔、易于使用的彈出式菜單。同時，由于它是通過 CSS 樣式設計的，因此可以在不同設備和瀏覽器上保持一致。