CSS定位如何制作响应式导航栏_absolute结合media queries

<nav class="navbar">
  <div class="logo">Logo</div>
  <ul class="nav-links">
    <li><a href="#">首页</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">联系</a></li>
  </ul>
</nav>

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

@media (max-width: 768px) {
  .nav-links {
    position: absolute;
    top: 100%;
    right: -100%; /* 初始隐藏在右侧 */
    flex-direction: column;
    background-color: #444;
    width: 200px;
    height: calc(100vh - 60px);
    padding: 1rem 0;
    transition: right 0.3s ease;
    z-index: 1000;
  }
<p>.nav-links.active {
right: 0; /<em> 显示菜单 </em>/
}</p><p>.nav-links li {
text-align: center;
margin: 1rem 0;
}
}</p>

<button class="menu-toggle">☰</button>

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