Dropdown Trigger Visually "Active" Like "Hover" [Foundation 6]

1
votes

See the below code for a basic hover dropdown-pane:

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

<div class="dropdown-pane" id="example" data-dropdown data-dropdown data-hover="true" data-hover-pane="true">
    <div class="row">
        <div class="medium-12 columns">
            <p>When I am hovering over any content in this dropdown-pane, how can I make the above button appear as "active" i.e. Same state as hovering over the button.</p>
        </div>
    </div>
</div>

Now what I'd like to have happen is that when the user is viewing any content within that dropdown-pane, the button that triggered the event has a visual indicator that it is the "active" trigger. Here's a picture example: Example 1 Example 2

Any insight you can provide would be very much appreciated.

2
zurb-foundationzurb-foundation-6

2 Answers

1
votes

Foundation has you covered here.

When the .dropdown-pane (content wrapper) is active, the button is given the class .hover (not to be confused with :hover state).

So you can simply add specific styles to that class (relative to your button if you want multiple different types of effect in different scenarios). You would have to manually ensure that your Foundation :hover matched your new .hover state.

HTML (e.g.)

<button class="button" type="button" data-toggle="example-dropdown">Toggle Dropdown</button>
<div class="dropdown-pane" id="example-dropdown" data-dropdown data-auto-focus="true">
  Example form in a dropdown.
  <form>
    <div class="row">
      <div class="medium-6 columns">
        <label>Name
          <input type="text" placeholder="Kirk, James T.">
        </label>
      </div>
      <div class="medium-6 columns">
        <label>Rank
          <input type="text" placeholder="Captain">
        </label>
      </div>
    </div>
  </form>
</div>


<button class="button" type="button" data-toggle="example-dropdown-1">Hoverable Dropdown</button>
<div class="dropdown-pane" id="example-dropdown-1" data-dropdown data-hover="true" data-hover-pane="true">
  Just some junk that needs to be said. Or not. Your choice.
</div>

CSS

.button.hover,
.button:hover{
  background-color: green;
}

Working example: https://jsfiddle.net/tymothytym/8re4jcy0/ << in this example (and above) I'm manually setting :hover and .hover because I've used a default F6 CSS build which has a set :hover state but if you have already set :hover (e.g. to green) you don't need to re-set it.

0
votes

Use css. Find the style of the hovered over button and either make an :hover pseudo class and apply the style that way or you can use javascript to add a class to the element that will have the exact css as the hovered over button.

.element:hover{ add styles here }

or

var element=document.getElementByClassName('.className');

element.addClass('.classToAdd');