使用topnav和事件监听器调整桌面显示以实现响应站点导航

<nav class="topnav">
  <a href="#home">首页</a>
  <a href="#about">关于</a>
  <a href="#services">服务</a>
  <a href="#contact">联系我们</a>
</nav>

.topnav {
  background-color: #333;
  overflow: hidden;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

window.addEventListener('resize', function() {
  var topnav = document.querySelector('.topnav');
  if (window.innerWidth < 768) {
    topnav.style.display = 'block';
  } else {
    topnav.style.display = 'none';
  }
});

function toggleNav() {
  var topnav = document.querySelector('.topnav');
  if (topnav.style.display === 'none') {
    topnav.style.display = 'block';
  } else {
    topnav.style.display = 'none';
  }
}

<button class="toggle-btn" onclick="toggleNav()">菜单</button>

.toggle-btn {
  display: none;
  background-color: #333;
  color: #f2f2f2;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

@media screen and (max-width: 767px) {
  .topnav a:not(:first-child) {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
  .toggle-btn {
    display: block;
  }
}