HTML, CSS dan jQuery: Bina navigasi skrol menegak yang cantik-tutorial js-php.cn

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

PHPz

Lepaskan： 2023-10-24 10:54:30

asal

1310 orang telah melayarinya

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>

Salin selepas log masuk

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;
}

Salin selepas log masuk

通过这些基本样式，我们可以创建一个简单的垂直导航栏，并为活动导航按钮应用不同的样式。

jQuery 滚动效果

现在，我们需要为导航栏添加一个平滑的滚动效果，以便在点击导航按钮时，页面会平滑滚动到相应的节段。为了实现这个效果，我们将使用 jQuery 库。

首先，在 HTML 文件底部的 <body> 标签前添加以下代码引入 jQuery 库：

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

Salin selepas log masuk

然后，在 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();
});

Salin selepas log masuk

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

animate()

scroll()

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: #🎜🎜#

animate()

scroll()

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!