アダプティブメニューアプローチ

レスポンシブデザインの作業を開始すると、低解像度画面のナビゲーションメニューの変更をより適切に処理する方法に関するさまざまな手法に直面します。 可能性は無限に思えます。 したがって、4つの主要なアプローチとその利点と欠点を紹介します。 それらの3つはCSSのみを使用して作成され、1つは少しのJavaScriptを使用して作成されます。

はじめに

この記事で紹介するコードでは、ブラウザーのプレフィックスを使用していないため、スタイルコードは読みやすく、理解しやすいままです。 より複雑な例ではSCSSを使用します。 各例はCodePen Webサイトで入手でき、コンパイルされたCSSを見ることができます。



この記事のすべてのアプローチでは、単純なHTMLコードを使用しています。これを「基本メニュー」と呼びます。 ロール属性は 、特定のタイプを示すために使用されます：水平メニュー（全水平）、ドロップダウンリスト（選択）、ドロップダウンメニュー（カスタムドロップダウン）、およびキャンバス。

<nav role=""> <ul> <li><a href="#">Stream</a></li> <li><a href="#">Lab</a></li> <li><a href="#">Projects</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

スタイルについては、すべてのオプションに同じメディアクエリを使用します。

 @media screen and (max-width: 44em) { }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

1.水平メニュー

最も簡単な方法は、要素のリストをページ全体の幅にするだけでよいためです。

 <nav role="full-horizontal"> <ul> <li><a href="#">Stream</a></li> <li><a href="#">Lab</a></li> <li><a href="#">Projects</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 @media screen and (max-width: 44em) { nav[role="full-horizontal"] { ul > li { width: 100%; } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

追加の設計では、小さな解像度の画面では次のようになります。

メリット

• JavaScriptは不要です
• 追加のマークアップなし
• シンプルなスタイルのコード

短所

• 画面スペースを取りすぎている

水平メニューの例は 、CodePen Webサイトで見ることができます。

2.ドロップダウンリスト

このアプローチでは、ベースメニューが非表示になり、代わりにドロップダウンリストが表示されます。



この効果を実現するには、基本的なマークアップにドロップダウンリストを追加する必要があります。 それが機能するためには、 onchangeイベントが発生したときにwindow.location .hrefの値を変更するJavaScriptコードを追加する必要があります

 <nav role="select"> <!-- basic menu goes here --> <select onchange="if (this.value) window.location.href = this.value;"> <option value="#">Stream</option> <option value="#">Lab</option> <option value="#">Projects</option> <option value="#">About</option> <option value="#">Contact</option> </select> </nav>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

大画面でリストを非表示にします。

 nav[role="select"] { > select { display:none; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

小さな画面では、ベースメニューを非表示にし、ドロップダウンリストを表示します。 これがメニューであることをユーザーが理解できるようにするために、「Menu」というテキストの擬似要素を追加します

 @media screen and (max-width: 44em) { nav[role="select"] { ul { display: none; } select { display: block; width: 100%; } &:after { position: absolute; content: "Menu"; right: 0; bottom: -1em; } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

追加の設計では、小さな解像度の画面では次のようになります。

メリット

• 多くのスペースをとらない
• ネイティブコントロールを使用

短所

• 動作するにはJavaScriptが必要です
• コンテンツの重複が発生する
• すべてのブラウザでドロップダウンリストのスタイルを設定することはできません

このメニューの例 。

3.カスタムドロップダウンメニュー

このアプローチでは、小さな画面では基本メニューが非表示になり、代わりに入力とラベルが表示されます（ チェックボックスを使用したハックが使用されます ）。 ユーザーがラベルをクリックすると、その下にメインメニューが表示されます。

 <nav role="custom-dropdown"> <!-- Advanced Checkbox Hack (see description below) --> <!-- basic menu goes here --> </nav>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

チェックボックスを使用したハックの使用に関する問題

このソリューションの2つの主な問題：

1. Safariのモバイルバージョン（iOS <6.0）では機能しません 。 バグが原因で、入力が機能するためにiOS <6.0のブラウザーでラベルをクリックすることはできません。 空の onclick イベントをラベルに追加して解決しました
2. 4.1.2以下のAndroid OSバージョンのメインブラウザーでは動作しません。 むかしむかし、WebKitエンジンにバグがあり、 +
   
   
   
   および~
   
   
   
   セレクターの組み合わせで擬似クラスを使用できませんでした

 h1 ~ p { color: black; } h1:hover ~ p { color: red; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

チェックボックスを使用したハックでは、 ~



セレクターを使用した:checked



疑似クラスを使用したため、これは効果がありませんでした。 また、このバグはWebKit 535.1（Chrome 13）およびAndroid 4.1.2用の実際のWebKit 534.30では修正されていませんが、Androidデバイスではハックが機能しませんでした。



最善の解決策は、タグのWebKitブラウザーにのみアニメーションを使用することです .



:



<!-- Fix for iOS --> <input type="checkbox" id="menu"> <label for="menu" onclick></label>





/* Fix for Android */ body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } /* default checkbox */ input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; } label { cursor: pointer; user-select: none; }





label:



nav[role="custom-dropdown"] { label { display: none; } }





label. , , "≡" label ( "\2261", ). input, .



@media screen and (max-width: 44em) { nav[role="custom-dropdown"] { ul { display: none; height: 100%; } label { position: relative; display: block; width: 100%; } label:after { position: absolute; content: "\2261"; } input:checked ~ ul { display: block; > li { width: 100%; } } } }





:











JavaScript



(input / label) HTML

.



4. Canvas

, , input label 3. label, . 80% 20% ( , CSS)



<input type="checkbox" id="menu"> <label for="menu" onclick></label> <!-- basic menu goes here --> <div class="content"> <!-- content goes here --> </div>





label.

label { position: absolute; left: 0; display: none; }





label input. . , , "≡" label ( "\2261", ).



@media screen and (max-width: 44em) { $menu_width: 20em; body { overflow-x: hidden; } nav[role="off-canvas"] { position: absolute; left: -$menu_width; width: $menu_width; ul > li { width: 100%; } } label { display: block; } label:after { position: absolute; content: "\2261"; } input:checked ~ nav[role="off-canvas"] { left: 0; } input:checked ~ .content { margin-left: $menu_width + .5em; margin-right: -($menu_width + .5em); } }







:











JavaScript Facebook / Google+





(input / label) HTML body



.



IE?

: ! , IE8 , , .

  . 
      

        
        
        
      

     
      

        
        
        
      

            : 
      

        
        
        
      

     
      

        
        
        
      

     <!-- Fix for iOS --> <input type="checkbox" id="menu"> <label for="menu" onclick></label>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     /* Fix for Android */ body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } /* default checkbox */ input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; } label { cursor: pointer; user-select: none; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

          label: 
      

        
        
        
      

     
      

        
        
        
      

     nav[role="custom-dropdown"] { label { display: none; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

              label.    ,   ,      "≡"  label (    "\2261",     ).     input,          . 
      

        
        
        
      

     
      

        
        
        
      

     @media screen and (max-width: 44em) { nav[role="custom-dropdown"] { ul { display: none; height: 100%; } label { position: relative; display: block; width: 100%; } label:after { position: absolute; content: "\2261"; } input:checked ~ ul { display: block; > li { width: 100%; } } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

          : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

                JavaScript 
      

        
        
        
      

      
      

        
        
        
      

        (input / label)   HTML 
      

        
        
        
      

         . 
      

        
        
        
      

     
      

        
        
        
      

     4. Canvas 
      

        
        
        
      

       ,   ,      input  label    3.     label,        .       80%   20%  (     ,   CSS) 
      

        
        
        
      

     
      

        
        
        
      

     <input type="checkbox" id="menu"> <label for="menu" onclick></label> <!-- basic menu goes here --> <div class="content"> <!-- content goes here --> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

          label. 
      

        
        
        
      

     label { position: absolute; left: 0; display: none; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

                label  input.            .    ,   ,        "≡"  label (   "\2261",     ). 
      

        
        
        
      

     
      

        
        
        
      

     @media screen and (max-width: 44em) { $menu_width: 20em; body { overflow-x: hidden; } nav[role="off-canvas"] { position: absolute; left: -$menu_width; width: $menu_width; ul > li { width: 100%; } } label { display: block; } label:after { position: absolute; content: "\2261"; } input:checked ~ nav[role="off-canvas"] { left: 0; } input:checked ~ .content { margin-left: $menu_width + .5em; margin-right: -($menu_width + .5em); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     
      

        
        
        
      

               : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

                JavaScript   Facebook / Google+  
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

        (input / label)   HTML    body     
      

        
        
        
      

     
      

        
        
        
      

        . 
      

        
        
        
      

     
      

        
        
        
      

         IE? 
      

        
        
        
      

          :      !   ,    IE8        , ,        .
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

.



:



<!-- Fix for iOS --> <input type="checkbox" id="menu"> <label for="menu" onclick></label>





/* Fix for Android */ body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } /* default checkbox */ input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; } label { cursor: pointer; user-select: none; }





label:



nav[role="custom-dropdown"] { label { display: none; } }





label. , , "≡" label ( "\2261", ). input, .



@media screen and (max-width: 44em) { nav[role="custom-dropdown"] { ul { display: none; height: 100%; } label { position: relative; display: block; width: 100%; } label:after { position: absolute; content: "\2261"; } input:checked ~ ul { display: block; > li { width: 100%; } } } }





:











JavaScript



(input / label) HTML

.



4. Canvas

, , input label 3. label, . 80% 20% ( , CSS)



<input type="checkbox" id="menu"> <label for="menu" onclick></label> <!-- basic menu goes here --> <div class="content"> <!-- content goes here --> </div>





label.

label { position: absolute; left: 0; display: none; }





label input. . , , "≡" label ( "\2261", ).



@media screen and (max-width: 44em) { $menu_width: 20em; body { overflow-x: hidden; } nav[role="off-canvas"] { position: absolute; left: -$menu_width; width: $menu_width; ul > li { width: 100%; } } label { display: block; } label:after { position: absolute; content: "\2261"; } input:checked ~ nav[role="off-canvas"] { left: 0; } input:checked ~ .content { margin-left: $menu_width + .5em; margin-right: -($menu_width + .5em); } }







:











JavaScript Facebook / Google+





(input / label) HTML body



.



IE?

: ! , IE8 , , .

  . 
      

        
        
        
      

     
      

        
        
        
      

            : 
      

        
        
        
      

     
      

        
        
        
      

     <!-- Fix for iOS --> <input type="checkbox" id="menu"> <label for="menu" onclick></label>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     /* Fix for Android */ body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } /* default checkbox */ input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; } label { cursor: pointer; user-select: none; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

          label: 
      

        
        
        
      

     
      

        
        
        
      

     nav[role="custom-dropdown"] { label { display: none; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

              label.    ,   ,      "≡"  label (    "\2261",     ).     input,          . 
      

        
        
        
      

     
      

        
        
        
      

     @media screen and (max-width: 44em) { nav[role="custom-dropdown"] { ul { display: none; height: 100%; } label { position: relative; display: block; width: 100%; } label:after { position: absolute; content: "\2261"; } input:checked ~ ul { display: block; > li { width: 100%; } } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

          : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

                JavaScript 
      

        
        
        
      

      
      

        
        
        
      

        (input / label)   HTML 
      

        
        
        
      

         . 
      

        
        
        
      

     
      

        
        
        
      

     4. Canvas 
      

        
        
        
      

       ,   ,      input  label    3.     label,        .       80%   20%  (     ,   CSS) 
      

        
        
        
      

     
      

        
        
        
      

     <input type="checkbox" id="menu"> <label for="menu" onclick></label> <!-- basic menu goes here --> <div class="content"> <!-- content goes here --> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

          label. 
      

        
        
        
      

     label { position: absolute; left: 0; display: none; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

                label  input.            .    ,   ,        "≡"  label (   "\2261",     ). 
      

        
        
        
      

     
      

        
        
        
      

     @media screen and (max-width: 44em) { $menu_width: 20em; body { overflow-x: hidden; } nav[role="off-canvas"] { position: absolute; left: -$menu_width; width: $menu_width; ul > li { width: 100%; } } label { display: block; } label:after { position: absolute; content: "\2261"; } input:checked ~ nav[role="off-canvas"] { left: 0; } input:checked ~ .content { margin-left: $menu_width + .5em; margin-right: -($menu_width + .5em); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     
      

        
        
        
      

               : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

                JavaScript   Facebook / Google+  
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

        (input / label)   HTML    body     
      

        
        
        
      

     
      

        
        
        
      

        . 
      

        
        
        
      

     
      

        
        
        
      

         IE? 
      

        
        
        
      

          :      !   ,    IE8        , ,        .
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

.



:



<!-- Fix for iOS --> <input type="checkbox" id="menu"> <label for="menu" onclick></label>





/* Fix for Android */ body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } /* default checkbox */ input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; } label { cursor: pointer; user-select: none; }





label:



nav[role="custom-dropdown"] { label { display: none; } }





label. , , "≡" label ( "\2261", ). input, .



@media screen and (max-width: 44em) { nav[role="custom-dropdown"] { ul { display: none; height: 100%; } label { position: relative; display: block; width: 100%; } label:after { position: absolute; content: "\2261"; } input:checked ~ ul { display: block; > li { width: 100%; } } } }





:











JavaScript



(input / label) HTML

.



4. Canvas

, , input label 3. label, . 80% 20% ( , CSS)



<input type="checkbox" id="menu"> <label for="menu" onclick></label> <!-- basic menu goes here --> <div class="content"> <!-- content goes here --> </div>





label.

label { position: absolute; left: 0; display: none; }





label input. . , , "≡" label ( "\2261", ).



@media screen and (max-width: 44em) { $menu_width: 20em; body { overflow-x: hidden; } nav[role="off-canvas"] { position: absolute; left: -$menu_width; width: $menu_width; ul > li { width: 100%; } } label { display: block; } label:after { position: absolute; content: "\2261"; } input:checked ~ nav[role="off-canvas"] { left: 0; } input:checked ~ .content { margin-left: $menu_width + .5em; margin-right: -($menu_width + .5em); } }







:











JavaScript Facebook / Google+





(input / label) HTML body



.



IE?

: ! , IE8 , , .

  . 
      

        
        
        
      

     
      

        
        
        
      

            : 
      

        
        
        
      

     
      

        
        
        
      

     <!-- Fix for iOS --> <input type="checkbox" id="menu"> <label for="menu" onclick></label>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     /* Fix for Android */ body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } /* default checkbox */ input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; } label { cursor: pointer; user-select: none; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

          label: 
      

        
        
        
      

     
      

        
        
        
      

     nav[role="custom-dropdown"] { label { display: none; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

              label.    ,   ,      "≡"  label (    "\2261",     ).     input,          . 
      

        
        
        
      

     
      

        
        
        
      

     @media screen and (max-width: 44em) { nav[role="custom-dropdown"] { ul { display: none; height: 100%; } label { position: relative; display: block; width: 100%; } label:after { position: absolute; content: "\2261"; } input:checked ~ ul { display: block; > li { width: 100%; } } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

          : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

                JavaScript 
      

        
        
        
      

      
      

        
        
        
      

        (input / label)   HTML 
      

        
        
        
      

         . 
      

        
        
        
      

     
      

        
        
        
      

     4. Canvas 
      

        
        
        
      

       ,   ,      input  label    3.     label,        .       80%   20%  (     ,   CSS) 
      

        
        
        
      

     
      

        
        
        
      

     <input type="checkbox" id="menu"> <label for="menu" onclick></label> <!-- basic menu goes here --> <div class="content"> <!-- content goes here --> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

          label. 
      

        
        
        
      

     label { position: absolute; left: 0; display: none; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

                label  input.            .    ,   ,        "≡"  label (   "\2261",     ). 
      

        
        
        
      

     
      

        
        
        
      

     @media screen and (max-width: 44em) { $menu_width: 20em; body { overflow-x: hidden; } nav[role="off-canvas"] { position: absolute; left: -$menu_width; width: $menu_width; ul > li { width: 100%; } } label { display: block; } label:after { position: absolute; content: "\2261"; } input:checked ~ nav[role="off-canvas"] { left: 0; } input:checked ~ .content { margin-left: $menu_width + .5em; margin-right: -($menu_width + .5em); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     
      

        
        
        
      

               : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

                JavaScript   Facebook / Google+  
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

        (input / label)   HTML    body     
      

        
        
        
      

     
      

        
        
        
      

        . 
      

        
        
        
      

     
      

        
        
        
      

         IE? 
      

        
        
        
      

          :      !   ,    IE8        , ,        .
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

.



:



<!-- Fix for iOS --> <input type="checkbox" id="menu"> <label for="menu" onclick></label>





/* Fix for Android */ body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } /* default checkbox */ input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; } label { cursor: pointer; user-select: none; }





label:



nav[role="custom-dropdown"] { label { display: none; } }





label. , , "≡" label ( "\2261", ). input, .



@media screen and (max-width: 44em) { nav[role="custom-dropdown"] { ul { display: none; height: 100%; } label { position: relative; display: block; width: 100%; } label:after { position: absolute; content: "\2261"; } input:checked ~ ul { display: block; > li { width: 100%; } } } }





:











JavaScript



(input / label) HTML

.



4. Canvas

, , input label 3. label, . 80% 20% ( , CSS)



<input type="checkbox" id="menu"> <label for="menu" onclick></label> <!-- basic menu goes here --> <div class="content"> <!-- content goes here --> </div>





label.

label { position: absolute; left: 0; display: none; }





label input. . , , "≡" label ( "\2261", ).



@media screen and (max-width: 44em) { $menu_width: 20em; body { overflow-x: hidden; } nav[role="off-canvas"] { position: absolute; left: -$menu_width; width: $menu_width; ul > li { width: 100%; } } label { display: block; } label:after { position: absolute; content: "\2261"; } input:checked ~ nav[role="off-canvas"] { left: 0; } input:checked ~ .content { margin-left: $menu_width + .5em; margin-right: -($menu_width + .5em); } }







:











JavaScript Facebook / Google+





(input / label) HTML body



.



IE?

: ! , IE8 , , .

  . 
      

        
        
        
      

     
      

        
        
        
      

            : 
      

        
        
        
      

     
      

        
        
        
      

     <!-- Fix for iOS --> <input type="checkbox" id="menu"> <label for="menu" onclick></label>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     /* Fix for Android */ body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } /* default checkbox */ input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; } label { cursor: pointer; user-select: none; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

          label: 
      

        
        
        
      

     
      

        
        
        
      

     nav[role="custom-dropdown"] { label { display: none; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

              label.    ,   ,      "≡"  label (    "\2261",     ).     input,          . 
      

        
        
        
      

     
      

        
        
        
      

     @media screen and (max-width: 44em) { nav[role="custom-dropdown"] { ul { display: none; height: 100%; } label { position: relative; display: block; width: 100%; } label:after { position: absolute; content: "\2261"; } input:checked ~ ul { display: block; > li { width: 100%; } } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

          : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

                JavaScript 
      

        
        
        
      

      
      

        
        
        
      

        (input / label)   HTML 
      

        
        
        
      

         . 
      

        
        
        
      

     
      

        
        
        
      

     4. Canvas 
      

        
        
        
      

       ,   ,      input  label    3.     label,        .       80%   20%  (     ,   CSS) 
      

        
        
        
      

     
      

        
        
        
      

     <input type="checkbox" id="menu"> <label for="menu" onclick></label> <!-- basic menu goes here --> <div class="content"> <!-- content goes here --> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

          label. 
      

        
        
        
      

     label { position: absolute; left: 0; display: none; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

                label  input.            .    ,   ,        "≡"  label (   "\2261",     ). 
      

        
        
        
      

     
      

        
        
        
      

     @media screen and (max-width: 44em) { $menu_width: 20em; body { overflow-x: hidden; } nav[role="off-canvas"] { position: absolute; left: -$menu_width; width: $menu_width; ul > li { width: 100%; } } label { display: block; } label:after { position: absolute; content: "\2261"; } input:checked ~ nav[role="off-canvas"] { left: 0; } input:checked ~ .content { margin-left: $menu_width + .5em; margin-right: -($menu_width + .5em); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     
      

        
        
        
      

               : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

                JavaScript   Facebook / Google+  
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

        (input / label)   HTML    body     
      

        
        
        
      

     
      

        
        
        
      

        . 
      

        
        
        
      

     
      

        
        
        
      

         IE? 
      

        
        
        
      

          :      !   ,    IE8        , ,        .
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

.



:



<!-- Fix for iOS --> <input type="checkbox" id="menu"> <label for="menu" onclick></label>





/* Fix for Android */ body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } /* default checkbox */ input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; } label { cursor: pointer; user-select: none; }





label:



nav[role="custom-dropdown"] { label { display: none; } }





label. , , "≡" label ( "\2261", ). input, .



@media screen and (max-width: 44em) { nav[role="custom-dropdown"] { ul { display: none; height: 100%; } label { position: relative; display: block; width: 100%; } label:after { position: absolute; content: "\2261"; } input:checked ~ ul { display: block; > li { width: 100%; } } } }





:











JavaScript



(input / label) HTML

.



4. Canvas

, , input label 3. label, . 80% 20% ( , CSS)



<input type="checkbox" id="menu"> <label for="menu" onclick></label> <!-- basic menu goes here --> <div class="content"> <!-- content goes here --> </div>





label.

label { position: absolute; left: 0; display: none; }





label input. . , , "≡" label ( "\2261", ).



@media screen and (max-width: 44em) { $menu_width: 20em; body { overflow-x: hidden; } nav[role="off-canvas"] { position: absolute; left: -$menu_width; width: $menu_width; ul > li { width: 100%; } } label { display: block; } label:after { position: absolute; content: "\2261"; } input:checked ~ nav[role="off-canvas"] { left: 0; } input:checked ~ .content { margin-left: $menu_width + .5em; margin-right: -($menu_width + .5em); } }







:











JavaScript Facebook / Google+





(input / label) HTML body



.



IE?

: ! , IE8 , , .

.



:



<!-- Fix for iOS --> <input type="checkbox" id="menu"> <label for="menu" onclick></label>





/* Fix for Android */ body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } /* default checkbox */ input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; } label { cursor: pointer; user-select: none; }





label:



nav[role="custom-dropdown"] { label { display: none; } }





label. , , "≡" label ( "\2261", ). input, .



@media screen and (max-width: 44em) { nav[role="custom-dropdown"] { ul { display: none; height: 100%; } label { position: relative; display: block; width: 100%; } label:after { position: absolute; content: "\2261"; } input:checked ~ ul { display: block; > li { width: 100%; } } } }





:











JavaScript



(input / label) HTML

.



4. Canvas

, , input label 3. label, . 80% 20% ( , CSS)



<input type="checkbox" id="menu"> <label for="menu" onclick></label> <!-- basic menu goes here --> <div class="content"> <!-- content goes here --> </div>





label.

label { position: absolute; left: 0; display: none; }





label input. . , , "≡" label ( "\2261", ).



@media screen and (max-width: 44em) { $menu_width: 20em; body { overflow-x: hidden; } nav[role="off-canvas"] { position: absolute; left: -$menu_width; width: $menu_width; ul > li { width: 100%; } } label { display: block; } label:after { position: absolute; content: "\2261"; } input:checked ~ nav[role="off-canvas"] { left: 0; } input:checked ~ .content { margin-left: $menu_width + .5em; margin-right: -($menu_width + .5em); } }







:











JavaScript Facebook / Google+





(input / label) HTML body



.



IE?

: ! , IE8 , , .

.



:



<!-- Fix for iOS --> <input type="checkbox" id="menu"> <label for="menu" onclick></label>





/* Fix for Android */ body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } /* default checkbox */ input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; } label { cursor: pointer; user-select: none; }





label:



nav[role="custom-dropdown"] { label { display: none; } }





label. , , "≡" label ( "\2261", ). input, .



@media screen and (max-width: 44em) { nav[role="custom-dropdown"] { ul { display: none; height: 100%; } label { position: relative; display: block; width: 100%; } label:after { position: absolute; content: "\2261"; } input:checked ~ ul { display: block; > li { width: 100%; } } } }





:











JavaScript



(input / label) HTML

.



4. Canvas

, , input label 3. label, . 80% 20% ( , CSS)



<input type="checkbox" id="menu"> <label for="menu" onclick></label> <!-- basic menu goes here --> <div class="content"> <!-- content goes here --> </div>





label.

label { position: absolute; left: 0; display: none; }





label input. . , , "≡" label ( "\2261", ).



@media screen and (max-width: 44em) { $menu_width: 20em; body { overflow-x: hidden; } nav[role="off-canvas"] { position: absolute; left: -$menu_width; width: $menu_width; ul > li { width: 100%; } } label { display: block; } label:after { position: absolute; content: "\2261"; } input:checked ~ nav[role="off-canvas"] { left: 0; } input:checked ~ .content { margin-left: $menu_width + .5em; margin-right: -($menu_width + .5em); } }







:











JavaScript Facebook / Google+





(input / label) HTML body



.



IE?

: ! , IE8 , , .

• .



:



<!-- Fix for iOS --> <input type="checkbox" id="menu"> <label for="menu" onclick></label>





/* Fix for Android */ body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } /* default checkbox */ input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; } label { cursor: pointer; user-select: none; }





label:



nav[role="custom-dropdown"] { label { display: none; } }





label. , , "≡" label ( "\2261", ). input, .



@media screen and (max-width: 44em) { nav[role="custom-dropdown"] { ul { display: none; height: 100%; } label { position: relative; display: block; width: 100%; } label:after { position: absolute; content: "\2261"; } input:checked ~ ul { display: block; > li { width: 100%; } } } }





:











JavaScript



(input / label) HTML

.



4. Canvas

, , input label 3. label, . 80% 20% ( , CSS)



<input type="checkbox" id="menu"> <label for="menu" onclick></label> <!-- basic menu goes here --> <div class="content"> <!-- content goes here --> </div>





label.

label { position: absolute; left: 0; display: none; }





label input. . , , "≡" label ( "\2261", ).



@media screen and (max-width: 44em) { $menu_width: 20em; body { overflow-x: hidden; } nav[role="off-canvas"] { position: absolute; left: -$menu_width; width: $menu_width; ul > li { width: 100%; } } label { display: block; } label:after { position: absolute; content: "\2261"; } input:checked ~ nav[role="off-canvas"] { left: 0; } input:checked ~ .content { margin-left: $menu_width + .5em; margin-right: -($menu_width + .5em); } }







:











JavaScript Facebook / Google+





(input / label) HTML body



.



IE?

: ! , IE8 , , .
  
  
  
  
• .



:



<!-- Fix for iOS --> <input type="checkbox" id="menu"> <label for="menu" onclick></label>





/* Fix for Android */ body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } /* default checkbox */ input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; } label { cursor: pointer; user-select: none; }





label:



nav[role="custom-dropdown"] { label { display: none; } }





label. , , "≡" label ( "\2261", ). input, .



@media screen and (max-width: 44em) { nav[role="custom-dropdown"] { ul { display: none; height: 100%; } label { position: relative; display: block; width: 100%; } label:after { position: absolute; content: "\2261"; } input:checked ~ ul { display: block; > li { width: 100%; } } } }





:











JavaScript



(input / label) HTML

.



4. Canvas

, , input label 3. label, . 80% 20% ( , CSS)



<input type="checkbox" id="menu"> <label for="menu" onclick></label> <!-- basic menu goes here --> <div class="content"> <!-- content goes here --> </div>





label.

label { position: absolute; left: 0; display: none; }





label input. . , , "≡" label ( "\2261", ).



@media screen and (max-width: 44em) { $menu_width: 20em; body { overflow-x: hidden; } nav[role="off-canvas"] { position: absolute; left: -$menu_width; width: $menu_width; ul > li { width: 100%; } } label { display: block; } label:after { position: absolute; content: "\2261"; } input:checked ~ nav[role="off-canvas"] { left: 0; } input:checked ~ .content { margin-left: $menu_width + .5em; margin-right: -($menu_width + .5em); } }







:











JavaScript Facebook / Google+





(input / label) HTML body



.



IE?

: ! , IE8 , , .
  
  
  
  
• .



:



<!-- Fix for iOS --> <input type="checkbox" id="menu"> <label for="menu" onclick></label>





/* Fix for Android */ body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } /* default checkbox */ input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; } label { cursor: pointer; user-select: none; }





label:



nav[role="custom-dropdown"] { label { display: none; } }





label. , , "≡" label ( "\2261", ). input, .



@media screen and (max-width: 44em) { nav[role="custom-dropdown"] { ul { display: none; height: 100%; } label { position: relative; display: block; width: 100%; } label:after { position: absolute; content: "\2261"; } input:checked ~ ul { display: block; > li { width: 100%; } } } }





:











JavaScript



(input / label) HTML

.



4. Canvas

, , input label 3. label, . 80% 20% ( , CSS)



<input type="checkbox" id="menu"> <label for="menu" onclick></label> <!-- basic menu goes here --> <div class="content"> <!-- content goes here --> </div>





label.

label { position: absolute; left: 0; display: none; }





label input. . , , "≡" label ( "\2261", ).



@media screen and (max-width: 44em) { $menu_width: 20em; body { overflow-x: hidden; } nav[role="off-canvas"] { position: absolute; left: -$menu_width; width: $menu_width; ul > li { width: 100%; } } label { display: block; } label:after { position: absolute; content: "\2261"; } input:checked ~ nav[role="off-canvas"] { left: 0; } input:checked ~ .content { margin-left: $menu_width + .5em; margin-right: -($menu_width + .5em); } }







:











JavaScript Facebook / Google+





(input / label) HTML body



.



IE?

: ! , IE8 , , .
  
  
  
  

.



:



<!-- Fix for iOS --> <input type="checkbox" id="menu"> <label for="menu" onclick></label>





/* Fix for Android */ body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } /* default checkbox */ input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; } label { cursor: pointer; user-select: none; }





label:



nav[role="custom-dropdown"] { label { display: none; } }





label. , , "≡" label ( "\2261", ). input, .



@media screen and (max-width: 44em) { nav[role="custom-dropdown"] { ul { display: none; height: 100%; } label { position: relative; display: block; width: 100%; } label:after { position: absolute; content: "\2261"; } input:checked ~ ul { display: block; > li { width: 100%; } } } }





:











JavaScript



(input / label) HTML

.



4. Canvas

, , input label 3. label, . 80% 20% ( , CSS)



<input type="checkbox" id="menu"> <label for="menu" onclick></label> <!-- basic menu goes here --> <div class="content"> <!-- content goes here --> </div>





label.

label { position: absolute; left: 0; display: none; }





label input. . , , "≡" label ( "\2261", ).



@media screen and (max-width: 44em) { $menu_width: 20em; body { overflow-x: hidden; } nav[role="off-canvas"] { position: absolute; left: -$menu_width; width: $menu_width; ul > li { width: 100%; } } label { display: block; } label:after { position: absolute; content: "\2261"; } input:checked ~ nav[role="off-canvas"] { left: 0; } input:checked ~ .content { margin-left: $menu_width + .5em; margin-right: -($menu_width + .5em); } }







:











JavaScript Facebook / Google+





(input / label) HTML body



.



IE?

: ! , IE8 , , .

.



:



<!-- Fix for iOS --> <input type="checkbox" id="menu"> <label for="menu" onclick></label>





/* Fix for Android */ body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } /* default checkbox */ input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; } label { cursor: pointer; user-select: none; }





label:



nav[role="custom-dropdown"] { label { display: none; } }





label. , , "≡" label ( "\2261", ). input, .



@media screen and (max-width: 44em) { nav[role="custom-dropdown"] { ul { display: none; height: 100%; } label { position: relative; display: block; width: 100%; } label:after { position: absolute; content: "\2261"; } input:checked ~ ul { display: block; > li { width: 100%; } } } }





:











JavaScript



(input / label) HTML

.



4. Canvas

, , input label 3. label, . 80% 20% ( , CSS)



<input type="checkbox" id="menu"> <label for="menu" onclick></label> <!-- basic menu goes here --> <div class="content"> <!-- content goes here --> </div>





label.

label { position: absolute; left: 0; display: none; }





label input. . , , "≡" label ( "\2261", ).



@media screen and (max-width: 44em) { $menu_width: 20em; body { overflow-x: hidden; } nav[role="off-canvas"] { position: absolute; left: -$menu_width; width: $menu_width; ul > li { width: 100%; } } label { display: block; } label:after { position: absolute; content: "\2261"; } input:checked ~ nav[role="off-canvas"] { left: 0; } input:checked ~ .content { margin-left: $menu_width + .5em; margin-right: -($menu_width + .5em); } }







:











JavaScript Facebook / Google+





(input / label) HTML body



.



IE?

: ! , IE8 , , .

.



:



<!-- Fix for iOS --> <input type="checkbox" id="menu"> <label for="menu" onclick></label>





/* Fix for Android */ body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } /* default checkbox */ input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; } label { cursor: pointer; user-select: none; }





label:



nav[role="custom-dropdown"] { label { display: none; } }





label. , , "≡" label ( "\2261", ). input, .



@media screen and (max-width: 44em) { nav[role="custom-dropdown"] { ul { display: none; height: 100%; } label { position: relative; display: block; width: 100%; } label:after { position: absolute; content: "\2261"; } input:checked ~ ul { display: block; > li { width: 100%; } } } }





:











JavaScript



(input / label) HTML

.



4. Canvas

, , input label 3. label, . 80% 20% ( , CSS)



<input type="checkbox" id="menu"> <label for="menu" onclick></label> <!-- basic menu goes here --> <div class="content"> <!-- content goes here --> </div>





label.

label { position: absolute; left: 0; display: none; }





label input. . , , "≡" label ( "\2261", ).



@media screen and (max-width: 44em) { $menu_width: 20em; body { overflow-x: hidden; } nav[role="off-canvas"] { position: absolute; left: -$menu_width; width: $menu_width; ul > li { width: 100%; } } label { display: block; } label:after { position: absolute; content: "\2261"; } input:checked ~ nav[role="off-canvas"] { left: 0; } input:checked ~ .content { margin-left: $menu_width + .5em; margin-right: -($menu_width + .5em); } }







:











JavaScript Facebook / Google+





(input / label) HTML body



.



IE?

: ! , IE8 , , .

• .



:



<!-- Fix for iOS --> <input type="checkbox" id="menu"> <label for="menu" onclick></label>





/* Fix for Android */ body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } /* default checkbox */ input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; } label { cursor: pointer; user-select: none; }





label:



nav[role="custom-dropdown"] { label { display: none; } }





label. , , "≡" label ( "\2261", ). input, .



@media screen and (max-width: 44em) { nav[role="custom-dropdown"] { ul { display: none; height: 100%; } label { position: relative; display: block; width: 100%; } label:after { position: absolute; content: "\2261"; } input:checked ~ ul { display: block; > li { width: 100%; } } } }





:











JavaScript



(input / label) HTML

.



4. Canvas

, , input label 3. label, . 80% 20% ( , CSS)



<input type="checkbox" id="menu"> <label for="menu" onclick></label> <!-- basic menu goes here --> <div class="content"> <!-- content goes here --> </div>





label.

label { position: absolute; left: 0; display: none; }





label input. . , , "≡" label ( "\2261", ).



@media screen and (max-width: 44em) { $menu_width: 20em; body { overflow-x: hidden; } nav[role="off-canvas"] { position: absolute; left: -$menu_width; width: $menu_width; ul > li { width: 100%; } } label { display: block; } label:after { position: absolute; content: "\2261"; } input:checked ~ nav[role="off-canvas"] { left: 0; } input:checked ~ .content { margin-left: $menu_width + .5em; margin-right: -($menu_width + .5em); } }







:











JavaScript Facebook / Google+





(input / label) HTML body



.



IE?

: ! , IE8 , , .
  
  
  
  
• .



:



<!-- Fix for iOS --> <input type="checkbox" id="menu"> <label for="menu" onclick></label>





/* Fix for Android */ body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } /* default checkbox */ input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; } label { cursor: pointer; user-select: none; }





label:



nav[role="custom-dropdown"] { label { display: none; } }





label. , , "≡" label ( "\2261", ). input, .



@media screen and (max-width: 44em) { nav[role="custom-dropdown"] { ul { display: none; height: 100%; } label { position: relative; display: block; width: 100%; } label:after { position: absolute; content: "\2261"; } input:checked ~ ul { display: block; > li { width: 100%; } } } }





:











JavaScript



(input / label) HTML

.



4. Canvas

, , input label 3. label, . 80% 20% ( , CSS)



<input type="checkbox" id="menu"> <label for="menu" onclick></label> <!-- basic menu goes here --> <div class="content"> <!-- content goes here --> </div>





label.

label { position: absolute; left: 0; display: none; }





label input. . , , "≡" label ( "\2261", ).



@media screen and (max-width: 44em) { $menu_width: 20em; body { overflow-x: hidden; } nav[role="off-canvas"] { position: absolute; left: -$menu_width; width: $menu_width; ul > li { width: 100%; } } label { display: block; } label:after { position: absolute; content: "\2261"; } input:checked ~ nav[role="off-canvas"] { left: 0; } input:checked ~ .content { margin-left: $menu_width + .5em; margin-right: -($menu_width + .5em); } }







:











JavaScript Facebook / Google+





(input / label) HTML body



.



IE?

: ! , IE8 , , .
  
  
  
  

.



:



<!-- Fix for iOS --> <input type="checkbox" id="menu"> <label for="menu" onclick></label>





/* Fix for Android */ body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } /* default checkbox */ input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; } label { cursor: pointer; user-select: none; }





label:



nav[role="custom-dropdown"] { label { display: none; } }





label. , , "≡" label ( "\2261", ). input, .



@media screen and (max-width: 44em) { nav[role="custom-dropdown"] { ul { display: none; height: 100%; } label { position: relative; display: block; width: 100%; } label:after { position: absolute; content: "\2261"; } input:checked ~ ul { display: block; > li { width: 100%; } } } }





:











JavaScript



(input / label) HTML

.



4. Canvas

, , input label 3. label, . 80% 20% ( , CSS)



<input type="checkbox" id="menu"> <label for="menu" onclick></label> <!-- basic menu goes here --> <div class="content"> <!-- content goes here --> </div>





label.

label { position: absolute; left: 0; display: none; }





label input. . , , "≡" label ( "\2261", ).



@media screen and (max-width: 44em) { $menu_width: 20em; body { overflow-x: hidden; } nav[role="off-canvas"] { position: absolute; left: -$menu_width; width: $menu_width; ul > li { width: 100%; } } label { display: block; } label:after { position: absolute; content: "\2261"; } input:checked ~ nav[role="off-canvas"] { left: 0; } input:checked ~ .content { margin-left: $menu_width + .5em; margin-right: -($menu_width + .5em); } }







:











JavaScript Facebook / Google+





(input / label) HTML body



.



IE?

: ! , IE8 , , .

.



:



<!-- Fix for iOS --> <input type="checkbox" id="menu"> <label for="menu" onclick></label>





/* Fix for Android */ body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } /* default checkbox */ input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; } label { cursor: pointer; user-select: none; }





label:



nav[role="custom-dropdown"] { label { display: none; } }





label. , , "≡" label ( "\2261", ). input, .



@media screen and (max-width: 44em) { nav[role="custom-dropdown"] { ul { display: none; height: 100%; } label { position: relative; display: block; width: 100%; } label:after { position: absolute; content: "\2261"; } input:checked ~ ul { display: block; > li { width: 100%; } } } }





:











JavaScript



(input / label) HTML

.



4. Canvas

, , input label 3. label, . 80% 20% ( , CSS)



<input type="checkbox" id="menu"> <label for="menu" onclick></label> <!-- basic menu goes here --> <div class="content"> <!-- content goes here --> </div>





label.

label { position: absolute; left: 0; display: none; }





label input. . , , "≡" label ( "\2261", ).



@media screen and (max-width: 44em) { $menu_width: 20em; body { overflow-x: hidden; } nav[role="off-canvas"] { position: absolute; left: -$menu_width; width: $menu_width; ul > li { width: 100%; } } label { display: block; } label:after { position: absolute; content: "\2261"; } input:checked ~ nav[role="off-canvas"] { left: 0; } input:checked ~ .content { margin-left: $menu_width + .5em; margin-right: -($menu_width + .5em); } }







:











JavaScript Facebook / Google+





(input / label) HTML body



.



IE?

: ! , IE8 , , .

.



:



<!-- Fix for iOS --> <input type="checkbox" id="menu"> <label for="menu" onclick></label>





/* Fix for Android */ body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } /* default checkbox */ input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; } label { cursor: pointer; user-select: none; }





label:



nav[role="custom-dropdown"] { label { display: none; } }





label. , , "≡" label ( "\2261", ). input, .



@media screen and (max-width: 44em) { nav[role="custom-dropdown"] { ul { display: none; height: 100%; } label { position: relative; display: block; width: 100%; } label:after { position: absolute; content: "\2261"; } input:checked ~ ul { display: block; > li { width: 100%; } } } }





:











JavaScript



(input / label) HTML

.



4. Canvas

, , input label 3. label, . 80% 20% ( , CSS)



<input type="checkbox" id="menu"> <label for="menu" onclick></label> <!-- basic menu goes here --> <div class="content"> <!-- content goes here --> </div>





label.

label { position: absolute; left: 0; display: none; }





label input. . , , "≡" label ( "\2261", ).



@media screen and (max-width: 44em) { $menu_width: 20em; body { overflow-x: hidden; } nav[role="off-canvas"] { position: absolute; left: -$menu_width; width: $menu_width; ul > li { width: 100%; } } label { display: block; } label:after { position: absolute; content: "\2261"; } input:checked ~ nav[role="off-canvas"] { left: 0; } input:checked ~ .content { margin-left: $menu_width + .5em; margin-right: -($menu_width + .5em); } }







:











JavaScript Facebook / Google+





(input / label) HTML body



.



IE?

: ! , IE8 , , .

  . 
      

        
        
        
      

     
      

        
        
        
      

            : 
      

        
        
        
      

     
      

        
        
        
      

     <!-- Fix for iOS --> <input type="checkbox" id="menu"> <label for="menu" onclick></label>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     /* Fix for Android */ body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } /* default checkbox */ input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; } label { cursor: pointer; user-select: none; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

          label: 
      

        
        
        
      

     
      

        
        
        
      

     nav[role="custom-dropdown"] { label { display: none; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

              label.    ,   ,      "≡"  label (    "\2261",     ).     input,          . 
      

        
        
        
      

     
      

        
        
        
      

     @media screen and (max-width: 44em) { nav[role="custom-dropdown"] { ul { display: none; height: 100%; } label { position: relative; display: block; width: 100%; } label:after { position: absolute; content: "\2261"; } input:checked ~ ul { display: block; > li { width: 100%; } } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

          : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

                JavaScript 
      

        
        
        
      

      
      

        
        
        
      

        (input / label)   HTML 
      

        
        
        
      

         . 
      

        
        
        
      

     
      

        
        
        
      

     4. Canvas 
      

        
        
        
      

       ,   ,      input  label    3.     label,        .       80%   20%  (     ,   CSS) 
      

        
        
        
      

     
      

        
        
        
      

     <input type="checkbox" id="menu"> <label for="menu" onclick></label> <!-- basic menu goes here --> <div class="content"> <!-- content goes here --> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

          label. 
      

        
        
        
      

     label { position: absolute; left: 0; display: none; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

                label  input.            .    ,   ,        "≡"  label (   "\2261",     ). 
      

        
        
        
      

     
      

        
        
        
      

     @media screen and (max-width: 44em) { $menu_width: 20em; body { overflow-x: hidden; } nav[role="off-canvas"] { position: absolute; left: -$menu_width; width: $menu_width; ul > li { width: 100%; } } label { display: block; } label:after { position: absolute; content: "\2261"; } input:checked ~ nav[role="off-canvas"] { left: 0; } input:checked ~ .content { margin-left: $menu_width + .5em; margin-right: -($menu_width + .5em); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     
      

        
        
        
      

               : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

                JavaScript   Facebook / Google+  
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

        (input / label)   HTML    body     
      

        
        
        
      

     
      

        
        
        
      

        . 
      

        
        
        
      

     
      

        
        
        
      

         IE? 
      

        
        
        
      

          :      !   ,    IE8        , ,        .
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

.



:



<!-- Fix for iOS --> <input type="checkbox" id="menu"> <label for="menu" onclick></label>





/* Fix for Android */ body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } /* default checkbox */ input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; } label { cursor: pointer; user-select: none; }





label:



nav[role="custom-dropdown"] { label { display: none; } }





label. , , "≡" label ( "\2261", ). input, .



@media screen and (max-width: 44em) { nav[role="custom-dropdown"] { ul { display: none; height: 100%; } label { position: relative; display: block; width: 100%; } label:after { position: absolute; content: "\2261"; } input:checked ~ ul { display: block; > li { width: 100%; } } } }





:











JavaScript



(input / label) HTML

.



4. Canvas

, , input label 3. label, . 80% 20% ( , CSS)



<input type="checkbox" id="menu"> <label for="menu" onclick></label> <!-- basic menu goes here --> <div class="content"> <!-- content goes here --> </div>





label.

label { position: absolute; left: 0; display: none; }





label input. . , , "≡" label ( "\2261", ).



@media screen and (max-width: 44em) { $menu_width: 20em; body { overflow-x: hidden; } nav[role="off-canvas"] { position: absolute; left: -$menu_width; width: $menu_width; ul > li { width: 100%; } } label { display: block; } label:after { position: absolute; content: "\2261"; } input:checked ~ nav[role="off-canvas"] { left: 0; } input:checked ~ .content { margin-left: $menu_width + .5em; margin-right: -($menu_width + .5em); } }







:











JavaScript Facebook / Google+





(input / label) HTML body



.



IE?

: ! , IE8 , , .

  . 
      

        
        
        
      

     
      

        
        
        
      

            : 
      

        
        
        
      

     
      

        
        
        
      

     <!-- Fix for iOS --> <input type="checkbox" id="menu"> <label for="menu" onclick></label>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     /* Fix for Android */ body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } /* default checkbox */ input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; } label { cursor: pointer; user-select: none; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

          label: 
      

        
        
        
      

     
      

        
        
        
      

     nav[role="custom-dropdown"] { label { display: none; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

              label.    ,   ,      "≡"  label (    "\2261",     ).     input,          . 
      

        
        
        
      

     
      

        
        
        
      

     @media screen and (max-width: 44em) { nav[role="custom-dropdown"] { ul { display: none; height: 100%; } label { position: relative; display: block; width: 100%; } label:after { position: absolute; content: "\2261"; } input:checked ~ ul { display: block; > li { width: 100%; } } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

          : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

                JavaScript 
      

        
        
        
      

      
      

        
        
        
      

        (input / label)   HTML 
      

        
        
        
      

         . 
      

        
        
        
      

     
      

        
        
        
      

     4. Canvas 
      

        
        
        
      

       ,   ,      input  label    3.     label,        .       80%   20%  (     ,   CSS) 
      

        
        
        
      

     
      

        
        
        
      

     <input type="checkbox" id="menu"> <label for="menu" onclick></label> <!-- basic menu goes here --> <div class="content"> <!-- content goes here --> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

          label. 
      

        
        
        
      

     label { position: absolute; left: 0; display: none; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

                label  input.            .    ,   ,        "≡"  label (   "\2261",     ). 
      

        
        
        
      

     
      

        
        
        
      

     @media screen and (max-width: 44em) { $menu_width: 20em; body { overflow-x: hidden; } nav[role="off-canvas"] { position: absolute; left: -$menu_width; width: $menu_width; ul > li { width: 100%; } } label { display: block; } label:after { position: absolute; content: "\2261"; } input:checked ~ nav[role="off-canvas"] { left: 0; } input:checked ~ .content { margin-left: $menu_width + .5em; margin-right: -($menu_width + .5em); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     
      

        
        
        
      

               : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

                JavaScript   Facebook / Google+  
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

        (input / label)   HTML    body     
      

        
        
        
      

     
      

        
        
        
      

        . 
      

        
        
        
      

     
      

        
        
        
      

         IE? 
      

        
        
        
      

          :      !   ,    IE8        , ,        .
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

.



:



<!-- Fix for iOS --> <input type="checkbox" id="menu"> <label for="menu" onclick></label>





/* Fix for Android */ body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } /* default checkbox */ input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; } label { cursor: pointer; user-select: none; }





label:



nav[role="custom-dropdown"] { label { display: none; } }





label. , , "≡" label ( "\2261", ). input, .



@media screen and (max-width: 44em) { nav[role="custom-dropdown"] { ul { display: none; height: 100%; } label { position: relative; display: block; width: 100%; } label:after { position: absolute; content: "\2261"; } input:checked ~ ul { display: block; > li { width: 100%; } } } }





:











JavaScript



(input / label) HTML

.



4. Canvas

, , input label 3. label, . 80% 20% ( , CSS)



<input type="checkbox" id="menu"> <label for="menu" onclick></label> <!-- basic menu goes here --> <div class="content"> <!-- content goes here --> </div>





label.

label { position: absolute; left: 0; display: none; }





label input. . , , "≡" label ( "\2261", ).



@media screen and (max-width: 44em) { $menu_width: 20em; body { overflow-x: hidden; } nav[role="off-canvas"] { position: absolute; left: -$menu_width; width: $menu_width; ul > li { width: 100%; } } label { display: block; } label:after { position: absolute; content: "\2261"; } input:checked ~ nav[role="off-canvas"] { left: 0; } input:checked ~ .content { margin-left: $menu_width + .5em; margin-right: -($menu_width + .5em); } }







:











JavaScript Facebook / Google+





(input / label) HTML body



.



IE?

: ! , IE8 , , .

  . 
      

        
        
        
      

     
      

        
        
        
      

            : 
      

        
        
        
      

     
      

        
        
        
      

     <!-- Fix for iOS --> <input type="checkbox" id="menu"> <label for="menu" onclick></label>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     /* Fix for Android */ body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } /* default checkbox */ input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; } label { cursor: pointer; user-select: none; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

          label: 
      

        
        
        
      

     
      

        
        
        
      

     nav[role="custom-dropdown"] { label { display: none; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

              label.    ,   ,      "≡"  label (    "\2261",     ).     input,          . 
      

        
        
        
      

     
      

        
        
        
      

     @media screen and (max-width: 44em) { nav[role="custom-dropdown"] { ul { display: none; height: 100%; } label { position: relative; display: block; width: 100%; } label:after { position: absolute; content: "\2261"; } input:checked ~ ul { display: block; > li { width: 100%; } } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

          : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

                JavaScript 
      

        
        
        
      

      
      

        
        
        
      

        (input / label)   HTML 
      

        
        
        
      

         . 
      

        
        
        
      

     
      

        
        
        
      

     4. Canvas 
      

        
        
        
      

       ,   ,      input  label    3.     label,        .       80%   20%  (     ,   CSS) 
      

        
        
        
      

     
      

        
        
        
      

     <input type="checkbox" id="menu"> <label for="menu" onclick></label> <!-- basic menu goes here --> <div class="content"> <!-- content goes here --> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

          label. 
      

        
        
        
      

     label { position: absolute; left: 0; display: none; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

                label  input.            .    ,   ,        "≡"  label (   "\2261",     ). 
      

        
        
        
      

     
      

        
        
        
      

     @media screen and (max-width: 44em) { $menu_width: 20em; body { overflow-x: hidden; } nav[role="off-canvas"] { position: absolute; left: -$menu_width; width: $menu_width; ul > li { width: 100%; } } label { display: block; } label:after { position: absolute; content: "\2261"; } input:checked ~ nav[role="off-canvas"] { left: 0; } input:checked ~ .content { margin-left: $menu_width + .5em; margin-right: -($menu_width + .5em); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     
      

        
        
        
      

               : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

                JavaScript   Facebook / Google+  
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

        (input / label)   HTML    body     
      

        
        
        
      

     
      

        
        
        
      

        . 
      

        
        
        
      

     
      

        
        
        
      

         IE? 
      

        
        
        
      

          :      !   ,    IE8        , ,        .
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

.



:



<!-- Fix for iOS --> <input type="checkbox" id="menu"> <label for="menu" onclick></label>





/* Fix for Android */ body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } /* default checkbox */ input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; } label { cursor: pointer; user-select: none; }





label:



nav[role="custom-dropdown"] { label { display: none; } }





label. , , "≡" label ( "\2261", ). input, .



@media screen and (max-width: 44em) { nav[role="custom-dropdown"] { ul { display: none; height: 100%; } label { position: relative; display: block; width: 100%; } label:after { position: absolute; content: "\2261"; } input:checked ~ ul { display: block; > li { width: 100%; } } } }





:











JavaScript



(input / label) HTML

.



4. Canvas

, , input label 3. label, . 80% 20% ( , CSS)



<input type="checkbox" id="menu"> <label for="menu" onclick></label> <!-- basic menu goes here --> <div class="content"> <!-- content goes here --> </div>





label.

label { position: absolute; left: 0; display: none; }





label input. . , , "≡" label ( "\2261", ).



@media screen and (max-width: 44em) { $menu_width: 20em; body { overflow-x: hidden; } nav[role="off-canvas"] { position: absolute; left: -$menu_width; width: $menu_width; ul > li { width: 100%; } } label { display: block; } label:after { position: absolute; content: "\2261"; } input:checked ~ nav[role="off-canvas"] { left: 0; } input:checked ~ .content { margin-left: $menu_width + .5em; margin-right: -($menu_width + .5em); } }







:











JavaScript Facebook / Google+





(input / label) HTML body



.



IE?

: ! , IE8 , , .

.



:



<!-- Fix for iOS --> <input type="checkbox" id="menu"> <label for="menu" onclick></label>





/* Fix for Android */ body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } /* default checkbox */ input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; } label { cursor: pointer; user-select: none; }





label:



nav[role="custom-dropdown"] { label { display: none; } }





label. , , "≡" label ( "\2261", ). input, .



@media screen and (max-width: 44em) { nav[role="custom-dropdown"] { ul { display: none; height: 100%; } label { position: relative; display: block; width: 100%; } label:after { position: absolute; content: "\2261"; } input:checked ~ ul { display: block; > li { width: 100%; } } } }





:











JavaScript



(input / label) HTML

.



4. Canvas

, , input label 3. label, . 80% 20% ( , CSS)



<input type="checkbox" id="menu"> <label for="menu" onclick></label> <!-- basic menu goes here --> <div class="content"> <!-- content goes here --> </div>





label.

label { position: absolute; left: 0; display: none; }





label input. . , , "≡" label ( "\2261", ).



@media screen and (max-width: 44em) { $menu_width: 20em; body { overflow-x: hidden; } nav[role="off-canvas"] { position: absolute; left: -$menu_width; width: $menu_width; ul > li { width: 100%; } } label { display: block; } label:after { position: absolute; content: "\2261"; } input:checked ~ nav[role="off-canvas"] { left: 0; } input:checked ~ .content { margin-left: $menu_width + .5em; margin-right: -($menu_width + .5em); } }







:











JavaScript Facebook / Google+





(input / label) HTML body



.



IE?

: ! , IE8 , , .

.



:



<!-- Fix for iOS --> <input type="checkbox" id="menu"> <label for="menu" onclick></label>





/* Fix for Android */ body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } /* default checkbox */ input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; } label { cursor: pointer; user-select: none; }





label:



nav[role="custom-dropdown"] { label { display: none; } }





label. , , "≡" label ( "\2261", ). input, .



@media screen and (max-width: 44em) { nav[role="custom-dropdown"] { ul { display: none; height: 100%; } label { position: relative; display: block; width: 100%; } label:after { position: absolute; content: "\2261"; } input:checked ~ ul { display: block; > li { width: 100%; } } } }





:











JavaScript



(input / label) HTML

.



4. Canvas

, , input label 3. label, . 80% 20% ( , CSS)



<input type="checkbox" id="menu"> <label for="menu" onclick></label> <!-- basic menu goes here --> <div class="content"> <!-- content goes here --> </div>





label.

label { position: absolute; left: 0; display: none; }





label input. . , , "≡" label ( "\2261", ).



@media screen and (max-width: 44em) { $menu_width: 20em; body { overflow-x: hidden; } nav[role="off-canvas"] { position: absolute; left: -$menu_width; width: $menu_width; ul > li { width: 100%; } } label { display: block; } label:after { position: absolute; content: "\2261"; } input:checked ~ nav[role="off-canvas"] { left: 0; } input:checked ~ .content { margin-left: $menu_width + .5em; margin-right: -($menu_width + .5em); } }







:











JavaScript Facebook / Google+





(input / label) HTML body



.



IE?

: ! , IE8 , , .

• .



:



<!-- Fix for iOS --> <input type="checkbox" id="menu"> <label for="menu" onclick></label>





/* Fix for Android */ body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } /* default checkbox */ input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; } label { cursor: pointer; user-select: none; }





label:



nav[role="custom-dropdown"] { label { display: none; } }





label. , , "≡" label ( "\2261", ). input, .



@media screen and (max-width: 44em) { nav[role="custom-dropdown"] { ul { display: none; height: 100%; } label { position: relative; display: block; width: 100%; } label:after { position: absolute; content: "\2261"; } input:checked ~ ul { display: block; > li { width: 100%; } } } }





:











JavaScript



(input / label) HTML

.



4. Canvas

, , input label 3. label, . 80% 20% ( , CSS)



<input type="checkbox" id="menu"> <label for="menu" onclick></label> <!-- basic menu goes here --> <div class="content"> <!-- content goes here --> </div>





label.

label { position: absolute; left: 0; display: none; }





label input. . , , "≡" label ( "\2261", ).



@media screen and (max-width: 44em) { $menu_width: 20em; body { overflow-x: hidden; } nav[role="off-canvas"] { position: absolute; left: -$menu_width; width: $menu_width; ul > li { width: 100%; } } label { display: block; } label:after { position: absolute; content: "\2261"; } input:checked ~ nav[role="off-canvas"] { left: 0; } input:checked ~ .content { margin-left: $menu_width + .5em; margin-right: -($menu_width + .5em); } }







:











JavaScript Facebook / Google+





(input / label) HTML body



.



IE?

: ! , IE8 , , .
  
  
  
  
• .



:



<!-- Fix for iOS --> <input type="checkbox" id="menu"> <label for="menu" onclick></label>





/* Fix for Android */ body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } /* default checkbox */ input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; } label { cursor: pointer; user-select: none; }





label:



nav[role="custom-dropdown"] { label { display: none; } }





label. , , "≡" label ( "\2261", ). input, .



@media screen and (max-width: 44em) { nav[role="custom-dropdown"] { ul { display: none; height: 100%; } label { position: relative; display: block; width: 100%; } label:after { position: absolute; content: "\2261"; } input:checked ~ ul { display: block; > li { width: 100%; } } } }





:











JavaScript



(input / label) HTML

.



4. Canvas

, , input label 3. label, . 80% 20% ( , CSS)



<input type="checkbox" id="menu"> <label for="menu" onclick></label> <!-- basic menu goes here --> <div class="content"> <!-- content goes here --> </div>





label.

label { position: absolute; left: 0; display: none; }





label input. . , , "≡" label ( "\2261", ).



@media screen and (max-width: 44em) { $menu_width: 20em; body { overflow-x: hidden; } nav[role="off-canvas"] { position: absolute; left: -$menu_width; width: $menu_width; ul > li { width: 100%; } } label { display: block; } label:after { position: absolute; content: "\2261"; } input:checked ~ nav[role="off-canvas"] { left: 0; } input:checked ~ .content { margin-left: $menu_width + .5em; margin-right: -($menu_width + .5em); } }







:











JavaScript Facebook / Google+





(input / label) HTML body



.



IE?

: ! , IE8 , , .
  
  
  
  
• .



:



<!-- Fix for iOS --> <input type="checkbox" id="menu"> <label for="menu" onclick></label>





/* Fix for Android */ body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } /* default checkbox */ input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; } label { cursor: pointer; user-select: none; }





label:



nav[role="custom-dropdown"] { label { display: none; } }





label. , , "≡" label ( "\2261", ). input, .



@media screen and (max-width: 44em) { nav[role="custom-dropdown"] { ul { display: none; height: 100%; } label { position: relative; display: block; width: 100%; } label:after { position: absolute; content: "\2261"; } input:checked ~ ul { display: block; > li { width: 100%; } } } }





:











JavaScript



(input / label) HTML

.



4. Canvas

, , input label 3. label, . 80% 20% ( , CSS)



<input type="checkbox" id="menu"> <label for="menu" onclick></label> <!-- basic menu goes here --> <div class="content"> <!-- content goes here --> </div>





label.

label { position: absolute; left: 0; display: none; }





label input. . , , "≡" label ( "\2261", ).



@media screen and (max-width: 44em) { $menu_width: 20em; body { overflow-x: hidden; } nav[role="off-canvas"] { position: absolute; left: -$menu_width; width: $menu_width; ul > li { width: 100%; } } label { display: block; } label:after { position: absolute; content: "\2261"; } input:checked ~ nav[role="off-canvas"] { left: 0; } input:checked ~ .content { margin-left: $menu_width + .5em; margin-right: -($menu_width + .5em); } }







:











JavaScript Facebook / Google+





(input / label) HTML body



.



IE?

: ! , IE8 , , .
  
  
  
  
• .



:



<!-- Fix for iOS --> <input type="checkbox" id="menu"> <label for="menu" onclick></label>





/* Fix for Android */ body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } /* default checkbox */ input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; } label { cursor: pointer; user-select: none; }





label:



nav[role="custom-dropdown"] { label { display: none; } }





label. , , "≡" label ( "\2261", ). input, .



@media screen and (max-width: 44em) { nav[role="custom-dropdown"] { ul { display: none; height: 100%; } label { position: relative; display: block; width: 100%; } label:after { position: absolute; content: "\2261"; } input:checked ~ ul { display: block; > li { width: 100%; } } } }





:











JavaScript



(input / label) HTML

.



4. Canvas

, , input label 3. label, . 80% 20% ( , CSS)



<input type="checkbox" id="menu"> <label for="menu" onclick></label> <!-- basic menu goes here --> <div class="content"> <!-- content goes here --> </div>





label.

label { position: absolute; left: 0; display: none; }





label input. . , , "≡" label ( "\2261", ).



@media screen and (max-width: 44em) { $menu_width: 20em; body { overflow-x: hidden; } nav[role="off-canvas"] { position: absolute; left: -$menu_width; width: $menu_width; ul > li { width: 100%; } } label { display: block; } label:after { position: absolute; content: "\2261"; } input:checked ~ nav[role="off-canvas"] { left: 0; } input:checked ~ .content { margin-left: $menu_width + .5em; margin-right: -($menu_width + .5em); } }







:











JavaScript Facebook / Google+





(input / label) HTML body



.



IE?

: ! , IE8 , , .
  
  
  
  

.



:



<!-- Fix for iOS --> <input type="checkbox" id="menu"> <label for="menu" onclick></label>





/* Fix for Android */ body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } /* default checkbox */ input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; } label { cursor: pointer; user-select: none; }





label:



nav[role="custom-dropdown"] { label { display: none; } }





label. , , "≡" label ( "\2261", ). input, .



@media screen and (max-width: 44em) { nav[role="custom-dropdown"] { ul { display: none; height: 100%; } label { position: relative; display: block; width: 100%; } label:after { position: absolute; content: "\2261"; } input:checked ~ ul { display: block; > li { width: 100%; } } } }





:











JavaScript



(input / label) HTML

.



4. Canvas

, , input label 3. label, . 80% 20% ( , CSS)



<input type="checkbox" id="menu"> <label for="menu" onclick></label> <!-- basic menu goes here --> <div class="content"> <!-- content goes here --> </div>





label.

label { position: absolute; left: 0; display: none; }





label input. . , , "≡" label ( "\2261", ).



@media screen and (max-width: 44em) { $menu_width: 20em; body { overflow-x: hidden; } nav[role="off-canvas"] { position: absolute; left: -$menu_width; width: $menu_width; ul > li { width: 100%; } } label { display: block; } label:after { position: absolute; content: "\2261"; } input:checked ~ nav[role="off-canvas"] { left: 0; } input:checked ~ .content { margin-left: $menu_width + .5em; margin-right: -($menu_width + .5em); } }







:











JavaScript Facebook / Google+





(input / label) HTML body



.



IE?

: ! , IE8 , , .

.



:



<!-- Fix for iOS --> <input type="checkbox" id="menu"> <label for="menu" onclick></label>





/* Fix for Android */ body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } /* default checkbox */ input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; } label { cursor: pointer; user-select: none; }





label:



nav[role="custom-dropdown"] { label { display: none; } }





label. , , "≡" label ( "\2261", ). input, .



@media screen and (max-width: 44em) { nav[role="custom-dropdown"] { ul { display: none; height: 100%; } label { position: relative; display: block; width: 100%; } label:after { position: absolute; content: "\2261"; } input:checked ~ ul { display: block; > li { width: 100%; } } } }





:











JavaScript



(input / label) HTML

.



4. Canvas

, , input label 3. label, . 80% 20% ( , CSS)



<input type="checkbox" id="menu"> <label for="menu" onclick></label> <!-- basic menu goes here --> <div class="content"> <!-- content goes here --> </div>





label.

label { position: absolute; left: 0; display: none; }





label input. . , , "≡" label ( "\2261", ).



@media screen and (max-width: 44em) { $menu_width: 20em; body { overflow-x: hidden; } nav[role="off-canvas"] { position: absolute; left: -$menu_width; width: $menu_width; ul > li { width: 100%; } } label { display: block; } label:after { position: absolute; content: "\2261"; } input:checked ~ nav[role="off-canvas"] { left: 0; } input:checked ~ .content { margin-left: $menu_width + .5em; margin-right: -($menu_width + .5em); } }







:











JavaScript Facebook / Google+





(input / label) HTML body



.



IE?

: ! , IE8 , , .

.



:



<!-- Fix for iOS --> <input type="checkbox" id="menu"> <label for="menu" onclick></label>





/* Fix for Android */ body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } /* default checkbox */ input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; } label { cursor: pointer; user-select: none; }





label:



nav[role="custom-dropdown"] { label { display: none; } }





label. , , "≡" label ( "\2261", ). input, .



@media screen and (max-width: 44em) { nav[role="custom-dropdown"] { ul { display: none; height: 100%; } label { position: relative; display: block; width: 100%; } label:after { position: absolute; content: "\2261"; } input:checked ~ ul { display: block; > li { width: 100%; } } } }





:











JavaScript



(input / label) HTML

.



4. Canvas

, , input label 3. label, . 80% 20% ( , CSS)



<input type="checkbox" id="menu"> <label for="menu" onclick></label> <!-- basic menu goes here --> <div class="content"> <!-- content goes here --> </div>





label.

label { position: absolute; left: 0; display: none; }





label input. . , , "≡" label ( "\2261", ).



@media screen and (max-width: 44em) { $menu_width: 20em; body { overflow-x: hidden; } nav[role="off-canvas"] { position: absolute; left: -$menu_width; width: $menu_width; ul > li { width: 100%; } } label { display: block; } label:after { position: absolute; content: "\2261"; } input:checked ~ nav[role="off-canvas"] { left: 0; } input:checked ~ .content { margin-left: $menu_width + .5em; margin-right: -($menu_width + .5em); } }







:











JavaScript Facebook / Google+





(input / label) HTML body



.



IE?

: ! , IE8 , , .

• .



:



<!-- Fix for iOS --> <input type="checkbox" id="menu"> <label for="menu" onclick></label>





/* Fix for Android */ body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } /* default checkbox */ input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; } label { cursor: pointer; user-select: none; }





label:



nav[role="custom-dropdown"] { label { display: none; } }





label. , , "≡" label ( "\2261", ). input, .



@media screen and (max-width: 44em) { nav[role="custom-dropdown"] { ul { display: none; height: 100%; } label { position: relative; display: block; width: 100%; } label:after { position: absolute; content: "\2261"; } input:checked ~ ul { display: block; > li { width: 100%; } } } }





:











JavaScript



(input / label) HTML

.



4. Canvas

, , input label 3. label, . 80% 20% ( , CSS)



<input type="checkbox" id="menu"> <label for="menu" onclick></label> <!-- basic menu goes here --> <div class="content"> <!-- content goes here --> </div>





label.

label { position: absolute; left: 0; display: none; }





label input. . , , "≡" label ( "\2261", ).



@media screen and (max-width: 44em) { $menu_width: 20em; body { overflow-x: hidden; } nav[role="off-canvas"] { position: absolute; left: -$menu_width; width: $menu_width; ul > li { width: 100%; } } label { display: block; } label:after { position: absolute; content: "\2261"; } input:checked ~ nav[role="off-canvas"] { left: 0; } input:checked ~ .content { margin-left: $menu_width + .5em; margin-right: -($menu_width + .5em); } }







:











JavaScript Facebook / Google+





(input / label) HTML body



.



IE?

: ! , IE8 , , .
  
  
  
  
• .



:



<!-- Fix for iOS --> <input type="checkbox" id="menu"> <label for="menu" onclick></label>





/* Fix for Android */ body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } /* default checkbox */ input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; } label { cursor: pointer; user-select: none; }





label:



nav[role="custom-dropdown"] { label { display: none; } }





label. , , "≡" label ( "\2261", ). input, .



@media screen and (max-width: 44em) { nav[role="custom-dropdown"] { ul { display: none; height: 100%; } label { position: relative; display: block; width: 100%; } label:after { position: absolute; content: "\2261"; } input:checked ~ ul { display: block; > li { width: 100%; } } } }





:











JavaScript



(input / label) HTML

.



4. Canvas

, , input label 3. label, . 80% 20% ( , CSS)



<input type="checkbox" id="menu"> <label for="menu" onclick></label> <!-- basic menu goes here --> <div class="content"> <!-- content goes here --> </div>





label.

label { position: absolute; left: 0; display: none; }





label input. . , , "≡" label ( "\2261", ).



@media screen and (max-width: 44em) { $menu_width: 20em; body { overflow-x: hidden; } nav[role="off-canvas"] { position: absolute; left: -$menu_width; width: $menu_width; ul > li { width: 100%; } } label { display: block; } label:after { position: absolute; content: "\2261"; } input:checked ~ nav[role="off-canvas"] { left: 0; } input:checked ~ .content { margin-left: $menu_width + .5em; margin-right: -($menu_width + .5em); } }







:











JavaScript Facebook / Google+





(input / label) HTML body



.



IE?

: ! , IE8 , , .
  
  
  
  
• .



:



<!-- Fix for iOS --> <input type="checkbox" id="menu"> <label for="menu" onclick></label>





/* Fix for Android */ body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } /* default checkbox */ input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; } label { cursor: pointer; user-select: none; }





label:



nav[role="custom-dropdown"] { label { display: none; } }





label. , , "≡" label ( "\2261", ). input, .



@media screen and (max-width: 44em) { nav[role="custom-dropdown"] { ul { display: none; height: 100%; } label { position: relative; display: block; width: 100%; } label:after { position: absolute; content: "\2261"; } input:checked ~ ul { display: block; > li { width: 100%; } } } }





:











JavaScript



(input / label) HTML

.



4. Canvas

, , input label 3. label, . 80% 20% ( , CSS)



<input type="checkbox" id="menu"> <label for="menu" onclick></label> <!-- basic menu goes here --> <div class="content"> <!-- content goes here --> </div>





label.

label { position: absolute; left: 0; display: none; }





label input. . , , "≡" label ( "\2261", ).



@media screen and (max-width: 44em) { $menu_width: 20em; body { overflow-x: hidden; } nav[role="off-canvas"] { position: absolute; left: -$menu_width; width: $menu_width; ul > li { width: 100%; } } label { display: block; } label:after { position: absolute; content: "\2261"; } input:checked ~ nav[role="off-canvas"] { left: 0; } input:checked ~ .content { margin-left: $menu_width + .5em; margin-right: -($menu_width + .5em); } }







:











JavaScript Facebook / Google+





(input / label) HTML body



.



IE?

: ! , IE8 , , .
  
  
  
  

.



:



<!-- Fix for iOS --> <input type="checkbox" id="menu"> <label for="menu" onclick></label>





/* Fix for Android */ body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } /* default checkbox */ input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; } label { cursor: pointer; user-select: none; }





label:



nav[role="custom-dropdown"] { label { display: none; } }





label. , , "≡" label ( "\2261", ). input, .



@media screen and (max-width: 44em) { nav[role="custom-dropdown"] { ul { display: none; height: 100%; } label { position: relative; display: block; width: 100%; } label:after { position: absolute; content: "\2261"; } input:checked ~ ul { display: block; > li { width: 100%; } } } }





:











JavaScript



(input / label) HTML

.



4. Canvas

, , input label 3. label, . 80% 20% ( , CSS)



<input type="checkbox" id="menu"> <label for="menu" onclick></label> <!-- basic menu goes here --> <div class="content"> <!-- content goes here --> </div>





label.

label { position: absolute; left: 0; display: none; }





label input. . , , "≡" label ( "\2261", ).



@media screen and (max-width: 44em) { $menu_width: 20em; body { overflow-x: hidden; } nav[role="off-canvas"] { position: absolute; left: -$menu_width; width: $menu_width; ul > li { width: 100%; } } label { display: block; } label:after { position: absolute; content: "\2261"; } input:checked ~ nav[role="off-canvas"] { left: 0; } input:checked ~ .content { margin-left: $menu_width + .5em; margin-right: -($menu_width + .5em); } }







:











JavaScript Facebook / Google+





(input / label) HTML body



.



IE?

: ! , IE8 , , .

.



:



<!-- Fix for iOS --> <input type="checkbox" id="menu"> <label for="menu" onclick></label>





/* Fix for Android */ body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } /* default checkbox */ input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; } label { cursor: pointer; user-select: none; }





label:



nav[role="custom-dropdown"] { label { display: none; } }





label. , , "≡" label ( "\2261", ). input, .



@media screen and (max-width: 44em) { nav[role="custom-dropdown"] { ul { display: none; height: 100%; } label { position: relative; display: block; width: 100%; } label:after { position: absolute; content: "\2261"; } input:checked ~ ul { display: block; > li { width: 100%; } } } }





:











JavaScript



(input / label) HTML

.



4. Canvas

, , input label 3. label, . 80% 20% ( , CSS)



<input type="checkbox" id="menu"> <label for="menu" onclick></label> <!-- basic menu goes here --> <div class="content"> <!-- content goes here --> </div>





label.

label { position: absolute; left: 0; display: none; }





label input. . , , "≡" label ( "\2261", ).



@media screen and (max-width: 44em) { $menu_width: 20em; body { overflow-x: hidden; } nav[role="off-canvas"] { position: absolute; left: -$menu_width; width: $menu_width; ul > li { width: 100%; } } label { display: block; } label:after { position: absolute; content: "\2261"; } input:checked ~ nav[role="off-canvas"] { left: 0; } input:checked ~ .content { margin-left: $menu_width + .5em; margin-right: -($menu_width + .5em); } }







:











JavaScript Facebook / Google+





(input / label) HTML body



.



IE?

: ! , IE8 , , .

.



:



<!-- Fix for iOS --> <input type="checkbox" id="menu"> <label for="menu" onclick></label>





/* Fix for Android */ body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } /* default checkbox */ input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; } label { cursor: pointer; user-select: none; }





label:



nav[role="custom-dropdown"] { label { display: none; } }





label. , , "≡" label ( "\2261", ). input, .



@media screen and (max-width: 44em) { nav[role="custom-dropdown"] { ul { display: none; height: 100%; } label { position: relative; display: block; width: 100%; } label:after { position: absolute; content: "\2261"; } input:checked ~ ul { display: block; > li { width: 100%; } } } }





:











JavaScript



(input / label) HTML

.



4. Canvas

, , input label 3. label, . 80% 20% ( , CSS)



<input type="checkbox" id="menu"> <label for="menu" onclick></label> <!-- basic menu goes here --> <div class="content"> <!-- content goes here --> </div>





label.

label { position: absolute; left: 0; display: none; }





label input. . , , "≡" label ( "\2261", ).



@media screen and (max-width: 44em) { $menu_width: 20em; body { overflow-x: hidden; } nav[role="off-canvas"] { position: absolute; left: -$menu_width; width: $menu_width; ul > li { width: 100%; } } label { display: block; } label:after { position: absolute; content: "\2261"; } input:checked ~ nav[role="off-canvas"] { left: 0; } input:checked ~ .content { margin-left: $menu_width + .5em; margin-right: -($menu_width + .5em); } }







:











JavaScript Facebook / Google+





(input / label) HTML body



.



IE?

: ! , IE8 , , .