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

的方法如下：

首先，创建一个包含导航链接的HTML页面。使用HTML的<nav>元素创建一个顶部导航栏（topnav），并在其中添加链接元素<a>作为导航项。例如：

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

使用CSS样式表为导航栏添加样式，使其在桌面显示上呈现出合适的样式。例如：

.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;
}

使用JavaScript添加事件监听器，以便在不同屏幕尺寸下调整导航栏的显示方式。例如：

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';
  }
}

在HTML页面中添加一个按钮或图标，用于触发导航栏的显示和隐藏。例如：

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

最后，使用CSS样式表为按钮添加样式，并将其放置在合适的位置。例如：

.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;
  }
}

通过以上步骤，我们实现了一个响应式站点导航。在桌面显示上，导航栏会水平显示，并且可以通过点击按钮来显示或隐藏导航栏。在移动设备上，导航栏会垂直显示，并且默认情况下是隐藏的，通过点击按钮来显示或隐藏导航栏。

腾讯云相关产品和产品介绍链接地址：