Question

Guys i want to create an element/div which is something like drop-down menu, but only difference is that it is positioned at either right or left edge of window. This element should slide out when clicked on it. I don’t have code to work on it. Only CSS!

Answer 1

Here you go. Tweak to your liking:

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

Demo: http://jsfiddle.net/pTRr7/