<n* class="n*bar">
  <div class="n*-toggle" id="mobile-menu">
    <span></span>
    <span></span>
    <span></span>
  </div>
  <ul class="n*-menu">
    <li><a href="#">首页</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">联系</a></li>
  </ul>
</n*>

.n*bar {
  background: #333;
  padding: 1rem;
}
<p>.n*-menu {
list-style: none;
display: flex;
margin: 0;
padding: 0;
}</p><p>.n*-menu li {
margin: 0 1rem;
}</p><p>.n*-menu a {
color: white;
text-decoration: none;
}</p><p>.n*-toggle {
display: none; /<em> 桌面端隐藏 </em>/
}</p>

@media (max-width: 768px) {
  .n*-toggle {
    display: block; /* 显示汉堡按钮 */
    cursor: pointer;
  }
<p>.n*-toggle span {
width: 25px;
height: 3px;
background: white;
margin: 5px 0;
display: block;
transition: 0.3s;
}</p><p>.n*-menu {
display: none; /<em> 默认隐藏菜单 </em>/
flex-direction: column;
background: #444;
width: 100%;
text-align: center;
margin-top: 1rem;
}</p><p>.n*-menu.active {
display: flex; /<em> 激活时显示 </em>/
}
}</p>

const mobileMenu = document.getElementById('mobile-menu');
const n*Menu = document.querySelector('.n*-menu');
<p>mobileMenu.addEventListener('click', () => {
n*Menu.classList.toggle('active');
});</p>

@media (max-width: 768px) {
  .n*-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
<p>.n*-menu.active {
max-height: 300px; /<em> 足够容纳所有菜单项 </em>/
display: flex; /<em> 仍需 display 控制布局 </em>/
}
}</p>