CSS菜單切換效果是Web設計中非常常用的功能，它可以通過CSS代碼實現菜單間的切換動畫效果，讓頁面更加生動。

/* CSS代碼實現菜單切換效果 */
.menu {
display: flex;
justify-content: center;
align-items: center;
}
.menu li {
margin: 0 20px;
cursor: pointer;
}
.menu li:hover {
color: #fff;
background-color: #333;
}
.active {
color: #fff;
background-color: #333;
}
/* JS代碼實現菜單切換 */
const menuItems = document.querySelectorAll('.menu li');
menuItems.forEach(item =>{
item.addEventListener('click', () =>{
removeActiveClass();
item.classList.add('active');
})
})
function removeActiveClass() {
menuItems.forEach(item =>{
item.classList.remove('active');
})
}

上述代碼中，我們首先使用了CSS的Flex布局來實現菜單水平居中，并給菜單列表每個元素增加了一些樣式，當鼠標移動到其上方時，會顯示為帶有背景色和較深字體色的狀態。當某個菜單項被選中時，我們會給該元素增加'active'類來改變樣式，同時移除其他菜單項的選中狀態。最后，我們通過JavaScript代碼監聽每個菜單項的事件并綁定函數，以實現菜單項選中狀態的變化。