Last active
September 13, 2016 13:37
-
-
Save sudarshanReddykurri/6e1244cfee0473c8c500d7abb441e285 to your computer and use it in GitHub Desktop.
Pure CSS Menu Bar & it is fully customizable
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
| <html> | |
| <body> | |
| <input type="checkbox" id="sidebartoggler" name="" value=""> | |
| <div class="page-wrap"> | |
| <nav id="navbar"> | |
| <label for="sidebartoggler" class="toggle"> | |
| <div class="hamb"></div> | |
| <div class="hamb" style=""></div> | |
| <div class="hamb"></div> | |
| </label> | |
| </nav> | |
| <div class="sidebar"> | |
| <ul> | |
| <li>Home</li> | |
| <li>Projects</li> | |
| <li>Clients</li> | |
| <li>Blog</li> | |
| <li>Contact</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
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
| html, body { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .hamb{ | |
| width: 28px; | |
| height: 5px; | |
| background: white; | |
| margin-bottom: 3px; | |
| } | |
| #navbar{ | |
| height: 45px; | |
| width: 100%; | |
| position: absolute; | |
| z-index:9999; | |
| background: black; | |
| } | |
| .page-content { | |
| width: 75%; | |
| margin: auto; | |
| position: relative; | |
| z-index: 0; | |
| -webkit-transition: all 0.15s ease-out 0; | |
| -moz-transition: all 0.15s ease-out 0; | |
| transition: all 0.15s ease-out 0; | |
| background: #eeeeee; | |
| } | |
| .toggle { | |
| text-decoration: none; | |
| font-size: 30px; | |
| color: black; | |
| -webkit-transition: all 0.15s ease-out 0; | |
| -moz-transition: all 0.15s ease-out 0; | |
| transition: all 0.15s ease-out 0; | |
| position: fixed; | |
| top: 10px; | |
| right: 20px; | |
| z-index: 1; | |
| cursor: pointer; | |
| transition: .8s; | |
| } | |
| .sidebar { | |
| position: fixed; | |
| top: 45px; | |
| right: -180px; | |
| -webkit-transition: all 0.15s ease-out 0; | |
| -moz-transition: all 0.15s ease-out 0; | |
| transition: all 0.15s ease-out 0; | |
| width: 120px; | |
| padding: 30px; | |
| background: #333333; | |
| z-index: 0; | |
| transition: .7s; | |
| } | |
| .sidebar ul { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; } | |
| .sidebar li { | |
| color: rgba(255, 255, 255, 0.8); | |
| font-family: "Ubuntu", sans-serif; | |
| font-size: 16px; | |
| margin: 0; | |
| margin-bottom: 16px; | |
| -webkit-font-smoothing: antialiased; | |
| cursor: pointer; } | |
| .sidebar li:hover { | |
| color: white; } | |
| #sidebartoggler { | |
| display: none; | |
| } | |
| #sidebartoggler:checked + .page-wrap .sidebar { | |
| right: 0px; | |
| transition: .6s; | |
| } | |
| #sidebartoggler:checked + .page-wrap { | |
| right: 200px; | |
| transition: .6s; | |
| } | |
| #sidebartoggler:checked + .page-wrap .page-content { | |
| opacity: .8; | |
| } | |
| .toggle .hamb:first-child | |
| { | |
| transform-origin: 0% 0%; | |
| } | |
| .toggle .hamb:nth-last-child(2) | |
| { | |
| transform-origin: 0% 100%; | |
| } | |
| #sidebartoggler:checked + .page-wrap > #navbar > .toggle .hamb:nth-last-child(1) | |
| { | |
| opacity: 1; | |
| transform: rotate(45deg) translate(-6px, -2.8px); | |
| } | |
| #sidebartoggler:checked + .page-wrap > #navbar > .toggle .hamb:nth-last-child(3) | |
| { | |
| opacity: 0; | |
| transform: rotate(0deg) scale(0.2, 0.2); | |
| } | |
| #sidebartoggler:checked + .page-wrap > #navbar > .toggle .hamb:nth-last-child(2) | |
| { | |
| opacity: 1; | |
| transform: rotate(-45deg) translate(-6px, 9px); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment