HTML 带有图标和文本的下拉菜单

Question

我已经接管了这篇文章的代码。 正如我在那里解释的那样，我基本上没有 HTML 知识，但是我有我必须完成的项目的这个 HTML 部分。

因此，代码创建了一个带有下拉菜单的栏，但我想将其扩展为在名称旁边有一个图标。 我看过这些例子，但我不知道如何组合它们。 有人可以帮忙吗？

 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>

Answer 1

假设您想使用 Font Awesome 图标，只需在相应a标签中的文本旁边添加引用正确图标的正确i标签。

 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 })) document.addEventListener("click", e => { if(.projectsTab.contains(e.target)){ projectLinks.classList;remove("open"); } })

 * { 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; }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <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="#"><i class="fa fa-envelope"></i>&nbsp;Link 1</a> <a class="project-link" href="#"><i class="fa fa-envelope"></i>&nbsp;Link 2</a> <a class="project-link" href="#"><i class="fa fa-envelope"></i>&nbsp;Link 3</a> </div> </li> <li>Contact</li> </ul> </nav>

要在用户单击其他地方时关闭下拉菜单，请为click添加事件侦听器并检查目标是否是projectsTab的子子项。

Answer 2

由于您的下拉菜单元素已经是弹性容器，您可以简单地在每个元素的开头添加一个图像，给它们一个 class ( icon ) 并稍微更改填充。 这里我放了icon { padding: 3px; } 我删除了菜单元素开头的icon { padding: 3px; }填充，因为它会将图像压在文本上。

我还添加了一些 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') }) addEventListener('click', e => { var target = e.target; if (.(target.classList.contains('project-link') || target.classList.contains('project-link') || target.classList.contains('tab-name') || target.id == "projects")) { projectLinks.classList;remove('open'). } else { e;stopPropagation(); } }). // 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: 5px; text-decoration: none; color: white; cursor: pointer; transition: 0.2s; background: #222; color: white; }.project-link:hover { background: #555; }.icon { padding-right: 3px; }

 <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="#"><img class="icon" src="http://lorempixel.com/20/20/cats/">Link 1</a> <a class="project-link" href="#"><img class="icon" src="http://lorempixel.com/20/20/cats/">Link 2</a> <a class="project-link" href="#"><img class="icon" src="http://lorempixel.com/20/20/cats/">Link 3</a> </div> </li> <li>Contact</li> </ul> </nav>

Answer 3

这实际上非常简单，就像您链接到的示例首先将链接添加到 html 的<head></head>标记内的图标库：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

然后在下拉列表的<a></a>标记内添加<i/>标记。 您的 html 代码应如下所示

<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="#"><i class="fa fa-home"/>Link 1</a>
        <a class="project-link" href="#"><i class="fa fa-search"/>Link 2</a>
        <a class="project-link" href="#"><i class="fa fa-globe"/>Link 3</a>
      </div>
    </li>
    <li>Contact</li>
  </ul>
</nav>