動(dòng)態(tài)導(dǎo)航欄指的是當(dāng)鼠標(biāo)懸浮或點(diǎn)擊導(dǎo)航欄時(shí)，導(dǎo)航欄的樣式會(huì)有所變化。這種效果可以使用CSS來實(shí)現(xiàn)。

/* 首先定義導(dǎo)航欄的基本樣式 */
nav {
background-color: #eee;
display: flex;
justify-content: space-between;
align-items: center;
height: 50px;
padding: 0 20px;
}
nav a {
color: #333;
text-decoration: none;
font-size: 18px;
padding: 0 10px;
}
/* 鼠標(biāo)懸浮時(shí)的樣式 */
nav a:hover {
background-color: #333;
color: #fff;
}
/* 當(dāng)前選中的導(dǎo)航項(xiàng)的樣式 */
nav a.active {
background-color: #333;
color: #fff;
}
/* 使用JavaScript來添加active樣式 */
const links = document.querySelectorAll('nav a'); // 所有導(dǎo)航項(xiàng)
links.forEach(link =>{
link.addEventListener('click', function() {
links.forEach(link =>link.classList.remove('active')); // 先全部移除active樣式
this.classList.add('active'); // 再給當(dāng)前點(diǎn)擊項(xiàng)添加active樣式
});
});

上面的代碼中，首先定義了導(dǎo)航欄的基本樣式，包括背景色、高度、邊距等。然后，當(dāng)鼠標(biāo)懸浮導(dǎo)航項(xiàng)時(shí)，改變了背景色和文字顏色；當(dāng)某個(gè)導(dǎo)航項(xiàng)被選中時(shí)，也改變了背景色和文字顏色。

最后，通過JavaScript實(shí)現(xiàn)了點(diǎn)擊某個(gè)導(dǎo)航項(xiàng)后自動(dòng)添加active樣式，并且移除其他導(dǎo)航項(xiàng)的active樣式。