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

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

Nowadays, with the popularity of mobile devices, responsive design has become the standard of web design. an important factor. In the navigation bar design of web pages, in order to provide a better user experience, it is usually necessary to use drop-down menus to present more navigation options. This article will introduce how to use pure CSS to implement the drop-down menu effect of a responsive navigation bar, with specific code examples.

<li>Create HTML structure
First, we need to create a basic HTML structure, including the container of the navigation bar and the navigation menu. In the navigation menu, we use <ul></ul> and <li> to create menu items, while the drop-down menu uses a <ul></ul> Nested in a <li>.

<nav class="navbar">
  <ul class="nav-menu">
    <li class="nav-item">首页</li>
    <li class="nav-item with-dropdown">
      产品
      <ul class="dropdown">
        <li class="dropdown-item">产品1</li>
        <li class="dropdown-item">产品2</li>
        <li class="dropdown-item">产品3</li>
      </ul>
    </li>
    <li class="nav-item">关于我们</li>
    <li class="nav-item">联系我们</li>
  </ul>
</nav>

<li>Set basic styles
Next, we need to set some basic styles for the navigation bar and menu items. We can use flexbox to arrange menu items horizontally and create gaps between menu items.

.navbar {
  background-color: #f8f8f8;
  padding: 10px;
}

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

.nav-item {
  padding: 10px;
}

.with-dropdown {
  position: relative;
}

.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: white;
  padding: 10px;
}

.dropdown-item {
  padding: 10px;
}

<li>Define the behavior of clicking the drop-down menu
Through CSS pseudo-class:hoverWe can display the drop-down menu when the mouse hovers over the menu item Effect. On mobile devices, we can use JavaScript to add a click event to switch the display and hiding of the drop-down menu.

.with-dropdown:hover .dropdown {
  display: block;
}

var dropdowns = document.querySelectorAll('.with-dropdown');
dropdowns.forEach(function (dropdown) {
  dropdown.addEventListener('click', function () {
    this.classList.toggle('active');
    var dropdownMenu = this.querySelector('.dropdown');
    dropdownMenu.classList.toggle('open');
  });
});

<li>Responsive design
In order to adapt to various screen sizes, we need to adjust the layout of the navigation bar under different viewport widths. Here’s an example of a style for mobile devices where the viewport width is less than 768px, hiding the menu items and using a button to open or close the menu.

@media screen and (max-width: 768px) {
  .nav-menu {
    flex-direction: column;
    align-items: stretch;
  }

  .nav-item {
    display: none;
    padding: 10px;
  }

  .navbar.open .nav-item {
    display: block;
  }

  .navbar-button {
    display: block;
    background-color: #f8f8f8;
    border: none;
    padding: 10px;
    cursor: pointer;
  }
}

<nav class="navbar">
  <button class="navbar-button">菜单</button>

  <ul class="nav-menu">
    <li class="nav-item">首页</li>
    <li class="nav-item with-dropdown">
      产品
      <ul class="dropdown">
        <li class="dropdown-item">产品1</li>
        <li class="dropdown-item">产品2</li>
        <li class="dropdown-item">产品3</li>
      </ul>
    </li>
    <li class="nav-item">关于我们</li>
    <li class="nav-item">联系我们</li>
  </ul>
</nav>

Through the above steps, we successfully implemented the drop-down menu effect of the pure CSS responsive navigation bar. When the screen width is small, menu items are automatically hidden, and buttons can be used to open or close the menu. When you hover over a menu item with a drop-down menu, the drop-down menu automatically appears. This implementation is simple and efficient, does not rely on JavaScript, and is suitable for various web projects. Hope this article is helpful to you!

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