Navigation bar settings css

As a web developer, many times we need to design a beautiful and practical page navigation bar. In HTML, you can use the <ul></ul> and <li> tags to create a basic navigation bar, but if you want to add some style and interactive effects, we need to use CSS to complete.

This article will introduce how to use CSS to design navigation bars, from simple styles to complex effects, step by step.

Basic Style

First, let’s create a simple navigation bar. In the HTML code, we use <ul></ul> and <li> tags to create an unordered list, and then use CSS to set attributes such as list style, size, and color, As follows:

<ul class="nav">
  <li><a href="#">首页</a></li>
  <li><a href="#">关于</a></li>
  <li><a href="#">服务</a></li>
  <li><a href="#">联系我们</a></li>
</ul>

.nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  background-color: #333;
}

.nav li {
  margin: 0;
}

.nav a {
  display: block;
  padding: 10px 15px;
  color: #fff;
  text-decoration: none;
}

Through the above style settings, we have got a simple navigation bar, as shown below:

Hover effect

Next, we can add a simple and practical hover effect, so that when the mouse pointer hovers over the navigation bar, the user's visual effect can be enhanced by changing attributes such as background color and text color. We can achieve this by setting the :hover pseudo-class, as follows:

.nav a:hover {
  background-color: #555;
  color: #fff;
}

The above code means that when the user hovers the mouse pointer on the navigation link, the background color of the link will change to #555, and the text will become White. The completed effect is as follows:

Underline effect

The next effect to be achieved is that when the user hovers over the navigation bar link, the link appears below the link. An underline effect. This is a relatively common effect, which allows users to know more clearly which navigation link they are currently selecting.

We can achieve this by adding a pseudo element: before below the link. When the user hovers over the link, the pseudo-element will be displayed and increase the length of the bottom border. The code is as follows:

.nav a:hover:before {
  content:'';
  display: block;
  border-bottom: 4px solid #fff;
  transform: scaleX(0);
  transition: transform .3s ease-in-out;
}

.nav a:hover:before {
  transform: scaleX(1);
}

The above code indicates that when the mouse pointer hovers over the navigation link, the pseudo element will be displayed, and the animation effects such as translation, rotation, and scaling of the element will be set through the transform attribute. The completed effect is as follows:

Sliding effect

The next effect to be achieved is that when the user selects the navigation link, a sliding indicator appears below the navigation bar device effect. This effect can make it clearer for users to know where the navigation link they choose is.

We can do this by creating an indicator container and an indicator child element. When the user selects a navigation link, the indicator slides from one position to another. The code is as follows:

<ul class="nav">
  <li><a href="#">首页</a></li>
  <li><a href="#">关于</a></li>
  <li><a href="#">服务</a></li>
  <li><a href="#">联系我们</a></li>
  <div class="indicator"></div>
</ul>

.indicator {
  height: 4px;
  background-color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: all .3s ease-in-out;
}

.nav li:first-child .indicator {
  width: 80px;
  transform: translateX(0);
}

.nav li:nth-child(2) .indicator {
  width: 70px;
  transform: translateX(80px);
}

.nav li:nth-child(3) .indicator {
  width: 60px;
  transform: translateX(150px);
}

.nav li:last-child .indicator {
  width: 110px;
  transform: translateX(210px);
}

.nav a:hover + .indicator {
  width: 100%;
  transform: translateX(0);
}

The above code means that when the user selects a navigation link, the corresponding indicator will slide below the link. By setting the width and response offset of the indicators corresponding to different links, we can achieve different sliding effects. The completed effect is as follows:

Summary

This article introduces how to use CSS to create different types of navigation bars, including basic styles, hover effects, Underline effects and sliding effects, etc. These effects can enhance the user's interactive experience and make the page more beautiful and easier to use. Through continuous learning and practice, we can continuously improve and improve the design and effect of the page to bring a better experience to users.

The above is the detailed content of Navigation bar settings css. For more information, please follow other related articles on the PHP Chinese website!