Comment implémenter un menu de navigation à défilement fluide sur une page Web via du CSS pur

Comment implémenter un menu de navigation à défilement fluide pour une page Web via du CSS pur

Guider les utilisateurs à naviguer dans une page Web est un élément de conception important, et un menu de navigation à défilement fluide est un moyen de fournir une interface conviviale. expérience de navigation. Cet article présentera comment implémenter un tel menu de navigation via du CSS pur et fournira des exemples de code correspondants.

1. Structure HTML

Tout d'abord, nous devons créer la structure de base du menu de navigation en HTML. Voici un exemple simple :

<nav class="smooth-scroll-nav">
  <ul class="smooth-scroll-menu">
    <li><a href="#section1">Section 1</a></li>
    <li><a href="#section2">Section 2</a></li>
    <li><a href="#section3">Section 3</a></li>
    <li><a href="#section4">Section 4</a></li>
  </ul>
</nav>

<section id="section1">
  <h2>Section 1</h2>
  <p>This is the content of section 1.</p>
</section>

<section id="section2">
  <h2>Section 2</h2>
  <p>This is the content of section 2.</p>
</section>

<section id="section3">
  <h2>Section 3</h2>
  <p>This is the content of section 3.</p>
</section>

<section id="section4">
  <h2>Section 4</h2>
  <p>This is the content of section 4.</p>
</section>

Dans l'exemple ci-dessus, nous avons créé un élément <nav></nav> en tant que conteneur pour le menu de navigation, puis avons ajouté un <ul l le> agit comme une liste de menus, avec les éléments de menu correspondants ajoutés. Ensuite, nous utilisons l'élément <code><section></section> pour créer le contenu de chaque section, où l'attribut id est le même que l'attribut href. dans l'élément de menu correspondant. <nav></nav>元素作为导航菜单的容器，然后在其中添加了一个<ul></ul>元素作为菜单的列表，并添加了对应的菜单项。接下来，我们使用<section></section>元素来创建每个板块的内容，其中的id属性与菜单项中的href属性相对应。

二、CSS样式

接下来，我们将使用CSS来创建平滑滚动的效果。首先，我们需要在导航菜单上应用一些基本的样式：

.smooth-scroll-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #333;
  padding: 10px 0;
}

.smooth-scroll-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.smooth-scroll-menu li {
  display: inline-block;
  margin-right: 15px;
}

.smooth-scroll-menu li:last-child {
  margin-right: 0;
}

.smooth-scroll-menu a {
  color: #fff;
  text-decoration: none;
  padding: 5px 10px;
}

.smooth-scroll-menu a:hover {
  background-color: #fff;
  color: #333;
}

在上面的代码中，我们向导航菜单容器添加了position: fixed;属性，使其固定在页面的顶部。然后，设置了相应的背景颜色、内边距和字体颜色等样式。接下来，我们使用inline-block布局将菜单项水平显示，并添加了一些间距和悬停效果。

接下来，我们将添加一个平滑滚动的效果。我们将使用CSS的scroll-behavior属性来实现这个效果。在某些情况下，浏览器可能不支持这个属性，所以我们还需要为不支持的浏览器提供一个回退方案。

html {
  scroll-behavior: smooth;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  /* 回退方案：使用jQuery滚动动画 */
  .smooth-scroll-nav a {
    transition: all 0.3s ease-in-out;
  }
  
  .smooth-scroll-nav a[href^="#"] {
    position: relative;
  }
  
  .smooth-scroll-nav a[href^="#"]:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: #fff;
    transition: all 0.3s ease-in-out;
    transform: translateX(-50%);
  }
  
  .smooth-scroll-nav a[href^="#"]:hover:after,
  .smooth-scroll-nav a[href^="#"]:focus:after {
    width: 100%;
  }
}

在上面的代码中，我们首先使用scroll-behavior: smooth;应用平滑滚动的效果。然后，我们使用@media查询来为不支持scroll-behavior属性的浏览器提供一个回退方案。

在回退方案中，我们为菜单项添加了一个过渡效果，使其在鼠标悬停时有一个下划线的效果。我们使用::after伪元素来创建这个下划线，并使用过渡效果来实现动画。通过相应的transition属性，我们实现了下划线的展开和收缩。

三、JavaScript附加功能

如果要在不支持scroll-behavior属性的浏览器中实现平滑滚动的效果，我们还可以使用JavaScript来实现。以下是一个使用jQuery库的示例代码：

$(function() {
  $('a[href^="#"]').on('click', function(e) {
    e.preventDefault();
    var target = $(this.getAttribute('href'));
    if (target.length) {
      $('html, body').stop().animate({
        scrollTop: target.offset().top
      }, 1000);
    }
  });
});

在上面的代码中，我们使用了jQuery的animate函数来实现平滑滚动的效果。当点击一个菜单项时，我们首先阻止了默认的的跳转行为，然后使用offset()函数获取目标元素的位置，并通过animate

2. Style CSS

Ensuite, nous utiliserons CSS pour créer un effet de défilement fluide. Tout d'abord, nous devons appliquer un style de base au menu de navigation : 🎜rrreee🎜 Dans le code ci-dessus, nous avons ajouté l'attribut position:fixed; au conteneur du menu de navigation afin qu'il soit fixé en haut. de la page. Ensuite, définissez la couleur d’arrière-plan, le remplissage, la couleur de la police et d’autres styles correspondants. Ensuite, nous utilisons la disposition inline-block pour afficher les éléments de menu horizontalement et ajouter des effets d'espacement et de survol. 🎜🎜Ensuite, nous ajouterons un effet de défilement fluide. Nous utiliserons la propriété CSS scroll-behavior pour obtenir cet effet. Dans certains cas, les navigateurs peuvent ne pas prendre en charge cet attribut. Nous devons donc également fournir une solution de secours pour les navigateurs qui ne le prennent pas en charge. 🎜rrreee🎜Dans le code ci-dessus, nous appliquons d'abord l'effet de défilement fluide en utilisant scroll-behavior: smooth;. Nous utilisons ensuite la requête @media pour fournir une solution de secours aux navigateurs qui ne prennent pas en charge l'attribut scroll-behavior. 🎜🎜Dans la solution de secours, nous avons ajouté un effet de transition à l'élément de menu afin qu'il ait un effet de soulignement lorsque la souris est survolée. Nous utilisons le pseudo-élément ::after pour créer ce soulignement et utilisons un effet de transition pour l'animer. Grâce à l'attribut transition correspondant, nous réalisons l'expansion et la contraction du soulignement. 🎜🎜3. Fonctions supplémentaires JavaScript🎜🎜Si vous souhaitez obtenir un défilement fluide dans les navigateurs qui ne prennent pas en charge l'attribut scroll-behavior, nous pouvons également utiliser JavaScript pour y parvenir. Voici un exemple de code utilisant la bibliothèque jQuery : 🎜rrreee🎜Dans le code ci-dessus, nous utilisons la fonction animate de jQuery pour obtenir un effet de défilement fluide. Lorsque nous cliquons sur un élément de menu, nous empêchons d'abord le comportement de saut par défaut, puis utilisons la fonction offset() pour obtenir la position de l'élément cible, et implémentons la page via le animate fonction de défilement. 🎜🎜Cela complète la mise en place d'un menu de navigation à défilement fluide basé sur du CSS pur. En utilisant cette méthode, nous pouvons offrir une expérience de navigation fluide pour la page Web et contrôler l'apparence et le comportement de l'ensemble du menu grâce au style CSS. 🎜

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!