Instantly share code, notes, and snippets.
Last active
September 22, 2017 21:09
-
Star
0
(0)
You must be signed in to star a gist -
Fork
0
(0)
You must be signed in to fork a gist
-
Save cyancey76/a122bdf3204f98492eabfd3059473b4e to your computer and use it in GitHub Desktop.
CSS-only mobile nav trigger
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .nav-trigger { | |
| display: none; | |
| } | |
| .nav-trigger + label[for] { | |
| display: inline-block; | |
| box-sizing: border-box; | |
| min-height: 40px; | |
| min-width: 40px; | |
| position: relative; | |
| padding: 40px 8px 5px; | |
| cursor: pointer; | |
| } | |
| .nav-trigger + label[for]:before, | |
| .nav-trigger + label[for]:after, | |
| .nav-trigger + label[for] > span:before { | |
| position: absolute; | |
| display: block; | |
| content: ""; | |
| width: 30px; | |
| height: 6px; | |
| -webkit-transition: all 0.2s ease-in-out; | |
| -o-transition: all 0.2s ease-in-out; | |
| transition: all 0.2s ease-in-out; | |
| border-radius: 3px; | |
| } | |
| .nav-trigger + label[for]:before { | |
| top: 9px; | |
| left: 50%; | |
| margin-left: -15px; | |
| } | |
| .nav-trigger + label[for] span:before { | |
| display: block; | |
| top: 19px; | |
| left: 50%; | |
| margin-left: -15px; | |
| } | |
| .nav-trigger + label[for]:after { | |
| top: 29px; | |
| left: 50%; | |
| margin-left: -15px; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Cosmetic styles */ | |
| .nav-trigger + label[for] { | |
| background-color: #000000; | |
| color: #FFFFFF; | |
| border-radius: 3px; | |
| font-family: sans-serif; | |
| } | |
| .nav-trigger + label[for]:before, | |
| .nav-trigger + label[for]:after, | |
| .nav-trigger + label[for] > span:before { | |
| background-color: #FFFFFF; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Include these for trigger with side label */ | |
| .nav-trigger.side-label + label[for] { | |
| padding: 5px 45px 5px 8px; | |
| display: inline-flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| width: auto; | |
| } | |
| .nav-trigger.side-label + label[for]:before { | |
| top: 50%; | |
| margin-top: -13px; | |
| right: 8px; | |
| left: inherit; | |
| margin-left: 0; | |
| } | |
| .nav-trigger.side-label + label[for] span:before { | |
| top: 50%; | |
| margin-top: -3px; | |
| right: 8px; | |
| left: inherit; | |
| margin-left: 0; | |
| } | |
| .nav-trigger.side-label + label[for]:after { | |
| top: 50%; | |
| margin-top: 7px; | |
| right: 8px; | |
| left: inherit; | |
| margin-left: 0; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <input name="trigger" id="trigger" class="nav-trigger simple side-label" type="checkbox" /> | |
| <label for="trigger"><span class="trigger-label">Trigger</span></label> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Include these for simple trigger */ | |
| .nav-trigger.simple:checked + label[for]:before { | |
| -webkit-transform: translateY(10px) rotate(45deg); | |
| -ms-transform: translateY(10px) rotate(45deg); | |
| -o-transform: translateY(10px) rotate(45deg); | |
| transform: translateY(10px) rotate(45deg); | |
| } | |
| .nav-trigger.simple:checked + label[for] span:before { | |
| opacity: 0; | |
| } | |
| .nav-trigger.simple:checked + label[for]:after { | |
| -webkit-transform: translateY(-10px) rotate(-45deg); | |
| -ms-transform: translateY(-10px) rotate(-45deg); | |
| -o-transform: translateY(-10px) rotate(-45deg); | |
| transform: translateY(-10px) rotate(-45deg); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <input name="trigger" id="trigger" class="nav-trigger simple" type="checkbox" /> | |
| <label for="trigger"><span class="trigger-label">Trigger</span></label> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Include these for trigger without label */ | |
| .nav-trigger.without-label + label[for] { | |
| padding-left: 4px; | |
| padding-right: 4px; | |
| } | |
| .nav-trigger.without-label + label[for] > span { | |
| display: block; | |
| height: 0; | |
| width: 0; | |
| min-width: 40px; | |
| overflow: hidden; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <input name="trigger" id="trigger" class="nav-trigger simple without-label" type="checkbox" /> | |
| <label for="trigger"><span class="trigger-label">Trigger</span></label> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment