HTML, CSS und jQuery: Erstellen Sie eine schöne vertikale Scroll-Navigation-js-Tutorial-php.cn

HTML, CSS und jQuery: Erstellen Sie eine schöne vertikale Scroll-Navigation

PHPz

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

Original

1327 Leute haben es durchsucht

HTML, CSS und jQuery: Erstellen Sie eine schöne vertikale Scroll-Navigation

Im Webdesign ist die Navigationsleiste eine sehr wichtige Komponente. Eine schöne, benutzerfreundliche Navigationsleiste sorgt für ein gutes Benutzererlebnis und bietet Benutzern ein intuitives Navigationssystem. In diesem Artikel erstellen wir mithilfe von HTML, CSS und jQuery eine schöne vertikale Scroll-Navigationsleiste und stellen konkrete Codebeispiele bereit.

HTML-Struktur

Zuerst müssen wir die HTML-Struktur der Navigationsleiste bestimmen. In diesem Beispiel verwenden wir eine ungeordnete Liste <ul></ul>, um das Navigationsmenü zu erstellen, und listen Elemente mit der Stilklasse <code>.nav-item >< auf ;li> zur Darstellung jeder Navigationsschaltfläche. Jede Navigationsschaltfläche enthält ein <a></a>-Element, das den Textinhalt der Navigationsschaltfläche anzeigt. <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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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

jQuery 滚动效果

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

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

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

animate()

scroll()

Als nächstes verwenden wir CSS-Stile, um die Navigationsleiste zu entwerfen und zu gestalten. Hier ist ein einfaches Stilbeispiel:

rrreee

Mit diesen Grundstilen können wir eine einfache vertikale Navigationsleiste erstellen und verschiedene Stile auf die aktiven Navigationsschaltflächen anwenden.

🎜jQuery-Bildlaufeffekt🎜🎜Jetzt müssen wir der Navigationsleiste einen sanften Bildlaufeffekt hinzufügen, damit die Seite beim Klicken auf die Navigationsschaltfläche reibungslos zum entsprechenden Abschnitt scrollt. Um diesen Effekt zu erzielen, verwenden wir die jQuery-Bibliothek. 🎜🎜Fügen Sie zunächst den folgenden Code vor dem Tag am Ende der HTML-Datei ein, um die jQuery-Bibliothek einzuführen: 🎜rrreee🎜Dann fügen Sie den folgenden Code in die JavaScript-Datei ein: 🎜 rrreee🎜Der obige Code implementiert zwei Funktionen: 🎜

animate()

scroll()

Das obige ist der detaillierte Inhalt vonHTML, CSS und jQuery: Erstellen Sie eine schöne vertikale Scroll-Navigation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!