Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

multiple dropdowns, separate menus, separate triggers

See original GitHub issue

Is it supported to have two different dropdowns displayed simultaneously (on the same screen)? I haven’t been able to configure this.

Here’s an example

<a class='dropdown-button' href='javascript:void()' data-activates='dropdown1'>Drop 1</a>
<ul id='dropdown1' class='dropdown-content'>
  <li>1 one</li>
  <li>1 two</li>
  <li>1 three</li>
</ul>

<a class='dropdown-button' href='javascript:void()' data-activates='dropdown2'>Drop 2</a>
<ul id='dropdown2' class='dropdown-content'>
  <li>2 one</li>
  <li>2 two</li>
  <li>2 three</li>
</ul>

$('.dropdown-button').dropdown({
  inDuration: 300,
  outDuration: 225,
  constrain_width: false, // Does not change width of dropdown to that of the activator
  hover: true, // Activate on hover
  gutter: 0, // Spacing from edge
  belowOrigin: false // Displays dropdown below the button
});

Issue Analytics

State:
Created 8 years ago
Reactions:3
Comments:10 (1 by maintainers)

Top GitHub Comments

7reactions

singhshashicommented, Oct 10, 2017

@arabesq610 I did this by specifying a unique Id to each of the anchor tags and then used that Id to initialize the dropwon using jquery.

<a id='btndropdown1' class='dropdown-button' href='javascript:void()' data-activates='dropdown1'>Drop 1</a>
<ul id='dropdown1' class='dropdown-content'>
  <li>1 one</li>
  <li>1 two</li>
  <li>1 three</li>
</ul>

<a id='btndropdown2' class='dropdown-button' href='javascript:void()' data-activates='dropdown2'>Drop 2</a>
<ul id='dropdown2' class='dropdown-content'>
  <li>2 one</li>
  <li>2 two</li>
  <li>2 three</li>
</ul>

and then for initializing.

$('#btndropdown1').dropdown({
  inDuration: 300,
  outDuration: 225,
  constrain_width: false, // Does not change width of dropdown to that of the activator
  hover: true, // Activate on hover
  gutter: 0, // Spacing from edge
  belowOrigin: false // Displays dropdown below the button
});

$('#btndropdown2').dropdown({
  inDuration: 300,
  outDuration: 225,
  constrain_width: false, // Does not change width of dropdown to that of the activator
  hover: true, // Activate on hover
  gutter: 0, // Spacing from edge
  belowOrigin: false // Displays dropdown below the button
});

Update:

I see a couple of people reacted with a thumbs down. If you could please elaborate why, that would be helpful?

2reactions

kroteDevcommented, Feb 23, 2018

@singhshashi thank you! that solution worked like a charm. I think people are misunderstanding the question. We don’t want open all menu’s at same time. we just want to have multiples dropdown (working) on the same menu. E.g: User > edit account Products > New product.
Category > New Category