अनुकूली मेनू दृष्टिकोण

जब हम उत्तरदायी डिजाइन के साथ काम करना शुरू करते हैं, तो हम विभिन्न तकनीकों पर आते हैं कि कैसे कम रिज़ॉल्यूशन स्क्रीन के लिए हमारे नेविगेशन मेनू को बेहतर तरीके से संभालना है। संभावनाएं अनंत लगती हैं। इसलिए, मैं आपको उनके फायदे और नुकसान के साथ चार मुख्य दृष्टिकोण दिखाऊंगा। उनमें से तीन को केवल सीएसएस और एक जावास्क्रिप्ट के साथ प्रयोग किया जाता है।

परिचय

लेख में प्रस्तुत कोड में, मैं ब्राउज़र उपसर्गों का उपयोग नहीं करता हूं ताकि शैली कोड पढ़ने और समझने में सरल रहे। अधिक जटिल उदाहरण SCSS का उपयोग करते हैं। प्रत्येक उदाहरण कोडपेन वेबसाइट पर उपलब्ध है, जहां आप संकलित सीएसएस देख सकते हैं।

इस लेख के सभी दृष्टिकोण सरल 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%; } } } 

अतिरिक्त डिज़ाइन के साथ, यह एक छोटे रिज़ॉल्यूशन वाली स्क्रीन पर दिखता है:

लाभ

• कोई जावास्क्रिप्ट की आवश्यकता है
• कोई अतिरिक्त मार्कअप नहीं
• सरल शैली कोड

कमियों

• बहुत अधिक स्क्रीन स्थान लेता है

कोडपेन वेबसाइट पर एक क्षैतिज मेनू का उदाहरण देखा जा सकता है।

2. ड्रॉप-डाउन सूची

इस दृष्टिकोण में, आधार मेनू छिपा हुआ है और इसके बजाय ड्रॉप-डाउन सूची प्रदर्शित की गई है ।

इस प्रभाव को प्राप्त करने के लिए, हमें मूल मार्कअप में ड्रॉप-डाउन सूची को जोड़ना होगा। इसके लिए काम करने के लिए, हमें जावास्क्रिप्ट कोड जोड़ना होगा जो कि विंडो का मान बदल देता है। आवंटन तब होता है जब ऑनकॉर्प इवेंट होता है।

 <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; } } 

छोटे स्क्रीनों पर, बेस मेनू छिपाएं और ड्रॉप-डाउन सूची दिखाएं। उपयोगकर्ता को यह समझने में मदद करने के लिए कि यह एक मेनू है - हम "मेनू" पाठ के साथ एक छद्म तत्व जोड़ देंगे।

 @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; } } } 

अतिरिक्त डिज़ाइन के साथ, यह एक छोटे रिज़ॉल्यूशन वाली स्क्रीन पर दिखता है:

लाभ

• ज्यादा जगह नहीं लेता
• देशी नियंत्रण का उपयोग करता है

कमियों

• जावास्क्रिप्ट काम करने के लिए आवश्यक है
• सामग्री का दोहराव होता है
• ड्रॉपडाउन सूची को सभी ब्राउज़रों में स्टाइल नहीं किया जा सकता है

इस मेनू का एक उदाहरण ।

3. कस्टम ड्रॉप-डाउन मेनू

इस दृष्टिकोण में, मूल मेनू छोटी स्क्रीन पर छिपा होता है और इसके बजाय इनपुट और लेबल दिखाए जाते हैं ( चेकबॉक्स के साथ हैक का उपयोग किया जाता है )। जब उपयोगकर्ता लेबल पर क्लिक करता है, तो उसके नीचे मुख्य मेनू प्रदर्शित होता है।

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

एक चेकबॉक्स के साथ एक हैक का उपयोग कर समस्याएं

इस समाधान के साथ दो मुख्य समस्याएं:

1. यह सफारी (iOS <6.0) के मोबाइल संस्करणों पर काम नहीं करता है । बग के कारण काम करने के लिए इनपुट के लिए iOS <6.0 के तहत एक ब्राउज़र में एक लेबल पर क्लिक करना संभव नहीं है। लेबल पर एक खाली ऑनक्लिक ईवेंट जोड़कर हल किया गया
2. यह 4.1.2 से कम या उसके बराबर के एंड्रॉइड ओएस संस्करण के मुख्य ब्राउज़र पर काम नहीं करता है। एक बार, WebKit इंजन में एक बग था जिसने + और ~ चयनकर्ताओं के संयोजन के साथ छद्म वर्गों के उपयोग की अनुमति नहीं दी थी

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

इसका कोई प्रभाव नहीं पड़ा, क्योंकि चेकबॉक्स के साथ हैक का उपयोग किया गया :checked ~ चयनकर्ता के साथ चेक किए गए छद्म वर्ग। और जबकि WebKit 535.1 (Chrome 13) में बग को ठीक नहीं किया गया था और वेब 4.1.2 WebKit 534.30 के लिए वास्तविक में, हैक किसी भी Android OS डिवाइस पर काम नहीं करता था।

सबसे अच्छा समाधान केवल टैग के लिए 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 , , .