How to fix navigation bar in css

In CSS, you can use the position attribute to fix the navigation bar; you only need to add the "position: fixed;" style to the navigation bar element for fixed positioning. Fixed positioning will cause the element to be fixed at a certain position in the window, and will not move even if the window is scrolled, and will not affect other elements of the window.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

How to fix the navigation bar in css:

1. HTML part:

Create a ul tag for making no For the sequence list, because the page jump effect is needed, an a tag must be inserted into the li tag, and the navigation content must be written 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>

2. CSS part:

The basic framework has been established It’s out. 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 when the mouse passes the navigation. Appears red, when navigation is activated, appears yellow.

The most important step is to fix the navigation bar at the top of the page. We use the position: fixed attribute to generate a fixed positioning element and position it relative to the browser window. Then set its distance from the top to 0 (i.e. top: 0), so that the navigation fixed at the top is ready. The detailed code is as follows:

<style type="text/css">
    *{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;
   }
</style>

Let’s take a look at the actual effect:

After sliding the mouse:

The navigation bar is fixed. The most critical step is to use position and place it. Its attribute value is set to fixed. For example, the distance top from the top is set to 0.

For more programming related knowledge, please visit: Programming Video! !

The above is the detailed content of How to fix navigation bar in css. For more information, please follow other related articles on the PHP Chinese website!