Approaches to the implementation of the adaptive menu
When we start working with responsive design, we are confronted with various techniques on how to best handle the change in our navigation menu for low-resolution screens. The possibilities seem endless. Therefore, I will show you four main approaches with their strengths and weaknesses. Three of them are made using only CSS and one with a small amount of JavaScript.
In the code presented in the article, I do not use browser prefixes, so that the style code remains easy to read and understand. More complex examples use SCSS. Each of the examples is available on the CodePen website, where you can see the compiled CSS.
All approaches in this article use simple HTML code, which I call the “basic menu”. The role attribute is used to specify a specific type: horizontal menu (full-horizontal), drop-down list (select), drop-down menu (custom-dropdown) and canvas.
')
For styles, I use the same media query for all variations:
The easiest approach, because you only need to make a list of elements the width of the whole page:
With additional design, it looks like this on screens with a small resolution:
An example of a horizontal menu can be seen on the CodePen website.
In this approach, the base menu is hidden and a drop-down list is shown instead.
To achieve this effect, we need to add a drop-down list to the base markup. To make it work, we will have to add JavaScript code that changes the value of window.location .href when the onchange event occurs.
Hide the list on the big screens:
On small screens, hide the base menu and show the drop-down list. To help the user understand that this menu - we will add a pseudo-element with the text "Menu"
With additional design, it looks like this on screens with a small resolution:
An example of this menu .
In this approach, the base menu is hidden on small screens and the input and label is shown instead of them (using the checkbox hack ). When a user clicks on a label, the base menu is shown below it.
Two main problems with this solution:
This had no effect, because the checkbox hack used a
The best solution is to use animation only for WebKit browsers for the tag.
Introduction
In the code presented in the article, I do not use browser prefixes, so that the style code remains easy to read and understand. More complex examples use SCSS. Each of the examples is available on the CodePen website, where you can see the compiled CSS.
All approaches in this article use simple HTML code, which I call the “basic menu”. The role attribute is used to specify a specific type: horizontal menu (full-horizontal), drop-down list (select), drop-down menu (custom-dropdown) and canvas.
')
<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> For styles, I use the same media query for all variations:
@media screen and (max-width: 44em) { } 1. Horizontal menu
The easiest approach, because you only need to make a list of elements the width of the whole page:
<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%; } } } With additional design, it looks like this on screens with a small resolution:
Benefits
- JavaScript not required
- No extra markup
- Simple style code
disadvantages
- Takes up too much screen space.
An example of a horizontal menu can be seen on the CodePen website.
2. Drop-down list
In this approach, the base menu is hidden and a drop-down list is shown instead.
To achieve this effect, we need to add a drop-down list to the base markup. To make it work, we will have to add JavaScript code that changes the value of window.location .href when the onchange event occurs.
<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> Hide the list on the big screens:
nav[role="select"] { > select { display:none; } } On small screens, hide the base menu and show the drop-down list. To help the user understand that this menu - we will add a pseudo-element with the text "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; } } } With additional design, it looks like this on screens with a small resolution:
Benefits
- Does not take much space
- Uses "own" controls
disadvantages
- JavaScript required for work
- Duplicate content occurs
- Drop-down list cannot be styled in all browsers.
An example of this menu .
3. Custom drop-down menu
In this approach, the base menu is hidden on small screens and the input and label is shown instead of them (using the checkbox hack ). When a user clicks on a label, the base menu is shown below it.
<nav role="custom-dropdown"> <!-- Advanced Checkbox Hack (see description below) --> <!-- basic menu goes here --> </nav> Problems with using hack with checkbox
Two main problems with this solution:
- It does not work on mobile versions of Safari (iOS <6.0) . It is impossible to click on the label in the browser under iOS <6.0, so that the input can work because of a bug. Solved by adding an empty onclick event on the label.
- It does not work on the main browser Android OS version less than or equal to 4.1.2. A long time ago, there was a bug in the WebKit engine that did not allow the use of pseudo-classes with a combination of selectors
+and~
h1 ~ p { color: black; } h1:hover ~ p { color: red; } This had no effect, because the checkbox hack used a
:checked pseudo-class with a selector ~ . And while the bug was not fixed in WebKit 535.1 (Chrome 13) and is relevant for Android 4.1.2 WebKit 534.30, the hack did not work on any Android device.The best solution is to use animation only for WebKit browsers for the tag.
.
:
<!-- 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 , , ..
:
<!-- 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 , , .Source: https://habr.com/ru/post/159359/
All Articles