Pure CSS implementation
A Pen by Hussain AlQatari on CodePen.
Created
November 9, 2016 22:02
-
-
Save anonymous/788c3e6b6bdda05f64bcaf1d6dd51405 to your computer and use it in GitHub Desktop.
Responsive menu demo
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 type="checkbox" id="navbar-checkbox" class="navbar-checkbox"> | |
| <nav class="menu"> | |
| <ul> | |
| <li>Home</li> | |
| <li>About us</li> | |
| <li> | |
| Our company | |
| <ul> | |
| <li>History</li> | |
| <li>Very long and tedious history</li> | |
| </ul> | |
| </li> | |
| <li>Our team</li> | |
| <li>Contact us</li> | |
| </ul> | |
| <label for="navbar-checkbox" class="navbar-handle"></label> | |
| </nav> |
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
| // Smaller menu when on small screen | |
| // All padding and margin are in em, so they will scale as well | |
| @media (min-width : 900px) { | |
| .menu { | |
| font-size: 1.2em; | |
| } | |
| } | |
| .menu { | |
| padding: 0.5em; | |
| background: #eee; | |
| min-height: 2em; | |
| line-height: 1em; | |
| > ul { | |
| transition: max-height .25s linear; | |
| } | |
| ul { | |
| margin: 0; | |
| padding: 0; | |
| text-align: center; | |
| } | |
| li { | |
| // visibility transition is on li because multiple transition selectors is not well supported | |
| transition: visibility .25s linear; | |
| display: inline-block; | |
| border: 1px solid; | |
| padding: .45em 1.1em; | |
| margin: 0 .3em; | |
| position: relative; | |
| } | |
| } | |
| @media (min-width : 651px) { | |
| .menu { | |
| li { // nested menu | |
| ul { | |
| display: none; | |
| position: absolute; | |
| top: 100%; | |
| margin-top: 1px; | |
| left: -1px; | |
| right: -1px; | |
| } | |
| &:hover ul { | |
| display: block; | |
| } | |
| li { | |
| margin: -1px 0 0 0; | |
| box-sizing: border-box; | |
| width: 100%; | |
| } | |
| } | |
| } | |
| } | |
| @media (max-width : 650px) { | |
| .menu { | |
| > ul { | |
| max-height: 0; | |
| overflow: hidden; | |
| margin: 0 3.5em 0 1em; | |
| } | |
| li { | |
| visibility: hidden; | |
| display: block; | |
| padding: 0.5em 0.6em; | |
| border: none; | |
| } | |
| li { // nested menu | |
| ul { | |
| margin-top: 0.5em; | |
| border-left: 1px solid #000; | |
| } | |
| } | |
| .navbar-handle { | |
| display: block; | |
| } | |
| } | |
| #navbar-checkbox:checked + .menu { | |
| ul { | |
| max-height: 300px; | |
| } | |
| li { | |
| visibility: visible; | |
| } | |
| .navbar-handle { | |
| &, &:after, &:before { | |
| border-color: #aaa; | |
| } | |
| } | |
| } | |
| } | |
| .navbar-checkbox { | |
| display: none; | |
| } | |
| .navbar-handle { | |
| @height: 45px; // just a reference to compute em values on the fly | |
| display: none; | |
| cursor: pointer; | |
| position: relative; | |
| font-size: @height; | |
| padding: .5em 0; | |
| height: 0; | |
| width: 1em * 75px / @height; | |
| border-top: (1em * 6px / @height) solid; | |
| &:before, &:after { | |
| position: absolute; | |
| left: 0; | |
| right: 0; | |
| content: ' '; | |
| border-top: (1em * 6px / @height) solid; | |
| } | |
| &:before { | |
| top: 1em * 17px / @height; | |
| } | |
| &:after { | |
| top: 1em * 40px / @height; | |
| } | |
| } | |
| /////////// | |
| .menu { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| .navbar-handle { | |
| position: absolute; | |
| font-size: 1.2em; | |
| top: 0.7em; | |
| right: 12px; | |
| z-index: 10; | |
| } | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment