2. CSS樣式

接著，使用CSS來設置導航欄的樣式和浮動效果：

.navbar {
  position: fixed; /* 固定位置 */
  top: 0; /* 導航欄位于頁面頂部 */
  width: 100%; /* 寬度為100% */
  background-color: #333; /* 背景顏色 */
  z-index: 1000; /* 確保導航欄在其他元素之上 */
}

.navbar ul {
  list-style-type: none; /* 移除列表項的默認樣式 */
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.navbar li {
  float: left; /* 列表項浮動 */
}

.navbar li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.navbar li a:hover {
  background-color: #ddd; /* 鼠標懸停時的背景色 */
  color: black;
}

使用JavaScript

如果需要更復雜的交互，可以使用JavaScript來增強導航欄的功能。例如，可以添加一個滾動監聽器，當頁面滾動到特定位置時，導航欄才開始浮動。

window.addEventListener('scroll', function() {
  var nav = document.querySelector('.navbar');
  var sticky = nav.offsetTop;

  if (window.pageYOffset > sticky) {
    nav.classList.add('sticky');
  } else {
    nav.classList.remove('sticky');
  }
});

考慮響應式設計

在設計浮動導航欄時，還需要考慮不同設備的顯示效果。使用媒體查詢來調整導航欄的樣式，確保在移動設備上也能提供良好的用戶體驗。

@media (max-width: 600px) {
  .navbar li {
    float: none;
  }
}

結語

浮動導航欄是提升網站用戶體驗的有效工具。通過上述方法，你可以輕松地為你的網站添加一個既美觀又實用的浮動導航欄。記住，設計時要考慮到不同設備和屏幕尺寸，確保導航欄在所有情況下都能正常工作。