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

Question

I have taken over the code from this post. As I have explained there, I have basically no HTML knowledge, yet I have this HTML part of my project that I have to finish.

So, the code creates a bar with a drop-down menu, but I want to extend it to have an icon next to the names. I have looked at these examples but I can't figure out how to combine them. Is there someone who could help?

 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

Assuming you want to use Font Awesome icons, just add the proper i tag referencing the right icon beside the text in the corresponding a tags.

 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>

To close the dropdown when the user clicks elsewhere, add an event listener for click and check whether the target is a subchild of projectsTab .

Answer 2

Since your dropdown menu elements are already flex containers, you can simply add an image at the beginning of each of them, give them a class ( icon ) and change a bit the padding. Here I put icon { padding: 3px; } icon { padding: 3px; } and I removed the 20px padding at the beginning of menu elements, because it squished the images against the text.

I also added some JavaScript to close the menu when you click elsewhere.

 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

This is actually pretty easy just like the example you linked to first add the link to the icon library inside the <head></head> tag of your html:

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

then add the <i/> tag inside the <a></a> tag of your drop down. Your html code should look like so

<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>