To create a responsive navigation bar, the key is to use Flexbox layouts and media queries. 1. Use HTML to build a clear structure, including logo, link list and hamburger buttons; 2. Use Flexbox to implement horizontal arrangement on the desktop; 3. Use media query on the mobile terminal to hide menus and display hamburger buttons, combining JS control to expand and close; 4. Add transition animations to improve the interactive experience and optimize the style details under different devices.

The key to making a responsive navigation bar is to keep the structure clear and easy to operate under different screen sizes. If implemented with CSS, the focus is on the layout method and the use of media queries. The following steps can help you solve a basic but practical responsive navigation bar.

Basic HTML structure

Start with HTML. The structure should be simple and clear. Usually, an unordered list <ul></ul> is wrapped in <nav></nav> and the link items are placed in it:

 <nav class="navbar">
  <div class="logo">MySite</div>
  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Service</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <button class="hamburger">?</button>
</nav>

A .hamburger button is added here to switch menus on the small screen. The HTML part does not need to be too complicated, just have a clear structure.

Desktop style settings

On desktop browsers, the navigation bar is generally arranged horizontally, and you can easily implement it using Flexbox:

 .navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 10%;
}

.nav-links {
  display: flex;
  list-style: none;
}

.nav-links li a {
  margin: 0 1rem;
  text-decoration: none;
}

This allows navigation items to be arranged horizontally and aligned with the logo and buttons. Flexbox is a good helper for layout, and you don’t have to consider too much floating or positioning issues.

Mobile adaptation and hidden menus

When it comes to the phone, the horizontal arrangement is not suitable. At this time, we usually hide the menu, only display the hamburger button, and then click to expand the menu.

 .hamburger {
  display: none;
}

@media (max-width: 768px) {
  .hamburger {
    display: block;
  }

  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: white;
    flex-direction: column;
    display: none;
  }

  .nav-links.active {
    display: flex;
  }
}

Then add a little JS to control the click event:

 document.querySelector('.hamburger').addEventListener('click', () => {
  document.querySelector('.nav-links').classList.toggle('active');
});

In this way, you can switch the menu display status by clicking the button on the small screen.

Animation and detail optimization

To make the interaction more natural, you can add some transition animations to the menu:

 .nav-links {
  transition: max-height 0.3s ease-out;
  max-height: 200px;
}

.nav-links.active {
  max-height: 400px;
}

In addition, you can also adjust the font size, spacing, and background color to make it look more coordinated on different devices. For example, on the mobile terminal, the link can be made larger and easier to click.

Basically that's it. The key to making a responsive navigation bar is media inquiries with clear structure and flexible layout. Although it seems a bit too many, each step is not complicated. Just take it step by step and it is easy to implement a good-looking responsive navigation bar.

The above is the detailed content of How to create a responsive navbar CSS tutorial. For more information, please follow other related articles on the PHP Chinese website!