tryfoundation_dropdown_directions 在线代码实例

 <br><br><!-- Add <br> elements to enable top dropdown -->

<h2>下拉菜单方向</h2>
<a href="#" data-dropdown="id01" data-options="align:right" class="button dropdown">右边</a>
<ul id="id01" data-dropdown-content="" class="f-dropdown">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
</ul>

<a href="#" data-dropdown="id02" data-options="align:top" class="button dropdown">顶部</a>
<ul id="id02" data-dropdown-content="" class="f-dropdown">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
</ul>

<a href="#" data-dropdown="id03" data-options="align:bottom" class="button dropdown">底部</a>
<ul id="id03" data-dropdown-content="" class="f-dropdown">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
</ul>

<a href="#" data-dropdown="id04" data-options="align:left" class="button dropdown">左边</a>
<ul id="id04" data-dropdown-content="" class="f-dropdown">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
</ul>

<!-- Initialize Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>