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

Does Google Cloud CDN not store data from the storage bucket?

What is the reason behind Express serving the static file through the router, while also causing the path to the scripts folder to

Guide on automatically inserting a colon (:) after every pair of characters in Angular

Utilizing Material-UI components for a seamless navigation button experience

Inconsistent CSS3 transitions behavior in Firefox 4

The JavaScript animations in AngularJS using ng-class are not being activated

In React + TypeScript, learn how to effectively pass down a function from a container component to a

"Unusual HTML and jQuery quirk causing a perplexing issue: a function that keeps looping inexp

What is the method to retrieve the information from a JSON response of a POST request in a Next/React application?

The browser automatically adds a backslash escape character to a JavaScript object

Making JSON function in Internet Explorer

Disable text input in Flatpickr and remove the default iPhone calendar

What are some ways to design unique custom data grid toolbar elements?

How does Jasmine compare to the second parameter with the toBeCloseTo function?

Issue encountered while managing login error messages: http://localhost:3000/auth/login net::ERR_ABORTED 405 (Method Not Allowed)

What could be causing the issue with the 100% height and 100% width not functioning properly on my ASPX page?

Tips for effectively handling unique properties of a React component (such as Redux integration and custom CSS) when sharing through NPM distribution

Selected value is not displayed in the textbox when using autocomplete feature

Reposition HTML content using regular expressions

Puppeteer is unable to detect the node.js handlebars helpers