HTML, CSS dan jQuery: Bina navigasi skrol menegak yang cantik

HTML, CSS dan jQuery: Bina navigasi tatal menegak yang cantik

Dalam reka bentuk web, bar navigasi ialah bahagian komponen yang sangat penting. Bar navigasi yang cantik dan mudah digunakan memberikan pengalaman pengguna yang baik dan menyediakan pengguna dengan sistem navigasi intuitif. Dalam artikel ini, kami akan membina bar navigasi tatal menegak yang cantik menggunakan HTML, CSS dan jQuery serta memberikan contoh kod konkrit.

struktur HTML

Pertama, kita perlu menentukan struktur HTML bar navigasi. Dalam contoh ini, kami akan menggunakan senarai <ul></ul> yang tidak tersusun untuk mencipta menu navigasi dan senarai item dengan kelas gaya <code>.nav-item > untuk mewakili setiap butang navigasi. Setiap butang navigasi mengandungi elemen <a></a> yang memaparkan kandungan teks butang navigasi. <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 样式

接下来，我们使用 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 文件底部的 标签前添加以下代码引入 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();
});

以上代码实现了两个功能：

<li>当点击导航按钮时，页面将会平滑滚动到对应的节段。我们使用了 jQuery 的 animate() 函数来实现平滑滚动效果。 <li>导航按钮的样式在滚动页面时会自动切换为活动状态。我们使用了 jQuery 的 scroll()rrreeeGaya CSS

Seterusnya, kami menggunakan gaya CSS untuk mereka bentuk dan susun atur bar navigasi. Berikut ialah contoh gaya asas:

rrreee

Dengan gaya asas ini, kami boleh mencipta bar navigasi menegak yang ringkas dan menggunakan gaya berbeza pada butang navigasi aktif.

#🎜🎜#jQuery scrolling effect#🎜🎜##🎜🎜#Sekarang, kita perlu menambah kesan tatal lancar pada bar navigasi, supaya apabila butang navigasi diklik, halaman akan menatal dengan lancar ke bahagian yang sepadan. Untuk mencapai kesan ini, kami akan menggunakan perpustakaan jQuery. #🎜🎜##🎜🎜#Pertama, tambah kod berikut sebelum teg di bahagian bawah fail HTML untuk memperkenalkan perpustakaan jQuery: #🎜🎜#rrreee#🎜🎜# Kemudian, dalam fail JavaScript Tambah kod berikut: #🎜🎜#rrreee#🎜🎜#Kod di atas melaksanakan dua fungsi: #🎜🎜#

<li>Apabila butang navigasi diklik, halaman akan menatal dengan lancar ke bahagian yang sepadan. Kami menggunakan fungsi animate() jQuery untuk mencapai kesan tatal yang lancar. #🎜🎜# <li>Gaya butang navigasi secara automatik akan bertukar kepada keadaan aktif apabila menatal halaman. Kami menggunakan fungsi scroll() jQuery untuk mendengar acara tatal halaman dan menambah gaya aktif pada bahagian semasa berdasarkan kedudukan tatal. #🎜🎜##🎜🎜##🎜🎜#Dengan menambahkan kod jQuery di atas pada halaman web, kami telah melengkapkan bar navigasi tatal menegak yang cantik. #🎜🎜##🎜🎜#Ringkasnya, dengan menggabungkan HTML, CSS dan jQuery, kami boleh membina bar navigasi tatal menegak yang cantik dengan mudah dan elegan. Melalui contoh ini, kita boleh lebih memahami cara menggunakan teknik ini untuk meningkatkan pengalaman pengguna reka bentuk web. #🎜🎜#

Atas ialah kandungan terperinci HTML, CSS dan jQuery: Bina navigasi skrol menegak yang cantik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!