使用CSS和HTML左右兩側的窗格

Question

我喜歡創建一個站點，可以在左側或右側打開一個Sidepane。我不擅長JavaScript（我也不喜歡它），所以我更喜歡使用純CSS和HTML的解決方案。 我發現了一個網站，做那種正是我想要的，但使用JS：

http://www.huntand.co/

你知道有什麼好的解決辦法？

Answer 1

儘管我不同意你在學習方面的理念，但可以使用CSS完成雙重疼痛解決方案。雖然不要指望點燃任何點擊事件（你應該嘗試學習JS）。至少要努力。

HTML：

<div class="container"> 
    <div class="col left"></div> 
    <div class="col right"></div> 
</div> 

CSS：

html,body{ 
    margin:0; 
    height:100%; 
    overflow:hidden; 
} 
.container{ 
    height:100%; 
    width:100%; 
    background:#F8F8F8; 
    position:relative; 
} 
.col{ 
    height:100%; 
    width:60%; 
    min-width:40px; 
    position:absolute; 
    top:0; 
    transition: 1s ease; 
} 
.left{ 
    background:#888; 
    left:-50%; 
} 
.right{ 
    background:#222; 
    right:-50%; 

} 
.right:hover{ 
    right:0; 
} 
.left:hover{ 
    left:0; 
} 

例子：CodePen