左右滑動切換是一種美觀且實用的導航方式，可以讓網頁的用戶體驗更加絲滑。本文將會分享如何通過CSS實現一款左右滑動切換的導航菜單，并附上相應的代碼示例。 我們可以使用flex布局創建一個簡單的左右滑動切換菜單，如下所示：

<nav class="nav">
<ul class="nav__list">
<li class="nav__item"><a href="#" class="nav__link">Home</a></li>
<li class="nav__item"><a href="#" class="nav__link">About</a></li>
<li class="nav__item"><a href="#" class="nav__link">Contact</a></li>
<li class="nav__item"><a href="#" class="nav__link">Portfolio</a></li>
<li class="nav__item"><a href="#" class="nav__link">Blog</a></li>
</ul>
</nav>
<style>
.nav {
display: flex;
overflow-x: auto;
scroll-behavior: smooth;
}
.nav__list {
display: flex;
flex-wrap: nowrap;
}
.nav__item {
padding: 1rem;
}
.nav__link {
color: #333;
text-decoration: none;
}
</style>

在上面的示例中，創建了一個包含導航菜單的nav元素，并在列表元素ul中設置了.flex-wrap: nowrap;使得菜單項能夠自動適應屏幕大小并水平滾動。為了使滾動更加自然流暢，我們還可以添加.scroll-behavior: smooth;使得滾動過程更加柔和。 為了美化菜單項，我們還可以添加鼠標懸停效果和當前項樣式，如下所示：

.nav__item:hover {
background-color: #eee;
}
.nav__item.active {
background-color: #333;
}
.nav__link {
color: #333;
text-decoration: none;
}
.nav__link:hover {
color: #fff;
}
.nav__link.active {
color: #fff;
}

在上面的代碼中，我們為.hover和.active類添加了相應的樣式以突出當前項和在菜單上懸停的項。在.nav__link類中還添加了自定義鏈接顏色，以區分當前項和非當前項以及懸停項和非懸停項。 總結： 左右滑動切換的導航菜單可以提高用戶體驗，并為您網站增加了更多的美感和功能性。通過上述代碼示例，您可以使用CSS輕松實現自己的導航菜單。