Question

伙计们我想创建一个类似于下拉菜单的元素/ div，但唯一不同的是它位于窗口的右边缘或左边缘。单击此元素时，该元素应滑出。我没有代码可以处理它。只有CSS！

Answer 1

你走了。根据自己的喜好调整：

HTML ：

<div id="peek">Here I am</div>

CSS ：

html, body {
    height     : 100%;
    width      : 100%;
    overflow-x : hidden;
}
#peek {
    height           : 100%;
    width            : 400px;
    float            : right;
    position         : relative;
    left             : 360px;
    background-color : pink;
}

JS ：

$('#peek').on('click', function(){
  var $this = $(this);
  if ($this.hasClass('open')) {
    $this.animate({
      left : '360px'
    }, 500).removeClass('open');
  } else {
    $this.animate({
      left : 0
    }, 500).addClass('open');
  }
});

演示：http://jsfiddle.net/pTRr7/

Answer 2

我用Google搜索并在Usabilitypost dot com上找到了代码段。这是代码......

<div id="slideout">
      <img src="feedback.png" alt="Feedback" />
      <div id="slideout_inner">
        [form code goes here]
      </div>
</div>

CSS：

#slideout {
  position: fixed;
  top: 40px;
  left: 0;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
#slideout_inner {
  position: fixed;
  top: 40px;
  left: -250px;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
#slideout:hover {
  left: 250px;
}
#slideout:hover #slideout_inner {
  left: 0;
}

隐藏的div在右侧或左侧，单击时滑出

2 个答案: