親要素が影響を受けていません

Question

スライダーハンバーガーメニューを作成しようとしていますが、チェックボックス（アイコン）をオンにするとdivを左に移動できません。次のHTML：

<div class="nav"> 
    <div class="container"> 
     <img src="{{ asset('assets/images/user.jpg') }}"> 
     <a href="#">Sameer Manek</a> 
    </div> 
</div> 
<div class="window"> 
    <input type="checkbox" id="nav-trigger" class="nav-trigger" /> 
    <label for="nav-trigger"><i class="fa fa-bars"></i></label> 
    {% block main %}{% endblock %} 
</div> 

とCSS：

.nav-trigger:checked + label { 
    left: 215px; 
} 

.nav-trigger:checked ~ .window { 
    background-color: transparent; 
    left: 200px; 
    box-shadow: 0 0 5px 5px rgba(0,0,0,0.5); 
} 
.nav-trigger + label, .window { 
    transition: left 0.2s; 
} 

第一と最後のCSSが適切に適用され、ラベルが現在の位置から左に移動するが、DIV .windowはしていません

Answer 1

チルダ「~」は親セレクタ（see this question and answers）ではなく、CSSで親セレクタ現在存在しない（see this question and answersが。）

親要素を選択するにはjavascriptを使用する必要があります。すでにjQueryを使用している場合は、jQueryを使用すると簡単になります。

Answer 2

~はDOMの親要素に影響しないため、次のCSSは機能しません。あなたは絶対にCSSで純粋なタスクを達成することができない場合を除き

.nav-trigger:checked ~ .window { } 

私は事にJavaScriptを追加しないでしょう。あなたのケースでは、非常に小さなHTML変更は、物事を純粋なCSSにすることを可能にします。

.nav-triggerチェックボックスと.windowがDOM内で同じレベルになるようにHTMLを配置する必要があります。

HTMLの変更

<input type="checkbox" id="nav-trigger" class="nav-trigger" /> 
<label for="nav-trigger"><i class="fa fa-bars"></i></label> 

<div class="window">  
    <!-- window contents here --> 
</div> 

CSSの変更

translateを使用すると、常に画面の周りに何かを移動するleftを使用してよりスムーズになります。 translateを使用すると、ハードウェアアクセラレーションが強制されるため、いいです。あなたのUIはネイティブアプリに似ています。これはいつもあなたが望むものです。

.nav-trigger:checked ~ .window { 
    ... 
    transform: translateX(200px); /* swapped 'left' for 'transform' */ 
} 
.nav-trigger + label, .window { 
    transition: transform 0.2s; /* swapped 'left' for 'transform' */ 
} 

デモ

http://codepen.io/antibland/pen/vGzBRm?editors=1100