Implement responsive navigation menu using CSS

Using CSS to implement responsive navigation menu

With the popularity of mobile devices, more and more websites need to adapt to different screen sizes to provide better users experience. On mobile devices, due to limited screen space, traditional horizontal navigation menus may not be fully displayed on small screens or cause users to continuously swipe the screen to view the complete menu items. Therefore, responsive navigation menus are becoming more and more popular.

This article will introduce how to use CSS to implement a simple responsive navigation menu and provide specific code examples.

First, create a basic navigation menu structure in an HTML file. Here is a simple example:

<nav class="navbar">
  <a href="#" class="navbar-brand">Logo</a>
  <ul class="navbar-menu">
    <li class="menu-item"><a href="#">Home</a></li>
    <li class="menu-item"><a href="#">About</a></li>
    <li class="menu-item"><a href="#">Products</a></li>
    <li class="menu-item"><a href="#">Contact</a></li>
  </ul>
</nav>

In the CSS file, we need to add some styles to make the navigation menu responsive.

First, add basic styling to the navigation menu so that it looks like a horizontal navigation bar:

.navbar {
  background-color: #333;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

.navbar-brand {
  color: #fff;
  font-size: 20px;
  text-decoration: none;
}

.navbar-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-item {
  margin-left: 10px;
}

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

Then, we need to add responsive styling for small screen sizes.

On small screens, we want the navigation menu to become a vertical drop-down menu. We can use CSS media queries to achieve this effect.

@media (max-width: 600px) {
  .navbar-menu {
    display: none;
  }

  .menu-item {
    display: block;
    margin: 10px 0;
  }

  .menu-item a {
    display: block;
    padding: 10px;
    background-color: #333;
  }

  .navbar-toggle {
    display: block;
    color: #fff;
    font-size: 20px;
    text-decoration: none;
    cursor: pointer;
  }

  .navbar-collapse {
    display: none;
    background-color: #333;
    padding: 10px;
  }

  .navbar-collapse.active {
    display: block;
  }
}

In the above code, @media (max-width: 600px) means that these styles are applied when the screen width is less than or equal to 600px.

We will hide the original navigation menu .navbar-menu and display each menu item .menu-item as a block level element and add some styles to make it look like a drop-down menu.

In addition, we also added a .navbar-toggle element as the button that triggers the menu, and created a .navbar-collapse element to accommodate the drop-down menu. By adding the .active class to .navbar-collapse, we can control its display and hiding.

Finally, add some interactive effects in JavaScript. We will use a simple event handler to toggle the display and hiding of .navbar-collapse.

document.querySelector('.navbar-toggle').addEventListener('click', function() {
  document.querySelector('.navbar-collapse').classList.toggle('active');
});

Now, when .navbar-toggle is clicked, we can toggle the display and hiding of .navbar-collapse.

The above are the basic steps and sample code for implementing a responsive navigation menu using CSS. You can apply these sample codes to your own website and adjust and extend them as needed. Hope this article helps you!

The above is the detailed content of Implement responsive navigation menu using CSS. For more information, please follow other related articles on the PHP Chinese website!