HTML、CSS 和 jQuery：建立一個漂亮的垂直滾動導航
在網頁設計中，導覽列是一個非常重要的組成部分。一個漂亮、易於使用的導覽列可以提供良好的使用者體驗，並為使用者提供直覺的導航系統。在本文中，我們將使用 HTML、CSS 和 jQuery 建立一個漂亮的垂直滾動導覽列，並提供特定的程式碼範例。
首先，我們需要確定導覽列的 HTML 結構。在這個範例中，我們將使用一個無序列表<ul></ul> 來建立導覽選單，並使用帶有樣式類別.nav-item 的清單項目< ;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 樣式來設計和佈局導覽列。以下是一個基礎的樣式範例：
.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 函式庫。
首先，在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();
});以上程式碼實現了兩個功能：
animate() 函數來實現平滑滾動效果。 scroll() 函數來監聽頁面滾動事件，並根據滾動位置為目前所在的節段添加活動樣式。 透過將以上 jQuery 程式碼加入網頁中，我們就完成了一個漂亮的垂直滾動導覽列。
綜上所述，透過結合 HTML、CSS 和 jQuery，我們可以簡單而優雅地建立出一個漂亮的垂直滾動導覽列。透過這個範例，我們可以更了解如何應用這些技術來提升網頁設計的使用者體驗。
以上是HTML、CSS和jQuery：建立一個漂亮的垂直滾動導航的詳細內容。更多資訊請關注PHP中文網其他相關文章！
