css导航栏响应式折叠按钮如何实现

<nav class="navbar">
  <div class="nav-header">
    <span class="nav-title">网站名称</span>
    <button class="nav-toggle" id="nav-toggle">&#9776;</button>
  </div>
  <ul class="nav-menu" id="nav-menu">
    <li><a href="#">首页</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">联系</a></li>
  </ul>
</nav>

.navbar {
  background: #333;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
<p>.nav-header {
display: flex;
align-items: center;
}</p><p>.nav-title {
color: white;
font-size: 1.5rem;
}</p><p>.nav-toggle {
display: none;
background: none;
border: none;
color: white;
font-size: 1.5rem;
cursor: pointer;
}</p><p>.nav-menu {
list-style: none;
display: flex;
margin: 0;
padding: 0;
}</p><p>.nav-menu li a {
color: white;
text-decoration: none;
padding: 0.5rem 1rem;
}</p><p>/<em> 小屏幕下的响应式处理 </em>/
@media (max-width: 768px) {
.nav-toggle {
display: block; /<em> 显示汉堡按钮 </em>/
}</p><p>.nav-menu {
display: none; /<em> 默认隐藏菜单 </em>/
flex-direction: column;
width: 100%;
margin-top: 1rem;
}</p><p>.nav-menu.active {
display: flex; /<em> 激活时显示 </em>/
}
}</p>

<script>
const toggleButton = document.getElementById('nav-toggle');
const navMenu = document.getElementById('nav-menu');
<p>toggleButton.addEventListener('click', function () {
navMenu.classList.toggle('active');
});
</script></p>

.nav-menu {
  transition: max-height 0.3s ease;
  overflow: hidden;
}
<p>.nav-menu.active {
display: flex;
flex-direction: column;
}</p>