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

私はグーグルで検索し、Usabilitypostdotcomでコードスニペットを見つけました。これがコードです...

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