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

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

因此，代码创建了一个带有下拉菜单的条，但我想扩展它，在名称旁边有一个图标。我看过一些例子，但我不知道如何将它们结合起来。有人能帮忙吗

constprojectstab=document.getElementById（'projects'））
const tabName=projectsTab.querySelector（“.tab name”）
const projectLinks=document.querySelector（“.project links”）
projectsTab.addEventListener（'click'，e=>{
常量isOpen=projectLinks.classList.contains（'open'）
if（isOpen）projectLinks.classList.remove（'open'）
else projectLinks.classList.add（'open'）
})
//链接事件侦听器
const links=[…projectLinks.children]//将其转换为数组
links.forEach（link=>link.addEventListener（'click'，e=>{
tabName.innerText=link.innerText
}))

*{
填充：0；
保证金：0；
框大小：边框框；
字体系列：“Segoe UI”，无衬线；
}
导航{
位置：固定；
宽度：100%；
高度：50px；
背景：#222；
排名：0；
左：0；
颜色：白色；
显示器：flex；
}
导航>*{
弹性：1；
}
#标志{
左侧填充：20px；
字体大小：30px；
文本转换：大写；
字母间距：2px；
显示器：flex；
调整内容：灵活启动；
对齐项目：居中；
}
导航ul{
显示器：flex；
列表样式：无；
身高：100%；
}
李国荣{
位置：相对位置；
弹性：1；
背景：#222；
身高：100%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
光标：指针；
过渡：0.2s；
}
nav ul li:悬停{
背景:#555；
}
.项目链接{
位置：绝对位置；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
左：0；
最高：100%；
宽度：100%；
背景色：白色；
颜色：黑色；
/*这是该div的高度+导航条的高度*/
转化：translateY（-135%）；
过渡：0.2s；
z指数：-1；
}
.project-links.open{
变换：translateY（0）；
}
.项目链接{
高度：50px；
显示器：flex；
对齐项目：居中；
左侧填充：20px；
文字装饰：无；
颜色：白色；
光标：指针；
过渡：0.2s；
背景：#222；
颜色：白色；
}
.项目链接：悬停{
背景:#555；
}

标志

关于

项目

接触

假设您想使用字体可怕的图标，只需在相应的

a

标记中的文本旁边添加适当的

i

标记即可

constprojectstab=document.getElementById（'projects'））
const tabName=projectsTab.querySelector（“.tab name”）
const projectLinks=document.querySelector（“.project links”）
projectsTab.addEventListener（'click'，e=>{
常量isOpen=projectLinks.classList.contains（'open'）
if（isOpen）projectLinks.classList.remove（'open'）
else projectLinks.classList.add（'open'）
})
//链接事件侦听器
const links=[…projectLinks.children]//将其转换为数组
links.forEach（link=>link.addEventListener（'click'，e=>{
tabName.innerText=link.innerText
}))
document.addEventListener（“单击”，e=>{
如果（！projectsTab.包含（例如目标））{
projectLinks.classList.remove（“打开”）；
}
})

*{
填充：0；
保证金：0；
框大小：边框框；
字体系列：“Segoe UI”，无衬线；
}
导航{
位置：固定；
宽度：100%；
高度：50px；
背景：#222；
排名：0；
左：0；
颜色：白色；
显示器：flex；
}
导航>*{
弹性：1；
}
#标志{
左侧填充：20px；
字体大小：30px；
文本转换：大写；
字母间距：2px；
显示器：flex；
调整内容：灵活启动；
对齐项目：居中；
}
导航ul{
显示器：flex；
列表样式：无；
身高：100%；
}
李国荣{
位置：相对位置；
弹性：1；
背景：#222；
身高：100%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
光标：指针；
过渡：0.2s；
}
nav ul li:悬停{
背景:#555；
}
.项目链接{
位置：绝对位置；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
左：0；
最高：100%；
宽度：100%；
背景色：白色；
颜色：黑色；
/*这是该div的高度+导航条的高度*/
转化：translateY（-135%）；
过渡：0.2s；
z指数：-1；
}
.project-links.open{
变换：translateY（0）；
}
.项目链接{
高度：50px；
显示器：flex；
对齐项目：居中；
左侧填充：20px；
文字装饰：无；
颜色：白色；
光标：指针；
过渡：0.2s；
背景：#222；
颜色：白色；
}
.项目链接：悬停{
背景:#555；
}

标志

关于

项目

接触

由于您的下拉菜单元素已经是flex容器，您只需在每个元素的开头添加一个图像，给它们一个类（

icon

）并稍微更改填充。在这里，我放置了

图标{padding:3px；}

，并删除了菜单元素开头的20px填充，因为它将图像挤压到文本上

我还添加了一些JavaScript，以便在单击其他位置时关闭菜单

constprojectstab=document.getElementById（'projects'））
const tabName=projectsTab.querySelector（“.tab name”）
const projectLinks=document.querySelector（“.project links”）
projectsTab.addEventListener（'click'，e=>{
常量isOpen=projectLinks.classList.contains（'open'）
if（isOpen）projectLinks.classList.remove（'open'）
else projectLinks.classList.add（'open'）
})
addEventListener（'click'，e=>{
var目标=e.target；
如果（！（target.classList.contains（'project-link'）| | target.classList.contains（'project-link'）| | target.classList.contains（'tab-name'）| | target.id=”
<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-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>