Menu icon Foundation
Dropdown Button Active State

Wondering if anyone has a solution to keep the hover state active on the button while the cursure is hovered on the dropdown pane. Here is a snippet of my code. 

 

 <button class="button" type="button" data-toggle="dropdown">Dropdown</button>

  <div class="dropdown-pane" id="dropdown" data-dropdown data-hover="true" data-hover-pane="true" data-v-offset="0" data-hover-delay="0">

<p>Dropdown Content</p>

</div>

dropdownbuttonhoveractive

Wondering if anyone has a solution to keep the hover state active on the button while the cursure is hovered on the dropdown pane. Here is a snippet of my code. 

 

 <button class="button" type="button" data-toggle="dropdown">Dropdown</button>

  <div class="dropdown-pane" id="dropdown" data-dropdown data-hover="true" data-hover-pane="true" data-v-offset="0" data-hover-delay="0">

<p>Dropdown Content</p>

</div>
Rafi Benkual over 3 years ago

The button and the dropdown pane a re 2 separate elements so their states don't interact. You can use jQuery to apply a class to the button when the pane is open.

It will take a little more but this will get you started: http://codepen.io/rafibomb/pen/gMgbxy

Cédric over 3 years ago

I'm also working on the same problem. It seems that was possible on previous framework version,  using dropdown button (cf Setting state for dropdown buttons #4843 )

Looking at documentation, there is a "state" on click for a dropdown button, but i don't know how to access it.

I'm interesting if you find how to.

Cédric over 3 years ago

 Is this code answering your question ?

<div class="expanded button-group">
	<button class="dropdown button essai" type="button" data-toggle="dropdown">Dropdown</button>
	<div class="dropdown-pane" id="dropdown" data-dropdown data-hover="true" data-hover-pane="true" data-v-offset="0" data-hover-delay="0">
		<p>Dropdown Content</p>
	</div>
	<button class="dropdown button essai" data-toggle="my-dropdown11">Dropdown Button11</button>
	<div class="dropdown-pane" id="my-dropdown11" data-dropdown data-close-on-click="true">
		<div>bla bla bla</div>
	</div>
</div>

with the following css

.essai {
  background-color: #aaaaaa !important; }

.essai:hover {
  background-color: #ff0000 !important; }

.essai.hover {
  background-color: #ffff00 !important; }

Trevor Lavigne over 3 years ago

Hey thanks for the help guys... I got it to work the way we wanted using your method Cédric. The java-script function works as well with a bit more work involved. Thanks!!