下拉图层

下拉样式

下拉图层为悬浮或点击时，下方弹出层的效果。

    <div class="drop">
      <button class="button">下拉图层</button>
      <div class="dropdown padding bg-white border radius">
        图层内容
      </div>
    </div>
  

触发对象

除了上一示例悬浮显示效果外，还可以指定触发元素显示下拉图层，当指定元素含属性data-hover="drop"或data-click="drop"时，可在元素上悬浮或击显示下拉图层。

    <div class="drop drop-toggle">
      <button class="button" data-hover="drop">悬浮显示</button>
      <div class="dropdown padding bg-white border radius">
        图层内容
      </div>
    </div>

    <div class="drop drop-toggle">
      <div class="button-group">
        <button class="button">右侧悬浮显示</button>
        <button class="button button-toggle" data-hover="drop"><i class="icon-down"></i></button>
      </div>
      <div class="dropdown padding bg-white border radius">
        图层内容
      </div>
    </div>

    <div class="drop drop-toggle">
      <button class="button" data-click="drop">点击显示</button>
      <div class="dropdown padding bg-white border radius">
        图层内容
      </div>
    </div>

    <div class="drop drop-toggle">
      <div class="button-group">
        <button class="button">右侧点击显示</button>
        <button class="button button-toggle" data-click="drop"><i class="icon-down"></i></button>
      </div>
      <div class="dropdown padding bg-white border radius">
        图层内容
      </div>
    </div>
  

显示位置

默认的下拉效果为左侧对齐、向下，同时也可以叠加向上.drop-up及右侧对齐.drop-right改变显示的效果。

向上图层

    <div class="drop drop-up">
      <button class="button">向上图层</button>
      <div class="dropdown padding bg-white border radius">
        图层内容
      </div>
    </div>
  

右侧对齐

    <div class="drop drop-up drop-right">
      <button class="button">右侧图层</button>
      <div class="dropdown padding bg-white border radius">
        图层内容
      </div>
    </div>