HTML KEBAB FOR MULTIPLE INSTANCES

Philly
March 6, 2023
249 views
0 votes
2 Answers

I’m trying to create a kebab menu for a page that displays multiple blogs. However, my code only triggers the kebab for only the first post and doesn’t work for others. I included the HTML, CSS, and javascript for clarity. Only the first post works (in terms of the kebab menu). Please help.

var kebab = document.querySelector('.kebab'),
  middle = document.querySelector('.middle'),
  cross = document.querySelector('.cross'),
  dropdown = document.querySelector('.dropdown');

kebab.addEventListener('click', function() {
  middle.classList.toggle('active');
  cross.classList.toggle('active');
  dropdown.classList.toggle('active');
})

.kebab {
  cursor: pointer;
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  padding: 0 16px;
  top: 12px;
}

.kebab figure {
  width: 6px;
  height: 6px;
  border-radius: 5px;
  background: #00bcd4;
  margin: 3px 0;
}

.middle {
  transition: all 0.25s cubic-bezier(0.72, 1.2, 0.71, 0.72);
  transform: scale(1);
  position: relative;
  box-shadow: 0 0.1px 0.1px 0 rgba(0, 0, 0, 0.16), 0 0.1px 0.3px 0 rgba(0, 0, 0, 0.12);
  -webkit-filter: blur(0.1px);
  filter: blur(0.1px);
}

.middle.active {
  transform: scale(4.5);
  transition: all 0.25s cubic-bezier(0.32, 2.04, 0.85, 0.54);
  box-shadow: 0 0.1px 0.1px 0 rgba(0, 0, 0, 0.16), 0 0.1px 0.3px 0 rgba(0, 0, 0, 0.12);
}

.cross {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  margin-top: -1px;
  font-family: 'Nunito', sans-serif;
  color: white;
  transition: all 0.2s cubic-bezier(0.72, 1.2, 0.71, 0.72);
  font-size: 22px;
  user-select: none;
}

.cross.active {
  transform: translate(-50%, -50%) scale(1);
  transition: all 0.15s cubic-bezier(0.32, 2.04, 0.85, 0.54);
}

h1,
a,
li {
  font-family: Roboto, sans-serif;
}

h1 {
  font-size: 26px;
  background: #00bcd4;
  color: white;
  padding: 40px 0 40px 20%;
  margin-bottom: 50px;
}

a,
li {
  color: #6b6b6b;
  text-decoration: none;
}

.nav {
  margin-left: 20%;
}

.nav>li {
  display: inline-block;
  padding: 1em 18px;
  cursor: pointer;
}

.nav>li:hover {
  background: #ebebeb;
}

.dropdown {
  position: absolute;
  right: 0;
  top: 3em;
  transition: all 0.25s ease-out;
  transform: scale(0);
  transform-origin: 100% 0;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 8px 0 rgba(0, 0, 0, 0.12);
}

.dropdown li {
  display: block;
  width: 100%;
}

.dropdown li a {
  width: 100%;
  padding: 1em 18px;
  display: inline-block;
  white-space: pre;
  box-sizing: border-box;
}

.dropdown li a:hover {
  background: #ebebeb;
}

.dropdown:hover ul {
  transform: scale(1);
}

.dropdown.active {
  transform: scale(1);
  transition: all 0.25s cubic-bezier(0.5, 1.8, 0.9, 0.8);
}

.follow {
  overflow: hidden;
  width: 42px;
  height: 42px;
  border-radius: 50px;
  background: #03A9F4;
  display: block;
  margin: 300px auto 0;
  white-space: nowrap;
  padding: 13px;
  box-sizing: border-box;
  color: white;
  transition: all 0.2s ease;
  font-family: Roboto, sans-serif;
  text-decoration: none;
  box-shadow: 0 5px 6px 0 rgba(0, 0, 0, 0.2);
}

.follow i {
  margin-right: 20px;
  transition: margin-right 0.2s ease;
}

.follow:hover {
  width: 134px;
}

.follow:hover i {
  margin-right: 10px;
}

@media screen and (max-width: 800px) {
  .follow {
    margin: 400px auto 0;
  }
}

<div class="kebab">
  <figure></figure>
  <figure class="middle"></figure>
  <p class="cross">x</p>
  <figure></figure>
  <ul class="dropdown">
    <li><a href="http://www.g.com">Art</a></li>
    <li><a href="http://www.g.com">Coding</a></li>
    <li><a href="http://www.g.com">Design</a></li>
    <li><a href="http://www.g.com">Web Development</a></li>
  </ul>
</div>

Answers

querySelector only selects one element. I’m assuming you have multiple elements with class kebab. I’ve added an event listener to each of these in a forEachLoop, getting the elements with querySelectorAll. Your code only adds the event listener to the first kebab.

I’ve also simplified the js by just adding the active class the the parent element, adjusting the CSS to accommodate this.

var kebab = document.querySelectorAll('.kebab');
kebab.forEach(el => el.addEventListener("click", function(){
  console.log(this)
  this.classList.toggle("active");
}));

.kebab {
  cursor: pointer;
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  padding: 0 16px;
  top: 12px;
}

.kebab figure {
  width: 6px;
  height: 6px;
  border-radius: 5px;
  background: #00bcd4;
  margin: 3px 0;
}

.middle {
  transition: all 0.25s cubic-bezier(0.72, 1.2, 0.71, 0.72);
  transform: scale(1);
  position: relative;
  box-shadow: 0 0.1px 0.1px 0 rgba(0, 0, 0, 0.16), 0 0.1px 0.3px 0 rgba(0, 0, 0, 0.12);
  -webkit-filter: blur(0.1px);
  filter: blur(0.1px);
}

.active .middle{
  transform: scale(4.5);
  transition: all 0.25s cubic-bezier(0.32, 2.04, 0.85, 0.54);
  box-shadow: 0 0.1px 0.1px 0 rgba(0, 0, 0, 0.16), 0 0.1px 0.3px 0 rgba(0, 0, 0, 0.12);
}

.cross {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  margin-top: -1px;
  font-family: 'Nunito', sans-serif;
  color: white;
  transition: all 0.2s cubic-bezier(0.72, 1.2, 0.71, 0.72);
  font-size: 22px;
  user-select: none;
}

.active .cross {
  transform: translate(-50%, -50%) scale(1);
  transition: all 0.15s cubic-bezier(0.32, 2.04, 0.85, 0.54);
}

h1,
a,
li {
  font-family: Roboto, sans-serif;
}

h1 {
  font-size: 26px;
  background: #00bcd4;
  color: white;
  padding: 40px 0 40px 20%;
  margin-bottom: 50px;
}

a,
li {
  color: #6b6b6b;
  text-decoration: none;
}

.nav {
  margin-left: 20%;
}

.nav>li {
  display: inline-block;
  padding: 1em 18px;
  cursor: pointer;
}

.nav>li:hover {
  background: #ebebeb;
}

.dropdown {
  position: absolute;
  right: 0;
  top: 3em;
  transition: all 0.25s ease-out;
  transform: scale(0);
  transform-origin: 100% 0;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 8px 0 rgba(0, 0, 0, 0.12);
}

.dropdown li {
  display: block;
  width: 100%;
}

.dropdown li a {
  width: 100%;
  padding: 1em 18px;
  display: inline-block;
  white-space: pre;
  box-sizing: border-box;
}

.dropdown li a:hover {
  background: #ebebeb;
}

.dropdown:hover ul {
  transform: scale(1);
}

.active .dropdown{
  transform: scale(1);
  transition: all 0.25s cubic-bezier(0.5, 1.8, 0.9, 0.8);
}

.follow {
  overflow: hidden;
  width: 42px;
  height: 42px;
  border-radius: 50px;
  background: #03A9F4;
  display: block;
  margin: 300px auto 0;
  white-space: nowrap;
  padding: 13px;
  box-sizing: border-box;
  color: white;
  transition: all 0.2s ease;
  font-family: Roboto, sans-serif;
  text-decoration: none;
  box-shadow: 0 5px 6px 0 rgba(0, 0, 0, 0.2);
}

.follow i {
  margin-right: 20px;
  transition: margin-right 0.2s ease;
}

.follow:hover {
  width: 134px;
}

.follow:hover i {
  margin-right: 10px;
}

@media screen and (max-width: 800px) {
  .follow {
    margin: 400px auto 0;
  }
}

<div class="kebab">
  <figure></figure>
  <figure class="middle"></figure>
  <p class="cross">x</p>
  <figure></figure>
  <ul class="dropdown">
    <li><a href="http://www.g.com">Art</a></li>
    <li><a href="http://www.g.com">Coding</a></li>
    <li><a href="http://www.g.com">Design</a></li>
    <li><a href="http://www.g.com">Web Development</a></li>
  </ul>
</div>

<div class="kebab">
  <figure></figure>
  <figure class="middle"></figure>
  <p class="cross">x</p>
  <figure></figure>
  <ul class="dropdown">
    <li><a href="http://www.g.com">Art</a></li>
    <li><a href="http://www.g.com">Coding</a></li>
    <li><a href="http://www.g.com">Design</a></li>
    <li><a href="http://www.g.com">Web Development</a></li>
  </ul>
</div>

<div class="kebab">
  <figure></figure>
  <figure class="middle"></figure>
  <p class="cross">x</p>
  <figure></figure>
  <ul class="dropdown">
    <li><a href="http://www.g.com">Art</a></li>
    <li><a href="http://www.g.com">Coding</a></li>
    <li><a href="http://www.g.com">Design</a></li>
    <li><a href="http://www.g.com">Web Development</a></li>
  </ul>
</div>

var kebab = document.querySelector('.kebab'),
  middle = document.querySelector('.middle'),
  cross = document.querySelector('.cross'),
  dropdown = document.querySelector('.dropdown');

kebab.addEventListener('click', function() {
  middle.classList.toggle('active');
  cross.classList.toggle('active');
  dropdown.classList.toggle('active');
})

.kebab {
  cursor: pointer;
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  padding: 0 16px;
  top: 12px;
}

.kebab figure {
  width: 6px;
  height: 6px;
  border-radius: 5px;
  background: #00bcd4;
  margin: 3px 0;
}

.middle {
  transition: all 0.25s cubic-bezier(0.72, 1.2, 0.71, 0.72);
  transform: scale(1);
  position: relative;
  box-shadow: 0 0.1px 0.1px 0 rgba(0, 0, 0, 0.16), 0 0.1px 0.3px 0 rgba(0, 0, 0, 0.12);
  -webkit-filter: blur(0.1px);
  filter: blur(0.1px);
}

.middle.active {
  transform: scale(4.5);
  transition: all 0.25s cubic-bezier(0.32, 2.04, 0.85, 0.54);
  box-shadow: 0 0.1px 0.1px 0 rgba(0, 0, 0, 0.16), 0 0.1px 0.3px 0 rgba(0, 0, 0, 0.12);
}

.cross {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  margin-top: -1px;
  font-family: 'Nunito', sans-serif;
  color: white;
  transition: all 0.2s cubic-bezier(0.72, 1.2, 0.71, 0.72);
  font-size: 22px;
  user-select: none;
}

.cross.active {
  transform: translate(-50%, -50%) scale(1);
  transition: all 0.15s cubic-bezier(0.32, 2.04, 0.85, 0.54);
}

h1,
a,
li {
  font-family: Roboto, sans-serif;
}

h1 {
  font-size: 26px;
  background: #00bcd4;
  color: white;
  padding: 40px 0 40px 20%;
  margin-bottom: 50px;
}

a,
li {
  color: #6b6b6b;
  text-decoration: none;
}

.nav {
  margin-left: 20%;
}

.nav>li {
  display: inline-block;
  padding: 1em 18px;
  cursor: pointer;
}

.nav>li:hover {
  background: #ebebeb;
}

.dropdown {
  position: absolute;
  left: 10%;
  top: 3em;
  transition: all 0.25s ease-out;
  transform: scale(0);
  transform-origin: 100% 0;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 8px 0 rgba(0, 0, 0, 0.12);
}

.dropdown li {
  display: block;
  width: 100%;
}

.dropdown li a {
  width: 100%;
  padding: 1em 18px;
  display: inline-block;
  white-space: pre;
  box-sizing: border-box;
}

.dropdown li a:hover {
  background: #ebebeb;
}

.dropdown:hover ul {
  transform: scale(1);
}

.dropdown.active {
  transform: scale(1);
  transition: all 0.25s cubic-bezier(0.5, 1.8, 0.9, 0.8);
}

.follow {
  overflow: hidden;
  width: 42px;
  height: 42px;
  border-radius: 50px;
  background: #03A9F4;
  display: block;
  margin: 300px auto 0;
  white-space: nowrap;
  padding: 13px;
  box-sizing: border-box;
  color: white;
  transition: all 0.2s ease;
  font-family: Roboto, sans-serif;
  text-decoration: none;
  box-shadow: 0 5px 6px 0 rgba(0, 0, 0, 0.2);
}

.follow i {
  margin-right: 20px;
  transition: margin-right 0.2s ease;
}

.follow:hover {
  width: 134px;
}

.follow:hover i {
  margin-right: 10px;
}

@media screen and (max-width: 800px) {
  .follow {
    margin: 400px auto 0;
  }
}

<div class="kebab">
  <figure></figure>
  <figure class="middle"></figure>
  <p class="cross">x</p>
  <figure></figure>
  <ul class="dropdown">
    <li><a href="http://www.g.com">Art</a></li>
    <li><a href="http://www.g.com">Coding</a></li>
    <li><a href="http://www.g.com">Design</a></li>
    <li><a href="http://www.g.com">Web Development</a></li>
  </ul>
</div>

For CSS in .dropdown I had to change right: 0; to left 10%, or else it wouldn’t show at all. After that change, I can’t see anything that doesn’t work. It pops down and displays everything in the <ul class="dropdown"> tag. However, I did notice that inside <ul class="dropdown"> all the lists links have the same hrefs. Furthermore, the hrefs don’t lead anywhere (which I suspect was intentional).

Please signup or login to give your own answer.

Click here to cancel reply.