HTML、CSS和jQuery：建立一個漂亮的垂直滾動導航-js教程-PHP中文網

HTML、CSS和jQuery：建立一個漂亮的垂直滾動導航

PHPz

發布： 2023-10-24 10:54:30

原創

1309 人瀏覽過

HTML、CSS和jQuery：建立一個漂亮的垂直滾動導航

HTML、CSS 和 jQuery：建立一個漂亮的垂直滾動導航

在網頁設計中，導覽列是一個非常重要的組成部分。一個漂亮、易於使用的導覽列可以提供良好的使用者體驗，並為使用者提供直覺的導航系統。在本文中，我們將使用 HTML、CSS 和 jQuery 建立一個漂亮的垂直滾動導覽列，並提供特定的程式碼範例。

HTML 結構

首先，我們需要確定導覽列的 HTML 結構。在這個範例中，我們將使用一個無序列表<ul></ul> 來建立導覽選單，並使用帶有樣式類別.nav-item 的清單項目&lt ;li> 來表示每個導航按鈕。每個導航按鈕中包含一個 <a></a> 元素，用於顯示導航按鈕的文字內容。

<nav>
  <ul class="nav-menu">
    <li class="nav-item active"><a href="#home">首页</a></li>
    <li class="nav-item"><a href="#about">关于我们</a></li>
    <li class="nav-item"><a href="#services">服务</a></li>
    <li class="nav-item"><a href="#portfolio">作品</a></li>
    <li class="nav-item"><a href="#contact">联系我们</a></li>
  </ul>
</nav>

登入後複製

CSS 樣式

接下來，我們使用 CSS 樣式來設計和佈局導覽列。以下是一個基礎的樣式範例：

.nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  display: block;
  margin-bottom: 10px;
}

.nav-item a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
  background-color: #f1f1f1;
  border-radius: 3px;
}

.nav-item.active a {
  color: #fff;
  background-color: #333;
}

登入後複製

透過這些基本樣式，我們可以建立一個簡單的垂直導覽欄，並為活動導航按鈕套用不同的樣式。

jQuery 捲動效果

現在，我們需要為導覽列新增一個平滑的捲動效果，以便在點擊導覽按鈕時，頁面會平滑捲動到對應的區段。為了實現這個效果，我們將使用 jQuery 函式庫。

首先，在HTML 檔案底部的<body> 標籤前面加入以下程式碼引入jQuery 函式庫：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

登入後複製

然後，在JavaScript 檔案中加入以下程式碼：

$(document).ready(function() {
  // 点击导航按钮时，平滑滚动到相应的节段
  $('a[href^="#"]').on('click', function(event) {
    event.preventDefault();
    var target = $(this.getAttribute('href'));
    if (target.length) {
      $('html, body').stop().animate({
        scrollTop: target.offset().top
      }, 1000);
    }
  });

  // 根据滚动位置添加活动导航按钮样式
  $(window).scroll(function() {
    var scrollDistance = $(window).scrollTop();
    $('.nav-item').each(function(i) {
      if ($(this).position().top <= scrollDistance + 100) {
        $('.nav-item.active').removeClass('active');
        $('.nav-item').eq(i).addClass('active');
      }
    });
  }).scroll();
});

登入後複製

以上程式碼實現了兩個功能：