CSS3是指層疊樣式表第三代,已經是當下前端開發必學的技能之一。它帶來了豐富的新特性,其中包括導航滑動的效果。

nav{
overflow: hidden;
background-color: #333;
 }
nav button{
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
margin: 0;
font-size: 17px;
font-weight: bold;
color: #fff;
transition: 0.3s;
 }
button:hover{
background-color: #ddd;
color: black;
 }
button.active{
background-color: #4CAF50;
color: white;
 }

以上是導航欄的基本樣式，通過使用CSS3的transition屬性，可以讓按鈕在hover的時候實現顏色過渡效果，而使用active類可以讓選中的按鈕變成綠色背景白色字體。

const buttons = document.querySelectorAll("nav button");
function handleButtonClick(){
buttons.forEach(button =>button.classList.remove("active"))
this.classList.add("active");
}
buttons.forEach(button =>button.addEventListener("click", handleButtonClick));

以上是JavaScript代碼，附在HTML中，作用是為按鈕添加active類，即達到點擊選中的效果。

結合CSS3和JavaScript可以很輕松地實現導航欄滑動效果。希望通過此文章的介紹可以加深對CSS3和JavaScript的理解。