CSS响应式导航栏实现教程

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  padding: 1rem;
}
.logo {
color: white;
font-size: 1.5rem;
}
.nav-links {
list-style: none;
display: flex;
gap: 2rem;
}
.nav-links a {
color: white;
text-decoration: none;
}

@media (max-width: 768px) {
  .nav-links {
    position: absolute;
    top: 70px;
    right: 0;
    width: 100%;
    height: calc(100vh - 70px);
    background: #333;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: translateX(100%);
    transition: transform 0.3s ease-in;
  }
.nav-links.active {
transform: translateX(0);
}
.burger {
display: block;
cursor: pointer;
}
.burger span {
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
background: #fff;
transition: all 0.3s ease;
}
}

document.querySelector('.burger').addEventListener('click', function() {
  document.querySelector('.nav-links').classList.toggle('active');
});