menu

介绍

增加下拉列表在到按钮上,确保data-activates属性匹配<ul>标签的id

你可以增加分隔线通过<li class="divider"></li>标签。

单击我

  <!-- Dropdown Trigger -->
  <a class='dropdown-button btn' href='#' data-activates='dropdown1'>单击我</a>

  <!-- Dropdown Structure -->
  <ul id='dropdown1' class='dropdown-content'>
    <li><a href="#!">一</a></li>
    <li><a href="#!">二</a></li>
    <li class="divider"></li>
    <li><a href="#!">三</a></li>
  </ul>
        

选项

选项名称 描述
induration 下拉列表显示转换的时间(毫秒)。 默认: 300
outduration 下拉列表隐藏转换的时间(毫秒)。 默认: 225
constrainwidth 如果是true,限制下拉列表的宽度。 默认: true
hover 如果为true,悬浮显示下拉列表。默认: false
gutter 定义距离边缘的空隙。 默认: 0
beloworigin 如果是true,下拉列表在触发的下方显示。默认: false
alignment 定义菜单的对齐方式。默认: 'left'
stoppropagation 如果是true,停止响应单击引起的下拉事件。 默认: false

要使用这些内联,你必须将它们添加为数据属性。如果你想要更多的动态控制,你可以使用下面的jQuery插件定义。


  <a class='dropdown-button btn' data-beloworigin="true" href='#' data-activates='dropdown1'>Drop Me!</a>
        

jQuery插件初始化

如果你想动态的创建下拉列表,初始化时必须的。


  $('.dropdown-button').dropdown({
      inDuration: 300,
      outDuration: 225,
      constrain_width: false, // Does not change width of dropdown to that of the activator
      hover: true, // Activate on hover
      gutter: 0, // Spacing from edge
      belowOrigin: false, // Displays dropdown below the button
      alignment: 'left' // Displays dropdown with edge aligned to the left of button
    }
  );
        

你也可以通过程序打开下拉菜单,下面的代码可以使下拉列表展开:


  $('.dropdown-button').dropdown('open');
        

你也可以通过程序关闭下拉菜单:


  $('.dropdown-button').dropdown('close');