CSS導航欄是網站設計中經常使用的一個元素，它能幫助用戶快速地找到所需的內容，提高用戶體驗。今天我們來講一下如何實現一個橫向拖動的導航欄。

/* CSS代碼 */
.nav {
display: flex;
overflow-x: auto; /* 允許橫向滾動 */
scrollbar-width: none; /* 隱藏滾動條 */
-webkit-overflow-scrolling: touch; /* 啟用iOS的滾動效果 */
}
.nav::-webkit-scrollbar {
display: none; /* 隱藏滾動條 */
}
.nav-item {
white-space: nowrap; /* 防止文字換行 */
padding: 10px;
}

首先，我們需要為導航欄容器添加display:flex屬性，這樣子元素就能橫向排列。然后，為了允許橫向滾動，我們添加了overflow-x:auto屬性。為了去掉默認的滾動條，我們使用了scrollbar-width:none屬性，并使用::-webkit-scrollbar選擇器隱藏了滾動條。

接下來，我們為導航欄中的每一個item添加padding樣式，并使用white-space:nowrap屬性防止文字換行，這樣就能讓導航欄中的每一個item都顯示在同一行。

<!-- HTML代碼 -->
<div class="nav">
<div class="nav-item">首頁</div>
<div class="nav-item">分類</div>
<div class="nav-item">購物車</div>
<div class="nav-item">我的</div>
</div>

最后，我們來看一下HTML代碼。這里我們只是簡單地列出了四個導航欄item，你可以根據需要自行添加或修改。

通過以上的CSS和HTML代碼的結合，我們就實現了一個橫向拖動的導航欄。在移動設備上，用戶可以通過左右滑動來查看所有的導航欄item。這在移動端網站設計中非常實用，并且能夠提高用戶體驗。