CODEWITHSUNDEEP
csshtml
Sagar Guhe
Sagar Guhe

Reputation: 1106

The hidden div either on right or left and slide out when clicked

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!

Upvotes: 1

Views: 9121

Answers (2)

Sagar Guhe
Sagar Guhe

Reputation: 1106

I Googled and found the code snippet on Usabilitypost dot com. Here is the code...

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

Upvotes: 1

SeanCannon
SeanCannon

Reputation: 77986

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/

Upvotes: 4

Related Questions