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 :
Section 1
This is the content of section 1.
Section 2
This is the content of section 2.
Section 3
This is the content of section 3.
Section 4
This is the content of section 4.
Dans l'exemple ci-dessus, nous avons créé un élémenten tant que conteneur pour le menu de navigation, puis avons ajouté unpour créer le contenu de chaque section, où l'attributidest le même que l'attributhref. dans l'élément de menu correspondant.元素作为导航菜单的容器，然后在其中添加了一个元素来创建每个板块的内容，其中的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
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-blockpour 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-behaviorpour 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. rrreeeDans 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
@mediapour 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
::afterpour créer ce soulignement et utilisons un effet de transition pour l'animer. Grâce à l'attribut
transitioncorrespondant, nous réalisons l'expansion et la contraction du soulignement. 3. Fonctions supplémentaires JavaScriptSi 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 : rrreeeDans le code ci-dessus, nous utilisons la fonction
animatede 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
animatefonction 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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
