Creating a series of adjacent dropdown menus with JavaScript, HTML, and CSS

Question

Creating a series of adjacent dropdown menus with JavaScript, HTML, and CSS

I am encountering an issue while attempting to place multiple dropdown menus next to each other. I have included two categories as dropdown options in the header, but I am facing difficulty with one of them not functioning correctly. When I click on the non-working dropdown menu, nothing seems to happen.

let click = document.querySelector('.click');
let list = document.querySelector('.list');

click.addEventListener("click", () => {
  list.classList.toggle('newlist');
});

* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

.header {
  width: 100%;
  height: 100px;
  display: block;
  background-color: #F6D604;
  border-bottom: 3px solid black;
}

.header img {
  float: left;
  width: 180px;
  padding: 7px 20px;
  height: 80%;
  background: transparent;
}

img {
  image-rendering: auto;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

.inner_header {
  width: 90%;
  height: 100%;
  display: block;
  margin: 0 auto;
}

.container {
  float: right;
  text-align: center;
  height: 100%;
  padding: 25px 5px;
  display: block;
  border-color: black;
}

.click {
  background-color: #F6D604;
  padding: 12px;
  font-size: 1.2em;
  font-family: sans-serif;
  border-color: black;
  outline: none;
  width: 150px;
  color: rgb(0, 0, 0);
  transition: 0.3s;
  border-radius: 10px;
}

.click:hover {
  background-color: #F6D604;
}

.links {
  border: none;
  outline: none;
  width: 150px;
  color: rgb(0, 0, 0);
  transition: 0.3s;
  padding: 12px;
  font-size: 1.2em;
  font-family: sans-serif;
  border-radius: 7px;
}

.list {
  position: absolute;
  transform: scaleY(0);
  transform-origin: top;
  transition: 0.3s;
  width: 150px;
  border-radius: 10px;
  border: 2px solid black;
  background-color: #fdfdfd;
}

.newlist {
  transform: scaleY(1);
  border-radius: 10px;
  border: 2px solid black;
}

.links {
  background-color: #fdfdfd;
  border-color: black;
}

.links:hover {
  background-color: #F6D604;
}

<div class="header">
  <div class="inner_header">
    <a href="../project/index.html">
      <div class="logo_container">
        <img src="assets/images/LOGO.png" alt="logo" />
      </div>
    </a>
    <div class="container">
      <button class="click">About</button>
      <div class="list">
        <button class="links">About us</button>
        <button class="links">Contact us</button>
      </div>
      <button class="click">Language</button>
      <div class="list">
        <button class="links">EN</button>
        <button class="links">NL</button>
      </div>
    </div>
  </div>
</div>

javascript html css

Answer 1

Answer №1

querySelector selects the first matching element, while querySelectorAll grabs all matching elements. To apply a listener, you must iterate through the elements. This approach ensures that any open navigation menus are closed when another is clicked. The use of the spread operator [...] facilitates iteration through elements. I introduced a new class navitem to properly display each submenu.

let click = document.querySelectorAll('.click');
let list = document.querySelectorAll('.list');
const showSub = (e) => {
    [...list].forEach(el => el.classList.remove('newlist')); // reset
    e.target.parentNode.querySelector('.list').classList.toggle('newlist');
    // alternatively
    //e.target.nextElementSibling.classList.toggle('newlist');
  }
  [...click].forEach(el => el.addEventListener("click", showSub));

* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

.header {
  width: 100%;
  height: 100px;
  display: block;
  background-color: #F6D604;
  border-bottom: 3px solid black;
}

.header img {
  float: left;
  width: 180px;
  padding: 7px 20px;
  height: 80%;
  background: transparent;
}

img {
  image-rendering: auto;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

.inner_header {
  width: 90%;
  height: 100%;
  display: block;
  margin: 0 auto;
}

.container {
  float: right;
  text-align: center;
  height: 100%;
  padding: 25px 5px;
  display: block;
  border-color: black;
}

.click {
  background-color: #F6D604;
  padding: 12px;
  font-size: 1.2em;
  font-family: sans-serif;
  border-color: black;
  outline: none;
  width: 150px;
  color: rgb(0, 0, 0);
  transition: 0.3s;
  border-radius: 10px;
}

.navitem {
  width: 150px;
  display: inline-block;
}

.click:hover {
  background-color: #F6D604;
}

.links {
  border: none;
  outline: none;
  width: 150px;
  color: rgb(0, 0, 0);
  transition: 0.3s;
  padding: 12px;
  font-size: 1.2em;
  font-family: sans-serif;
  border-radius: 7px;
}

.list {
  position: absolute;
  transform: scaleY(0);
  transform-origin: top;
  transition: 0.3s;
  width: 150px;
  border-radius: 10px;
  border: 2px solid black;
  background-color: #fdfdfd;
}

.newlist {
  transform: scaleY(1);
  border-radius: 10px;
  border: 2px solid black;
}

.links {
  background-color: #fdfdfd;
  border-color: black;
}

.links:hover {
  background-color: #F6D604;
}

<div class="header">
  <div class="inner_header">
    <a href="../project/index.html">
      <div class="logo_container">
        <img src="assets/images/LOGO.png" alt="logo" />
      </div>
    </a>
    <div class="container">
      <div class='navitem'>
        <button class="click">About</button>
        <div class="list">
          <button class="links">About us</button>
          <button class="links">Contact us</button>
        </div>
      </div>
      <div class='navitem'>
        <button class="click">Language</button>
        <div class="list">
          <button class="links">EN</button>
          <button class="links">NL</button>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

querySelector selects the first matching element, while querySelectorAll grabs all matching elements. To apply a listener, you must iterate through the elements. This approach ensures that any open navigation menus are closed when another is clicked. The use of the spread operator [...] facilitates iteration through elements. I introduced a new class navitem to properly display each submenu.

let click = document.querySelectorAll('.click');
let list = document.querySelectorAll('.list');
const showSub = (e) => {
    [...list].forEach(el => el.classList.remove('newlist')); // reset
    e.target.parentNode.querySelector('.list').classList.toggle('newlist');
    // alternatively
    //e.target.nextElementSibling.classList.toggle('newlist');
  }
  [...click].forEach(el => el.addEventListener("click", showSub));

* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

.header {
  width: 100%;
  height: 100px;
  display: block;
  background-color: #F6D604;
  border-bottom: 3px solid black;
}

.header img {
  float: left;
  width: 180px;
  padding: 7px 20px;
  height: 80%;
  background: transparent;
}

img {
  image-rendering: auto;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

.inner_header {
  width: 90%;
  height: 100%;
  display: block;
  margin: 0 auto;
}

.container {
  float: right;
  text-align: center;
  height: 100%;
  padding: 25px 5px;
  display: block;
  border-color: black;
}

.click {
  background-color: #F6D604;
  padding: 12px;
  font-size: 1.2em;
  font-family: sans-serif;
  border-color: black;
  outline: none;
  width: 150px;
  color: rgb(0, 0, 0);
  transition: 0.3s;
  border-radius: 10px;
}

.navitem {
  width: 150px;
  display: inline-block;
}

.click:hover {
  background-color: #F6D604;
}

.links {
  border: none;
  outline: none;
  width: 150px;
  color: rgb(0, 0, 0);
  transition: 0.3s;
  padding: 12px;
  font-size: 1.2em;
  font-family: sans-serif;
  border-radius: 7px;
}

.list {
  position: absolute;
  transform: scaleY(0);
  transform-origin: top;
  transition: 0.3s;
  width: 150px;
  border-radius: 10px;
  border: 2px solid black;
  background-color: #fdfdfd;
}

.newlist {
  transform: scaleY(1);
  border-radius: 10px;
  border: 2px solid black;
}

.links {
  background-color: #fdfdfd;
  border-color: black;
}

.links:hover {
  background-color: #F6D604;
}

<div class="header">
  <div class="inner_header">
    <a href="../project/index.html">
      <div class="logo_container">
        <img src="assets/images/LOGO.png" alt="logo" />
      </div>
    </a>
    <div class="container">
      <div class='navitem'>
        <button class="click">About</button>
        <div class="list">
          <button class="links">About us</button>
          <button class="links">Contact us</button>
        </div>
      </div>
      <div class='navitem'>
        <button class="click">Language</button>
        <div class="list">
          <button class="links">EN</button>
          <button class="links">NL</button>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 3

Answer №2

One important aspect of the querySelector method is that it retrieves the first matching DOM element. In your scenario, if you are using the same click class for multiple buttons, the event listener will only be attached to the first button. You can refer to the relevant documentation for more information (specifically the return value section).

To address this issue, I recommend either assigning unique classes to each button and attaching listeners individually, or selecting both buttons with a code snippet like the following:

let clicks = document.querySelectorAll('.click');

for (let click of clicks) {
  click.addEventListener("click",()=>{
    list.classList.toggle('newlist');
  });
}

Answer 4

One important aspect of the querySelector method is that it retrieves the first matching DOM element. In your scenario, if you are using the same click class for multiple buttons, the event listener will only be attached to the first button. You can refer to the relevant documentation for more information (specifically the return value section).

To address this issue, I recommend either assigning unique classes to each button and attaching listeners individually, or selecting both buttons with a code snippet like the following:

let clicks = document.querySelectorAll('.click');

for (let click of clicks) {
  click.addEventListener("click",()=>{
    list.classList.toggle('newlist');
  });
}

Answer 5

Answer №3

To handle each button-list pair, use a forEach.

The JavaScript code below should help resolve your issues with JavaScript. Modify the CSS as necessary (I made some changes to the original HTML).

let drops = document.querySelectorAll('.drop');

drops.forEach(function(drop) {
  let click = drop.querySelector('.click');
  let list = drop.querySelector('.list');
  click.addEventListener("click", () => {
    list.classList.toggle('newlist');
  });
});

* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

.header {
  width: 100%;
  height: 100px;
  display: block;
  background-color: #F6D604;
  border-bottom: 3px solid black;
}

.header img {
  float: left;
  width: 180px;
  padding: 7px 20px;
  height: 80%;
  background: transparent;
}

img {
  image-rendering: auto;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

.inner_header {
  width: 90%;
  height: 100%;
  display: block;
  margin: 0 auto;
}

.container {
  text-align: center;
  height: 100%;
  padding: 25px 5px;
  display: block;
  border-color: black;
}

.drop {
  width: 150px;
  float: right;
  padding: 0 5px;
}

.click {
  background-color: #F6D604;
  padding: 12px;
  font-size: 1.2em;
  font-family: sans-serif;
  border-color: black;
  outline: none;
  width: 100%;
  color: rgb(0, 0, 0);
  transition: 0.3s;
  border-radius: 10px;
}

.click:hover {
  background-color: #F6D604;
}

.links {
  border: none;
  outline: none;
  width: 150px;
  color: rgb(0, 0, 0);
  transition: 0.3s;
  padding: 12px;
  font-size: 1.2em;
  font-family: sans-serif;
  border-radius: 7px;

.list {
  position: absolute;
  transform: scaleY(0);
  margin-top: 1px;
  transform-origin: top;
  transition: 0.3s;
  width: 150px;
  border-radius: 10px;
  border: 2px solid black;
  background-color: #fdfdfd;
}

.newlist {
  transform: scaleY(1);
  border-radius: 10px;
  border: 2px solid black;
}

.links {
  background-color: #fdfdfd;
  border-color: black;
}

.links:hover {
  background-color: #F6D604;
}

<div class="header">
  <div class="inner_header">
    <a href="../project/index.html">
      <div class="logo_container">
        <img src="assets/images/LOGO.png" alt="logo" />
      </div>
    </a>
    <div class="container">
      <div class="drop">
        <button class="click">Language</button>
        <div class="list">
          <button class="links">EN</button>
          <button class="links">NL</button>
        </div>
      </div>
      <div class="drop">
        <button class="click">About</button>
        <div class="list">
          <button class="links">About us</button>
          <button class="links">Contact us</button>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 6

To handle each button-list pair, use a forEach.

The JavaScript code below should help resolve your issues with JavaScript. Modify the CSS as necessary (I made some changes to the original HTML).

let drops = document.querySelectorAll('.drop');

drops.forEach(function(drop) {
  let click = drop.querySelector('.click');
  let list = drop.querySelector('.list');
  click.addEventListener("click", () => {
    list.classList.toggle('newlist');
  });
});

* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

.header {
  width: 100%;
  height: 100px;
  display: block;
  background-color: #F6D604;
  border-bottom: 3px solid black;
}

.header img {
  float: left;
  width: 180px;
  padding: 7px 20px;
  height: 80%;
  background: transparent;
}

img {
  image-rendering: auto;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

.inner_header {
  width: 90%;
  height: 100%;
  display: block;
  margin: 0 auto;
}

.container {
  text-align: center;
  height: 100%;
  padding: 25px 5px;
  display: block;
  border-color: black;
}

.drop {
  width: 150px;
  float: right;
  padding: 0 5px;
}

.click {
  background-color: #F6D604;
  padding: 12px;
  font-size: 1.2em;
  font-family: sans-serif;
  border-color: black;
  outline: none;
  width: 100%;
  color: rgb(0, 0, 0);
  transition: 0.3s;
  border-radius: 10px;
}

.click:hover {
  background-color: #F6D604;
}

.links {
  border: none;
  outline: none;
  width: 150px;
  color: rgb(0, 0, 0);
  transition: 0.3s;
  padding: 12px;
  font-size: 1.2em;
  font-family: sans-serif;
  border-radius: 7px;

.list {
  position: absolute;
  transform: scaleY(0);
  margin-top: 1px;
  transform-origin: top;
  transition: 0.3s;
  width: 150px;
  border-radius: 10px;
  border: 2px solid black;
  background-color: #fdfdfd;
}

.newlist {
  transform: scaleY(1);
  border-radius: 10px;
  border: 2px solid black;
}

.links {
  background-color: #fdfdfd;
  border-color: black;
}

.links:hover {
  background-color: #F6D604;
}

<div class="header">
  <div class="inner_header">
    <a href="../project/index.html">
      <div class="logo_container">
        <img src="assets/images/LOGO.png" alt="logo" />
      </div>
    </a>
    <div class="container">
      <div class="drop">
        <button class="click">Language</button>
        <div class="list">
          <button class="links">EN</button>
          <button class="links">NL</button>
        </div>
      </div>
      <div class="drop">
        <button class="click">About</button>
        <div class="list">
          <button class="links">About us</button>
          <button class="links">Contact us</button>
        </div>
      </div>
    </div>
  </div>
</div>

Creating a series of adjacent dropdown menus with JavaScript, HTML, and CSS

Answer №1

Answer №2

Answer №3

Similar questions

"Error: The chai testing method appears to be improperly defined and is not

Enhancing Image Quality upon Hovering

Ways to extend the length/size of the HTML5 range input type

Differences between ClosureFeedbackCellArray and FeedbackVector in the V8 engine

Button Triggering Javascript

I must update the menu to show only one sub-menu at a time, ensuring that multiple menus cannot be displayed simultaneously

Preventing jQuery plugin from overriding default settings

Exploring collapsible data tables in Angular with Bootstrap styling

Invoke a Python function from JavaScript

PHP column number not found

Achieving vertical alignment and stretching of subchild within a flexbox element

The icon displays correctly in Firefox but is not visible in IE

"Unlocking the secret to fetching the id of the clicked element within a Highchart context menu

attempting to communicate with Postman but encountering an error in the process

Issues with Node JS app's handling of php mailer code

Tips for Editing an HTML File

Prevent lengthy headers from disrupting the flow of the list items

Saving form data with a tinymce textarea, radio button, and checkbox to the database

Remove padding in Twitter Bootstrap table cells

Proper method for executing a synchronous AJAX POST request and subsequently submitting a form