时间戳

首页 > 解决方案 > 将图标栏与 HTML 中的下拉菜单结合起来？

html - 将图标栏与 HTML 中的下拉菜单结合起来？

问题描述

我正在尝试在我的页面上添加一个栏，但由于我对 HTML 的了解很少，我在实现我的想法时遇到了很多问题。
基本上，我找到了这个链接，它解释了如何拥有一个图标栏。但我想将它与此链接上显示的下拉选项结合起来。是否可以将两者结合起来？目标是如果我按下某个图标，应该会出现一个下拉菜单。

标签： html

解决方案

好吧，为了做你所描述的，你有两个选择。第一个选项是使用 CSS 做一些技巧。有一种叫做“checkbox hack”的东西，但对于初学者来说一点也不简单。第二个更直接，涉及 JavaScript。

我会把我的代码贴在这里，这样你就可以看到我做了什么。

const projectsTab = document.getElementById('projects')
const tabName = projectsTab.querySelector('.tab-name')
const projectLinks = document.querySelector('.project-links')

projectsTab.addEventListener('click', e => {
  const isOpen = projectLinks.classList.contains('open')

  if (isOpen) projectLinks.classList.remove('open')
  else projectLinks.classList.add('open')
})

// link event listeners
const links = [...projectLinks.children] // turn this into an array

links.forEach(link => link.addEventListener('click', e => {
  tabName.innerText = link.innerText
}))
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', sans-serif;
}

nav {
  position: fixed;
  width: 100%;
  height: 50px;
  background: #222;
  top: 0;
  left: 0;
  color: white;
  display: flex;
}

nav>* {
  flex: 1;
}

#logo {
  padding-left: 20px;
  font-size: 30px;
  text-transform: uppercase;
  letter-spacing: 2px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

nav ul {
  display: flex;
  list-style: none;
  height: 100%;
}

nav ul li {
  position: relative;
  flex: 1;
  background: #222;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: 0.2s;
}

nav ul li:hover {
  background: #555;
}

.project-links {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  left: 0;
  top: 100%;
  width: 100%;
  background-color: white;
  color: black;
  /* This is the height of this div + height of the nav bar */
  transform: translateY(-135%);
  transition: 0.2s;
  z-index: -1;
}

.project-links.open {
  transform: translateY(0);
}

.project-link {
  height: 50px;
  display: flex;
  align-items: center;
  padding-left: 20px;
  text-decoration: none;
  color: white;
  cursor: pointer;
  transition: 0.2s;
  background: #222;
  color: white;
}

.project-link:hover {
  background: #555;
}
<nav>
  <div id="logo">Logo</div>
  <ul>
    <li>About</li>
    <li id="projects">
      <span class="tab-name">Projects</span>
      <div class="project-links">
        <a class="project-link" href="#">Link 1</a>
        <a class="project-link" href="#">Link 2</a>
        <a class="project-link" href="#">Link 3</a>
      </div>
    </li>
    <li>Contact</li>
  </ul>
</nav>

单击Projects选项卡以查看此代码的运行情况。顺便说一句，我知道这没有“图标”，但这并没有什么区别。您可以用您想要的任何图标替换任何文本。

推荐阅读