CSS側面趣味菜單是一種常用的Web設計技巧，它可以為網站的導航菜單增加趣味和互動性，從而提升用戶體驗。下面我們將介紹如何使用CSS創建一個簡單但功能強大的側面趣味菜單。

/* 定義菜單容器樣式 */
.menu-container {
position: fixed;
top: 50%;
left: -250px;
width: 200px;
height: 300px;
background-color: #f5f5f5;
transform: translateY(-50%);
transition: 0.3s ease-in-out;
}
/* 鼠標懸停時菜單容器的樣式 */
.menu-container:hover {
left: 0;
}
/* 定義菜單項樣式 */
.menu-item {
display: block;
padding: 10px 20px;
background-color: #fff;
font-size: 16px;
cursor: pointer;
transition: 0.2s ease-in-out;
}
/* 鼠標懸停時菜單項的樣式 */
.menu-item:hover {
background-color: #f5f5f5;
}
/* 選中菜單項后的樣式 */
.selected {
background-color: #ccc;
}

上述代碼片段中，我們定義了一個菜單容器，并設置了其初始位置為左側屏幕外。當鼠標懸停在菜單容器上時，我們使用CSS過渡效果來使菜單容器移動到屏幕內。同時，我們還定義了菜單項的樣式，包括背景顏色、字體大小和光標樣式等。當鼠標懸停在菜單項上時，我們使用CSS過渡效果來改變其背景顏色。

為了實現菜單項選中的效果，我們在CSS中定義了一個名為“selected”的類，當用戶單擊菜單項時，我們使用JavaScript代碼將該類應用到當前選中的菜單項上。這樣，用戶就可以方便地區分當前選中的菜單項。

// 為菜單項綁定單擊事件
const menuItems = document.querySelectorAll('.menu-item');
menuItems.forEach(item =>{
item.addEventListener('click', () =>{
// 移除其他菜單項的selected類
menuItems.forEach(otherItem =>otherItem.classList.remove('selected'));
// 為當前點擊的菜單項添加selected類
item.classList.add('selected');
});
});

總而言之，CSS側面趣味菜單是一種非常實用和有趣的Web設計技巧，能夠為網站的導航菜單增添新的元素。在這篇文章中，我們介紹了CSS和JavaScript代碼，以支持您創建自己的側面趣味菜單。