HTML, CSS et jQuery : créez une belle navigation à défilement vertical

HTML, CSS et jQuery : créez une belle navigation à défilement vertical

Dans la conception Web, la barre de navigation est un composant très important. Une belle barre de navigation facile à utiliser offre une bonne expérience utilisateur et offre aux utilisateurs un système de navigation intuitif. Dans cet article, nous allons créer une belle barre de navigation à défilement vertical en utilisant HTML, CSS et jQuery, et fournir des exemples de code concrets.

Structure HTML

Tout d'abord, nous devons déterminer la structure HTML de la barre de navigation. Dans cet exemple, nous utiliserons une liste non ordonnée <ul></ul> pour créer le menu de navigation, et listerons les éléments avec la classe de style <code>.nav-item >< ;li> pour représenter chaque bouton de navigation. Chaque bouton de navigation contient un élément <a></a> qui affiche le contenu textuel du bouton de navigation. <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()rrreeeStyles CSS

Ensuite, nous utilisons les styles CSS pour concevoir et mettre en page la barre de navigation. Voici un exemple de style de base :

rrreee

Avec ces styles de base, nous pouvons créer une simple barre de navigation verticale et appliquer différents styles aux boutons de navigation actifs.

🎜Effet de défilement jQuery🎜🎜Maintenant, nous devons ajouter un effet de défilement fluide à la barre de navigation, de sorte que lorsque vous cliquez sur le bouton de navigation, la page défile en douceur jusqu'à la section correspondante. Pour obtenir cet effet, nous utiliserons la bibliothèque jQuery. 🎜🎜Tout d'abord, ajoutez le code suivant avant la balise en bas du fichier HTML pour introduire la bibliothèque jQuery : 🎜rrreee🎜Ensuite, ajoutez le code suivant dans le fichier JavaScript : 🎜 rrreee🎜Le code ci-dessus implémente deux fonctionnalités : 🎜

<li>Lorsque vous cliquez sur le bouton de navigation, la page défilera en douceur jusqu'à la section correspondante. Nous avons utilisé la fonction animate() de jQuery pour obtenir un effet de défilement fluide. 🎜 <li>Le style du bouton de navigation passera automatiquement à l'état actif lors du défilement de la page. Nous avons utilisé la fonction scroll() de jQuery pour écouter les événements de défilement de page et ajouter des styles actifs à la section actuelle en fonction de la position de défilement. 🎜🎜🎜En ajoutant le code jQuery ci-dessus à la page Web, nous avons complété une belle barre de navigation à défilement vertical. 🎜🎜Pour résumer, en combinant HTML, CSS et jQuery, nous pouvons construire une belle barre de navigation à défilement vertical de manière simple et élégante. Grâce à cet exemple, nous pouvons mieux comprendre comment appliquer ces techniques pour améliorer l'expérience utilisateur de la conception Web. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!