CODEWITHSUNDEEP
jquerydrop-down-menuzurb-foundation
LeeTee
LeeTee

Reputation: 6601

Foundation 5 - change direction of dropdown with JQuery for small to medium screens

I have implemented a left hand menu which consists of multiple dropdowns which align to the right, so its like a fly out menu. On a large screen this works fine. On a small screen Foundation automatically changes the dropdown to align to the bottom, which also works fine.

However, on a medium screen ie, tablet, the dropdown still tries to align to the right but the majority of it is off screen and cannot be selected. I would therefore like to have it so that the dropdown automatically aligns to the bottom on a small and medium screen.

How can I do this with JQuery?

<ul class="side-nav nav-bar vertical">
<li>
<a href="#" data-options="is_hover:true;align:right;" data-dropdown="drop_2464272">Components</a>
<ul id="drop_2464272" class="small f-dropdown" data-dropdown-content>
<li> <a href="#">Accessories for tower cases</a></li>
<li> <a href="#">Cooling</a></li></ul>
</li> 
</ul>

I have tried the following bt nothing happens:

 $(".side-nav").data('options', "is_hover:true;align:bottom;");

Upvotes: 0

Views: 2107

Answers (2)

mouhammed
mouhammed

Reputation: 954

Live demo : http://codepen.io/mouhammed/pen/zIHjJ

The dropdown is shown at the bottom on medium device. PS : If you test from desktop by resizing browser window, you need to refresh after each breakpoint. Foundation js must be called after your custom jQuery.

HTML :

<ul class="side-nav nav-bar vertical">
  <li>
    <a href="#" data-options="align:right;is_hover:true;" data-dropdown="drop_2464272" class="button showDropdown">Components</a>
    <ul id="drop_2464272" class="small f-dropdown" data-dropdown-content>
      <li> <a href="#">Accessories for tower cases</a></li>
      <li> <a href="#">Cooling</a></li>
    </ul>
  </li>
  <li>
    <a href="#" data-options="align:right;is_hover:true;" data-dropdown="drop_2464273" class="button showDropdown">Components</a>
    <ul id="drop_2464273" class="small f-dropdown" data-dropdown-content>
      <li> <a href="#">Accessories for tower cases</a></li>
      <li> <a href="#">Cooling</a></li>
    </ul>
  </li>
</ul>

JS :

var mq = window.matchMedia( "(min-width: 40.063em) and (max-width: 64em)" );
if (mq.matches) {
  var buttons = document.getElementsByClassName('showDropdown');
  for (var i = 0; i < buttons.length; ++i) {
    var button = buttons[i];  
    button.setAttribute("data-options","align:bottom;is_hover:true;");
  }

}
$(document).foundation();

Upvotes: 1

mpgn
mpgn

Reputation: 7251

A solution wihtout adding more JS, only using CSS property of Foundation with Visibilty Class

To align the dropdown content to the right for large screen and more, then i use the class show-for-large-up.

To align the dropdown content to the bottom for medium and small screen, then i use the class hide-for-large-up

Full code : 

<div class="show-for-large-up">
    <a href="#" data-dropdown="drop1" data-options="align:right;" class="button">Has Dropdown</a>

</div>

<div class="hide-for-large-up">
    <a href="#" data-dropdown="drop1" data-options="align:bottom;" class="button">Has Dropdown</a>
</div>



<ul id="drop1" class="f-dropdown" data-dropdown-content>
    <li><a href="#">This is a link</a></li>
    <li><a href="#">This is another</a></li>
    <li><a href="#">Yet another</a></li>
</ul>

LIVE EXAMPLE

Upvotes: 2

Related Questions