如何在单击汉堡图标时使导航栏链接垂直显示在导航栏下方

在单击汉堡图标时使导航栏链接垂直显示在导航栏下方，可以通过以下步骤实现：

HTML 结构：在 HTML 中创建一个导航栏容器（通常使用 <nav> 元素），并包含一个汉堡图标按钮和一个链接列表。

<nav>
  <div class="hamburger-icon"></div>
  <ul class="nav-links">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
  </ul>
</nav>

CSS 样式：使用 CSS 样式来控制导航栏的外观和行为。

/* 导航栏容器样式 */
nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 汉堡图标样式 */
.hamburger-icon {
  width: 30px;
  height: 20px;
  background-color: #333;
  cursor: pointer;
}

/* 链接列表样式 */
.nav-links {
  display: none; /* 初始状态隐藏链接列表 */
  flex-direction: column;
  align-items: flex-start;
}

.nav-links li {
  padding: 10px;
}

/* 媒体查询，控制在特定宽度下显示/隐藏链接列表 */
@media (max-width: 768px) {
  .nav-links {
    display: flex;
  }
}

JavaScript 交互：使用 JavaScript 在汉堡图标被单击时切换链接列表的显示/隐藏状态。

const hamburgerIcon = document.querySelector('.hamburger-icon');
const navLinks = document.querySelector('.nav-links');

hamburgerIcon.addEventListener('click', () => {
  navLinks.classList.toggle('show'); // 切换链接列表的显示/隐藏状态
});

完成上述步骤后，当用户单击汉堡图标时，链接列表将垂直显示在导航栏下方。通过适当的 CSS 样式和 JavaScript 交互，可以实现更多导航栏的自定义效果。

关于腾讯云相关产品和产品介绍链接，由于不得提及具体品牌商，无法给出具体链接地址，请在腾讯云官方网站上搜索相关产品，以获取详细信息。