Numerous CSS/JS Dropdown Menus

Question

Numerous CSS/JS Dropdown Menus

I am seeking the ability to implement a dropdown through CSS in various locations within my HTML prototype. This implies that I require the capability to position multiple dropdowns anywhere on the page.

Currently, I utilize this method to generate a single dropdown:

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Click here 01 </button>
    <div id="myDropdown" class="dropdown-content">
       <a href="#">link</a>
       <a href="#">link</a>
       <a href="#">link</a>
    </div>
</div>

function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}

window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {

var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
  var openDropdown = dropdowns[i];
  if (openDropdown.classList.contains('show')) {
    openDropdown.classList.remove('show');
  }
}

} }

How can I create multiple dropdowns using the same JavaScript?

Here is an example that showcases the issue: https://codepen.io/db13/pen/pLGRwr

javascript html css

Answer 1

Answer №1

Using Pure CSS

This method utilizes pure CSS without any JavaScript

#example {
  margin: 30px 0 50px 0;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}

#example .wrapper {
  display: inline-block;
  width: 180px;
  margin: 0 10px 0 0;
  height: 20px;
  position: relative;
}
...

<div id="example">
  <div class="wrapper">
    <div class="content">
      <ul>
        <a href="#">
          <li>Parent 1 Element 1</li>
        </a>
        ...
      </ul>
    </div>
    <div class="parent">Button 1</div>
  </div>

  <div class="wrapper">
    <div class="content">
      <ul>
        <a href="#">
          <li>Parent 2 Element 1</li>
        </a>
        ...
      </ul>
    </div>
    <div class="parent">Button 2</div>
  </div>

Using Vanilla JavaScript

Implementing functionality with vanilla JavaScript

Find the full code on GitHub here

function fadeIn(el) {
  // Function to fade in an element
  // Code here
}

function fadeOut(el) {
  // Function to fade out an element
  // Code here
}

// More code here...

document.addEventListener("click", function() {
  // Event listener for document click
  // Code here
});

.btn {
  // Button styling
  // CSS rules here
}

.dropdown {
  // Dropdown styling
  // CSS rules here
}

<div>
  <div class="dropdown">
    <button class="btn">First Color</button>
    <ul class="btn-dropdown">
      <li>Brown</li>
      ...
    </ul>
  </div>
  
  // More dropdown elements here
</div>

Using jQuery

This method requires jQuery and an additional plugin

For more details, refer to this Stack Overflow question Drop down list items still clickable when the opacity is zero

$(".btn").on('click', function(e) {
  // Click event for buttons
  // jQuery code here
});

$(document).on('click', function(e) {
  // Document click event
  // jQuery code here
});

.btn {
  // Button styling
  // CSS rules here
}

.dropdown {
  // Dropdown styling
  // CSS rules here
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
  <button class="btn first">Select something</button>
  <ul class="btn-dropdown">
    <li>First</li>
    ...
  </ul>
</div>

// Additional dropdown elements here

Answer 2

Using Pure CSS

This method utilizes pure CSS without any JavaScript

#example {
  margin: 30px 0 50px 0;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}

#example .wrapper {
  display: inline-block;
  width: 180px;
  margin: 0 10px 0 0;
  height: 20px;
  position: relative;
}
...

<div id="example">
  <div class="wrapper">
    <div class="content">
      <ul>
        <a href="#">
          <li>Parent 1 Element 1</li>
        </a>
        ...
      </ul>
    </div>
    <div class="parent">Button 1</div>
  </div>

  <div class="wrapper">
    <div class="content">
      <ul>
        <a href="#">
          <li>Parent 2 Element 1</li>
        </a>
        ...
      </ul>
    </div>
    <div class="parent">Button 2</div>
  </div>

Using Vanilla JavaScript

Implementing functionality with vanilla JavaScript

Find the full code on GitHub here

function fadeIn(el) {
  // Function to fade in an element
  // Code here
}

function fadeOut(el) {
  // Function to fade out an element
  // Code here
}

// More code here...

document.addEventListener("click", function() {
  // Event listener for document click
  // Code here
});

.btn {
  // Button styling
  // CSS rules here
}

.dropdown {
  // Dropdown styling
  // CSS rules here
}

<div>
  <div class="dropdown">
    <button class="btn">First Color</button>
    <ul class="btn-dropdown">
      <li>Brown</li>
      ...
    </ul>
  </div>
  
  // More dropdown elements here
</div>

Using jQuery

This method requires jQuery and an additional plugin

For more details, refer to this Stack Overflow question Drop down list items still clickable when the opacity is zero

$(".btn").on('click', function(e) {
  // Click event for buttons
  // jQuery code here
});

$(document).on('click', function(e) {
  // Document click event
  // jQuery code here
});

.btn {
  // Button styling
  // CSS rules here
}

.dropdown {
  // Dropdown styling
  // CSS rules here
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
  <button class="btn first">Select something</button>
  <ul class="btn-dropdown">
    <li>First</li>
    ...
  </ul>
</div>

// Additional dropdown elements here

Answer 3

Answer №2

One issue you're facing is the importance of making sure that ID's are indeed unique. Your current function is repeatedly targeting the same #myDropdown element.

To address this, consider updating your function to pass in this as the context target and dynamically selecting the dropdown based on its class name.

Take a look at this illustrative example: CodePen Demo

Revise your onclick event like so:

 <button onclick="myFunction(this)" class="dropbtn">Click here 01 </button>

Now, update your myFunction as follows:

var myFunction = function(target) {
   target.parentNode.querySelector('.dropdown-content').classList.toggle("show");
}

Answer 4

One issue you're facing is the importance of making sure that ID's are indeed unique. Your current function is repeatedly targeting the same #myDropdown element.

To address this, consider updating your function to pass in this as the context target and dynamically selecting the dropdown based on its class name.

Take a look at this illustrative example: CodePen Demo

Revise your onclick event like so:

 <button onclick="myFunction(this)" class="dropbtn">Click here 01 </button>

Now, update your myFunction as follows:

var myFunction = function(target) {
   target.parentNode.querySelector('.dropdown-content').classList.toggle("show");
}

Numerous CSS/JS Dropdown Menus

Answer №1

Answer №2

Similar questions

Utilizing the calc() function to determine height dimensions

The signal property 'ɵunwrapWritableSignal' is not found on the specified type 'typeof import/node_modules/@angular/core/index")'

Are there any better methods for transforming a class component into a hook component?

Using Telegram markdown: Can you combine both bold and italic? (September 2018)

What is the best way to transform a current callback API into promises?

Utilize the fetch function within the useEffect hook to generate a new

"Track the progress of a form submission with a loading indicator using Sweet

"Encountering a connectivity problem with Apollo server's GraphQL

ERROR: Expo TaskManager Notifications [TypeError: Attempting to call an undefined function (near '...Notifications.presentLocalNotificationAsync...')]

Challenges with navbar and CSS alignment in Internet Explorer

Blazor: Personalizing color variables in _root.scss - A Step-by-Step Guide

Ways to prevent a div from loading an HTML page

How to Pass and Execute Asynchronous Callbacks as Props in React Components

Angular's Validator directive offers powerful validation capabilities for reactive forms

How to utilize the ternary operator efficiently to evaluate multiple conditions in React

What is the best way to implement JQuery in order to trigger an event in a text box whenever the user hits the "enter

Uncovering the jsPlumb link between a pair of identifiers

What causes an undefined outcome when a promise is fulfilled?

What is the best way to ensure my image adjusts its width and height responsively?

Having trouble uploading big files on your Windows system?

Numerous CSS/JS Dropdown Menus

Answer №1

Answer №2

Similar questions

Utilizing the calc() function to determine height dimensions

The signal property 'ɵunwrapWritableSignal' is not found on the specified type 'typeof import/node_modules/@angular/core/index")'

Are there any better methods for transforming a class component into a hook component?

Using Telegram markdown: Can you combine both bold *and* italic? (September 2018)

What is the best way to transform a current callback API into promises?

Utilize the fetch function within the useEffect hook to generate a new

"Track the progress of a form submission with a loading indicator using Sweet

"Encountering a connectivity problem with Apollo server's GraphQL

ERROR: Expo TaskManager Notifications [TypeError: Attempting to call an undefined function (near '...Notifications.presentLocalNotificationAsync...')]

Challenges with navbar and CSS alignment in Internet Explorer

Blazor: Personalizing color variables in _root.scss - A Step-by-Step Guide

Ways to prevent a div from loading an HTML page

How to Pass and Execute Asynchronous Callbacks as Props in React Components

Angular's Validator directive offers powerful validation capabilities for reactive forms

How to utilize the ternary operator efficiently to evaluate multiple conditions in React

What is the best way to implement JQuery in order to trigger an event in a text box whenever the user hits the "enter

Uncovering the jsPlumb link between a pair of identifiers

What causes an undefined outcome when a promise is fulfilled?

What is the best way to ensure my image adjusts its width and height responsively?

Having trouble uploading big files on your Windows system?

Using Telegram markdown: Can you combine both bold and italic? (September 2018)