css - 隐藏的 div 位于右侧或左侧，单击时滑出

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;
}