Steps to implement the drop-down tab effect of responsive navigation bar using pure CSS

Steps to implement the drop-down tab effect of the responsive navigation bar using pure CSS

The navigation bar is a common element in web design, and using responsive design can make it The navigation bar displays and operates well on different screen sizes. In this article, we will introduce how to use pure CSS to implement a responsive navigation bar with a drop-down tab effect.

Step 1: Prepare HTML structure
First, we need to prepare a basic HTML structure. The navigation bar usually uses an unordered list (<ul></ul>), and each navigation item is wrapped with a list item (<li>). Drop-down tabs require adding a nested unordered list inside the list item.

<nav class="navbar">
  <ul class="nav-list">
    <li><a href="#">首页</a></li>
    <li>
      <a href="#">产品</a>
      <ul class="dropdown">
        <li><a href="#">产品1</a></li>
        <li><a href="#">产品2</a></li>
        <li><a href="#">产品3</a></li>
      </ul>
    </li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

Step 2: Set the basic style
In order to achieve a responsive effect, we need to use CSS media queries to set the display mode of the navigation bar under different screen sizes. At the same time, you also need to set the basic styles of the navigation bar and drop-down tabs.

.navbar {
  background-color: #333;
  height: 50px;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-list li {
  position: relative;
}

.nav-list li a {
  color: #fff;
  text-decoration: none;
  padding: 0 10px;
  line-height: 50px;
}

.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #333;
  width: 100%;
}

.dropdown li {
  width: 100%;
}

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

Step 3: Set responsive style
In the media query, we can set the display mode of the navigation bar according to different screen sizes. When the screen width is small, we can use horizontal scroll bars to display navigation options. When the screen width is larger, we can use drop-down tabs to display.

@media screen and (max-width: 768px) {
  .nav-list {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .nav-list li {
    white-space: nowrap;
  }
  
  .nav-list li a {
    display: inline-block;
  }
  
  .dropdown {
    display: none;
  }
}

@media screen and (min-width: 769px) {
  .nav-list li:hover .dropdown {
    display: block;
  }
}

Through the above three steps, we can implement a responsive navigation bar with a drop-down tab effect. On smaller screens, navigation options will scroll horizontally, while on larger screens, drop-down tabs will appear by hovering over a navigation item.

Such a navigation bar design is not only powerful, but also has a good user experience, allowing users to easily browse and operate web pages on different devices. Through the flexible use of CSS media queries, we can achieve dynamic effects of more elements in responsive design.

The above is the detailed content of Steps to implement the drop-down tab effect of responsive navigation bar using pure CSS. For more information, please follow other related articles on the PHP Chinese website!