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代码监听每个菜单项的事件并绑定函数，以实现菜单项选中状态的变化。