How to implement a smooth scrolling navigation menu on a web page through pure CSS-CSS Tutorial-php.cn

How to implement a smooth scrolling navigation menu on a web page through pure CSS

Guiding users to navigate in a web page is an important design element, and the smooth scrolling navigation menu is provided A way to create a user-friendly navigation experience. This article will introduce how to implement such a navigation menu through pure CSS and provide corresponding code examples.

1. HTML structure

First, we need to create the basic structure of the navigation menu in HTML. Here is a simple example:

  Section 1
 Section 2
 Section 3
 Section 4
 
 
  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.

Copy after login

In the above example, we created a

element as a container for the navigation menu and then added ainside it. The

element to create the content for each section, where theidattribute corresponds to thehrefattribute in the menu item.

2. CSS Style

Next, we will use CSS to create a smooth scrolling effect. First, we need to apply some basic styles on the navigation menu:

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

Copy after login

In the above code, we added theposition: fixed;attribute to the navigation menu container to make it fixed. top of the page. Then, set the corresponding background color, padding, font color and other styles. Next, we use theinline-blocklayout to display the menu items horizontally and add some spacing and hover effects.

Next, we will add a smooth scrolling effect. We will use thescroll-behaviorproperty of CSS to achieve this effect. In some cases, browsers may not support this attribute, so we also need to provide a fallback solution for browsers that do not support it.

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

Copy after login

In the above code, we first usescroll-behavior: smooth;to apply the smooth scrolling effect. We then use the@mediaquery to provide a fallback for browsers that do not support thescroll-behaviorattribute.

In the fallback solution, we add a transition effect to the menu item so that it has an underline effect when the mouse is hovered. We use the::afterpseudo-element to create this underline and use a transition effect to animate it. Through the correspondingtransitionattributes, we realize the expansion and contraction of the underline.

3. JavaScript additional functions

If you want to achieve smooth scrolling in browsers that do not support thescroll-behaviorattribute, we can also use JavaScript to achieve it. The following is a sample code using the jQuery library:

$(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); } }); });

Copy after login

In the above code, we use jQuery’sanimatefunction to achieve a smooth scrolling effect. When a menu item is clicked, we first prevent the default jump behavior, then use theoffset()function to obtain the position of the target element, and implement the page scrolling through theanimatefunction .

This completes the implementation of a smooth scrolling navigation menu based on pure CSS. Using this method, we can provide a smooth navigation experience for the web page and control the appearance and behavior of the entire menu through CSS styles.

The above is the detailed content of How to implement a smooth scrolling navigation menu on a web page through pure CSS. For more information, please follow other related articles on the PHP Chinese website!