CODEWITHSUNDEEP
javascripthtml
CroatiaHR
CroatiaHR

Reputation: 625

HTML drop-down menu with icons and text

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>

Upvotes: 2

Views: 2139

Answers (3)

sourceKing
sourceKing

Reputation: 11

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>

Upvotes: 1

astroide
astroide

Reputation: 817

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

Upvotes: 1

Spectric
Spectric

Reputation: 31987

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.

Upvotes: 1

Related Questions