foundation-sites-5/spec/dropdown/pips.html

**This package is only for versions 5 and earlier of Foundation. As of version 6, the package has a new name: `foundation-sites`.**

<!-- to test this correctly, set the window width to 650 -->
<div class="row" style="max-width:650px">
  <div class="small-12 columns">
    <p>
    <a href="#" style="width:20%" class="button" data-options="" data-dropdown="left" aria-controls="left" aria-expanded="false">left</a>
    <span style="display:inline-block;width:55%">&nbsp;</span>
    <a href="#" style="width:20%" class="button" data-options="" data-dropdown="right" aria-controls="right" aria-expanded="false">right</a>
    </p>
    <p>
    <a href="#" style="width:20%" class="button" data-options="pip:center" data-dropdown="leftCenterPip" aria-controls="leftCenterPip" aria-expanded="false">left</a>
    <span style="display:inline-block;width:55%">&nbsp;</span>
    <a href="#" style="width:20%" class="button" data-options="pip:center" data-dropdown="rightCenterPip" aria-controls="rightCenterPip" aria-expanded="false">right</a>
    </p>
    <p>
    <a href="#" class="button expand" data-options="pip:center" data-dropdown="largeButton" aria-controls="largeButton" aria-expanded="false">largeButton</a>
    </p>
    <p>
    <span style="display:inline-block;width:30%">&nbsp;</span>
    <a href="#" class="button" data-dropdown="trigRight" aria-controls="trigRight" aria-expanded="false">trigRight</a>
    </p>
    <div id="dropdowns">
<ul id="right" 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>
<ul id="left" 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>
<ul id="rightCenterPip" 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>
<ul id="leftCenterPip" 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>
<div id="trigRight" class="f-dropdown content medium" data-dropdown-content aria-hidden="true" tabindex="-1">
  <h4>Title</h4>
  <p>Some text that people will think is awesome! Some text that people will think is awesome! Some text that people will think is awesome!</p>
  <img width="300" height="300" src="nonexistent.jpg" alt="a flying comment">
  <p>More test.</p>
</div>
<ul id="largeButton" 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>
    </div>
  </div>
</div>