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

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

With the popularity of mobile devices, responsive design has become more and more important. The navigation bar is a very important part of the website. This article will introduce how to use pure CSS to implement a drop-down submenu effect in a responsive navigation bar, so that the website can have a good user experience in different screen sizes.

Step 1: HTML structure
First, we need to build a basic HTML structure. Navigation bars are usually created using unordered lists ul and list items li.

<nav class="navbar">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a href="#" class="nav-link">首页</a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">产品</a>
      <ul class="sub-menu">
        <li><a href="#">产品一</a></li>
        <li><a href="#">产品二</a></li>
        <li><a href="#">产品三</a></li>
      </ul>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">关于我们</a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">联系我们</a>
    </li>
  </ul>
</nav>

Step 2: CSS style
Next, we need to use CSS to add styles, including setting the background color of the navigation bar, font style, and display and hiding of submenus, etc.

.navbar {
  background-color: #333;
  height: 60px;
  padding: 0 20px;
}

.navbar-nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

.nav-item {
  position: relative;
}

.nav-link {
  color: #fff;
  text-decoration: none;
  padding: 10px;
}

.sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #333;
  list-style-type: none;
  width: 200px;
  padding: 0;
  margin: 0;
}

.nav-item:hover .sub-menu {
  display: block;
}

.sub-menu li {
  padding: 10px;
}

.sub-menu li a {
  color: #fff;
  text-decoration: none;
}

Step 3: Responsive Design
In order to adapt to different screen sizes, we need to add some media query CSS styles. Below is a simple example that only covers one case, if more responsive styles are needed you can add them based on your specific requirements.

@media screen and (max-width: 768px) {
  .navbar-nav {
    flex-wrap: wrap;
  }
  
  .nav-link {
    padding: 10px 0;
  }
  
  .sub-menu {
    position: static;
    display: block;
    background-color: transparent;
    width: 100%;
  }
  
  .sub-menu li {
    padding: 10px;
    border-top: 1px solid #fff;
  }
}

Summary:
Through the above steps, we can achieve a simple responsive navigation bar drop-down submenu effect. On large screens, the submenu is displayed through the CSS hover state; on small screens, the submenu will be displayed as an independent block-level element, with some additional styles added to adapt to different screen sizes.

It should be noted that this is just a basic example, and more styles and functions may be needed in actual projects to meet needs. But through this example, you can learn how to use pure CSS to implement a responsive navigation bar drop-down submenu effect, and it can be expanded and adjusted according to specific needs.

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