How to fix the navigation bar at the top of the page (detailed explanation with pictures and text)

Have you noticed when browsing the website that almost every website has a navigation bar, and some navigations can be fixed at the top. No matter where the scroll bar moves, it will be fixed in one position. Do you know that the navigation bar is fixed at the top? How to write it? This article will tell you how to fix the navigation bar at the top and the code to fix the navigation bar at the top. It has certain reference value and interested friends can take a look.

To achieve fixing the navigation bar at the top requires the use of many properties in CSS, such as float, position, list-style-type attributes, etc. If you are unclear, you can refer to the PHP Chinese website Related articles, or visit CSS video tutorial, I hope it can help you.

Detailed example: Use html and css to fix the navigation bar at the top

HTML part:

Create a ul tag to make an unordered list because page jumps are required For the best effect, you also need to insert an a tag into the li tag and write the navigation content into the a tag. Finally, create a div and set the div height to 1500px. When sliding the scroll bar, it is convenient to observe the position of the navigation bar. The specific code is as follows

<ul>
   <li><a class="active" href="#home">首页</a></li>
   <li><a href="#news">新闻动态</a></li>
   <li><a href="#contact">联系我们</a></li>
   <li><a href="#about">关于我们</a></li>
</ul>   
<div style="background-color:pink;height:1500px;"></div>

CSS part:

The basic framework has been built , now use CSS to beautify the page, use float: left to float the left side of the unordered list and arrange it in a row, use Padding to adjust the spacing between navigations, use the hover pseudo-class selector to set the mouse hover effect, and it will appear red when the mouse passes the navigation , appears yellow when navigation is activated. The most important step is to fix the navigation bar at the top of the page. We use the position: fixed attribute, and then set its distance from the top to 0 (i.e. top: 0), so that the navigation bar is fixed at the top. Details The code is as follows:

*{margin:0;padding: 0;}
   ul{
       list-style-type: none;
       overflow: hidden;
       background-color: #333;
       position: fixed;
       top: 0;
       width: 100%;
   }  
   li {
       float: left;
   }   
   li a {
       display: block;
       color: white;
       text-align: center;
       padding: 14px 16px;
       text-decoration: none;
   }   
   li a:hover:not(.active) {
       background-color: red;
   }   
   .active {
       background-color: yellow;
   }

Rendering:

As can be seen from the picture, when the scroll bar slides down, the position of the navigation bar does not change and remains fixed. At the top, the most critical step to achieve the effect of fixing the navigation bar at the top is to use position and set its attribute value to fixed. For example, set the distance top to 0.

The above introduces you to the implementation method of fixing the navigation bar at the top, which is more detailed. Friends who are new to the front-end must try it by themselves to see if they can achieve a cooler effect. I hope this This article will help you!

For more related video tutorials, please visit CSS3 Video Tutorial

The above is the detailed content of How to fix the navigation bar at the top of the page (detailed explanation with pictures and text). For more information, please follow other related articles on the PHP Chinese website!