隱藏的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

我谷歌搜索並找到Usabilitypost點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; 
}