Step Navigation CSS: Make web navigation more concise and clear

In today's Internet era, page navigation has become an indispensable part of web design. Step navigation is a navigation method that divides page content into multiple steps and provides users with clear guidance. It not only allows users to better understand the page structure, but also improves user operation fluency and reduces user operation difficulty. In this article, we will discuss the front-end implementation of step navigation - CSS-based step navigation.

1. Background

Step navigation is a navigation method that divides page content into multiple steps and provides clear guidance to users. This navigation method is usually used to guide users through a series of complex operations. Scenarios that often appear in Internet applications, such as registration process, order process, payment process, etc.

Let users clearly know which step they are now and what the next step is, which is the most important function of step navigation. If users clearly recognize which step of the process they are in, they will have a better understanding of what that step does and how it relates to other steps, and can confirm it before proceeding to the next step.

To achieve this goal, developers usually display step navigation in the header or sidebar of the page. And provide a selectable button for each step to prompt the user that the step is in progress or has been completed.

2. Front-end implementation - CSS-based step navigation

In CSS, this style can be used to implement a complete step navigation. In this section, we will learn how to use HTML and CSS to create CSS-based step navigation.

1. HTML

When creating HTML code, you can use the following basic structure:

<div class="steps-navigation">
  <ul>
    <li class="active">
      <div class="step">
        <span>步骤1</span>
      </div>
    </li>
    <li>
      <div class="step">
        <span>步骤2</span>
      </div>
    </li>
    <li>
      <div class="step">
        <span>步骤3</span>
      </div>
    </li>
    <li>
      <div class="step">
        <span>步骤4</span>
      </div>
    </li>
  </ul>
</div>

In this code snippet, we create a Step navigation in labels. In li, each step is shown with a name called "step x". Among them, x represents the number of step. We also created a div called "step" with a span nested inside it to hold the step name.

2. CSS

In CSS, you can use the following styles to create a beautiful step navigation.

.steps-navigation {
  margin: 0;
  padding: 0;
}
.steps-navigation ul {
  list-style-type: none;
  display: table;
  table-layout: fixed;
  width: 100%;
  margin: 0 auto;
}
.steps-navigation ul li {
  display: table-cell;
  text-align: center;
  position: relative;
}
.steps-navigation ul li .step {
  display: block;
  position: relative;
  z-index: 1;
  width: 60px;
  height: 60px;
  line-height: 60px;
  font-size: 16px;
  border: 3px solid #999;
  border-radius: 50%;
  background-color: #fff;
  margin: 30px auto;
  cursor: pointer;
  -webkit-transition: color 0.2s, border-color 0.2s, background-color 0.2s;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
.steps-navigation ul li.active .step {
  color: #fff;
  background-color: #00bcd4;
  border-color: #00bcd4;
}
.steps-navigation ul li:before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #ccc;
}
.steps-navigation ul li:last-child:before {
  display: none;
}
.steps-navigation ul li.active~li:before {
  background-color: #00bcd4;
}
.steps-navigation ul li:first-child .step {
  margin-left: 0;
}
.steps-navigation ul li:last-child .step {
  margin-right: 0;
}

The above code contains many styles, each with a specific purpose. This is part of understanding CSS step navigation.

3. Style explanation

Here, we explain the styles one by one.

.steps-navigation {
  margin: 0;
  padding: 0;
}

The function of this part is to set the outer margin and inner margin of the step navigation.

.steps-navigation ul {
  list-style-type: none;
  display: table;
  table-layout: fixed;
  width: 100%;
  margin: 0 auto;
}

The function of this part is to set the compatibility between step navigation and outer ul elements.

.steps-navigation ul li {
  display: table-cell;
  text-align: center;
  position: relative;
}

The function of this part is to set the li element contained in each step. It uses the display:table-cell style to make the li element an inline element.

.steps-navigation ul li .step {
  display: block;
  position: relative;
  z-index: 1;
  width: 60px;
  height: 60px;
  line-height: 60px;
  font-size: 16px;
  border: 3px solid #999;
  border-radius: 50%;
  background-color: #fff;
  margin: 30px auto;
  cursor: pointer;
  -webkit-transition: color 0.2s, border-color 0.2s, background-color 0.2s;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}

The function of this part is to set the "step x" and "span" elements in each step. It uses many styles to set its properties, including element width, height, border, background, and more.

.steps-navigation ul li.active .step {
  color: #fff;
  background-color: #00bcd4;
  border-color: #00bcd4;
}

The function of this part is to set the style of the selected step. When the step is active (i.e. the current step), the background color, font color, etc. will also change.

.steps-navigation ul li:before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #ccc;
}

The function of this part is to add horizontal dividing lines for each step.

.steps-navigation ul li.active~li:before {
  background-color: #00bcd4;
}

The function of this part is to modify the background color of its leading horizontal dividing line when the step is active (that is, the current step).

4. Summary

In this article, we discussed the use of CSS to create a front-end implementation of step navigation. Step navigation is a navigation method commonly used in Internet applications. It allows users to better understand the page structure, improve operational fluency, and reduce operational difficulty. By using the above technologies, we can create a smooth user interface for our website or application and improve user experience. Based on CSS step navigation, we can further extend the implementation, such as using JavaScript to add animation or interactive effects. I believe this will be a good choice for your web navigation design!

The above is the detailed content of Step Navigation CSS: Make web navigation more concise and clear. For more information, please follow other related articles on the PHP Chinese website!