クリック時の純粋なCSS右手のスライドアウトインターフェイス

Question

私は、CSS、NO Javascriptのいずれかを使用して右手のタブ/スライダを作成しようとしています。私の最初の作業は、ここにあるサンプルコードに基づいています：Pure CSS Slide-out Interface唯一の問題は、ホバーに基づいており、小型メディアデバイスには適していません。私はそれを代わりにクリックを介して動作するように再コードしようとしています。私は近づいていますが、それはまだうまくいきません。何か案は？

CSS

<style> 
    #slideout { 
     /* position: absolute; */ 
     position: fixed; 
     top: 100px; 
     right: 0; 
     width: 35px; 
     padding: 12px 0; 
     text-align: center; 
     background: #6DAD53; 
     color: #fff; 
     cursor:pointer; 
     -webkit-transition-duration: 0.3s; 
     -moz-transition-duration: 0.3s; 
     -o-transition-duration: 0.3s; 
     transition-duration: 0.3s; 
     -webkit-border-radius: 5px 0 0 5px; 
     -moz-border-radius: 5px 0 0 5px; 
     border-radius: 5px 0 0 5px; 
    } 
    #slideout_inner { 
     position: fixed; 
     top: 100px; 
     right: -250px; 
     background: #6DAD53; 
     width: 200px; 
     padding: 25px; 
     height: 130px; 
     cursor:auto; 
     -webkit-transition-duration: 0.3s; 
     -moz-transition-duration: 0.3s; 
     -o-transition-duration: 0.3s; 
     transition-duration: 0.3s; 
     -webkit-border-radius: 0 0 0 5px; 
     -moz-border-radius: 0 0 0 5px; 
     border-radius: 0 0 0 5px; 
    } 
    #slideout_inner textarea { 
     width: 190px; 
     height: 100px; 
     margin-bottom: 6px; 
    } 
    #showblock:checked + #slideout{right: 250px;} 
    #showblock{display:none;} 
</style> 

HTML

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" charset="utf-8"> 
<div id="slideout"> 
    <input type="checkbox" id="showblock"> 
    <label id="slideout_tab" for="showblock" title="Admin Slider"> 
     <i class="fa fa-cogs fa-spin"></i> 
    </label> 
    <div id="slideout_inner"> 
     <form> 
      <textarea></textarea> 
      <input type="submit" value="Post feedback"></input> 
     </form> 
    </div> 
</div> 

jsfiddle

Answer 1

ここに私が最後に取り組んだことがあります。 +セレクタが次の兄弟でしか使えないことを理解するのを助けてくれた@ skyline3000にありがとうございました。これは私の入力タグの位置を変更する必要があることを理解するための鍵でした。

CSS

<style> 
    #slideout { 
     /* position: absolute; */ 
     position: fixed; 
     top: 100px; 
     right: 0; 
     width: 35px; 
     -webkit-transition-duration: 0.3s; 
     -moz-transition-duration: 0.3s; 
     -o-transition-duration: 0.3s; 
     transition-duration: 0.3s; 
    } 
    #slideout_tab { 
     position: relative; 
     top: 0; 
     left: 0; 
     padding: 12px 6px 12px 12px; 
     text-align: center; 
     background: #86B135; 
     color: #fff; 
     cursor:pointer; 
     -webkit-border-radius: 5px 0 0 5px; 
     -moz-border-radius: 5px 0 0 5px; 
     border-radius: 5px 0 0 5px; 
    } 
    #slideout_inner { 
     position: absolute; 
     top: -50px; 
     left: 35px; 
     background: #86B135; 
     width: 220px; 
     padding: 15px; 
     height: 200px; 
     cursor:auto; 
     -webkit-border-radius: 5px 0 0 5px; 
     -moz-border-radius: 5px 0 0 5px; 
     border-radius: 5px 0 0 5px; 
    } 
    #showblock:checked + #slideout{right: 250px;} 
    #showblock{display:none;} 
</style> 

HTML

<input type="checkbox" id="showblock"> 
<div id="slideout"> 
    <label id="slideout_tab" for="showblock" title="Admin Slider"> 
     <i class="fa fa-cogs fa-spin"></i> 
    </label> 
    <div id="slideout_inner"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. In accumsan gravida arcu, eget elementum tellus condimentum ac. Nullam aliquam sem condimentum, dictum mi id, feugiat ex. 
    </div> 
</div> 

jsfiddle

Answer 2

+セレクタは、あなたがそれを使用しようとしているように見える方法ですnext sibling selector、ない親セレクタです。残念ながら、there is no parent or previous sibling selector in CSS

この行：コードは#showblockから次の兄弟であるのid slideoutを持つ要素を探しているので

#showblock:checked + #slideout{right: 250px;} 

は、実際には何もしません。純粋なCSSでこれを行うには、HTML構造を変更する必要があります。また、チェックボックスはdisplay:noneに設定されていますので、ユーザーがクリックしてスライドアウト状態を表示することはできません。