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

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>

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()rrreeeCSS-Stile

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

<li>Wenn Sie auf die Navigationsschaltfläche klicken, scrollt die Seite reibungslos zum entsprechenden Abschnitt. Wir haben die Funktion animate() von jQuery verwendet, um einen reibungslosen Scrolleffekt zu erzielen. 🎜 <li>Der Stil der Navigationsschaltfläche wechselt beim Scrollen der Seite automatisch in den aktiven Zustand. Wir haben die Funktion scroll() von jQuery verwendet, um Seiten-Scroll-Ereignisse abzuhören und dem aktuellen Abschnitt basierend auf der Scroll-Position aktive Stile hinzuzufügen. 🎜🎜🎜Durch das Hinzufügen des obigen jQuery-Codes zur Webseite haben wir eine schöne vertikale Scroll-Navigationsleiste fertiggestellt. 🎜🎜Zusammenfassend lässt sich sagen, dass wir durch die Kombination von HTML, CSS und jQuery einfach und elegant eine schöne vertikale Scroll-Navigationsleiste erstellen können. Anhand dieses Beispiels können wir besser verstehen, wie diese Techniken angewendet werden können, um die Benutzererfahrung beim Webdesign zu verbessern. 🎜

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!