CSS滑動導航邊框是一種常用的網站導航菜單設計，它能夠讓用戶更加方便快捷地瀏覽網站內容。下面介紹一種實現方式，可以在您的網站中輕松應用。

.nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 40px;
border-bottom: 2px solid transparent;
}
.nav-item {
margin: 0 20px;
position: relative;
cursor: pointer;
font-size: 18px;
font-weight: 600;
}
.nav-item:before {
content: "";
position: absolute;
bottom: -2px;
left: 0;
width: 0%;
height: 2px;
background-color: #000;
transition: 0.3s ease-in-out;
}
.nav-item:hover:before {
width: 100%;
}

首先，創建一個具有導航功能的HTML菜單。將每個菜單項包裝在一個帶有類名“nav-item”的li元素中，再將所有這些項目包含在div或ul中，并將其命名為“nav”。

然后，在CSS樣式表中設置.nav類來制定整個導航條的外觀，例如寬度、高度、內邊距和外邊距。此外，使用彈性盒子布局屬性 display: flex 來使整個導航條在水平方向上對齊居中，每個菜單項之間留出一定的間距，同時也可以設置所有文本大小、顏色和字體樣式。

利用 “.nav-item:before”偽元素，通過設置 height 和 bottom 使下劃線的位置距離文本底部一定的距離，以便形成類似于底部邊框的效果。然后，將該偽元素的寬度設置為0，并設置它的過渡屬性進行自然擴展。這意味著當我們將鼠標懸停在導航菜單項上時，邊框線會慢慢擴展并變成黑色。

簡而言之，這段CSS代碼通過設置偽元素和過渡屬性，增強了網站導航菜單的視覺體驗，幫助用戶更加自然地瀏覽網站內容。你也可以通過自定義屬性來進一步與該功能進行互動。