Instantly share code, notes, and snippets.
Last active
February 6, 2020 17:32
-
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 dkvz/964e76375e80c466e37c85b9bb5bc081 to your computer and use it in GitHub Desktop.
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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>CSS-Only Responsive Navbar</title> | |
| <style> | |
| html, | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| display: flex; | |
| flex-direction: column; | |
| background-color: #a2ccb6; | |
| color: #555; | |
| font-family: sans-serif; | |
| } | |
| header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 2rem; | |
| background-color: #fceeb5; | |
| border-bottom: #ee786e; | |
| box-shadow: 0px 2px 6px rgb(0, 0, 0, 0.6); | |
| } | |
| header h1 { | |
| margin: 0; | |
| line-height: 32px; | |
| } | |
| main { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| main>section { | |
| flex: 1; | |
| background-color: #fceeb5; | |
| margin-top: 2rem; | |
| padding: 1rem; | |
| } | |
| .mobile-menu { | |
| cursor: pointer; | |
| } | |
| #mobile-menu-checkbox { | |
| opacity: 0; | |
| } | |
| #mobile-menu-checkbox:checked~aside { | |
| min-width: 200px; | |
| } | |
| /* Important d'utiliser fixed ici, | |
| absolute apparaîtrait toujours en haut à | |
| droite même si on est légèrement scrollé */ | |
| aside { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| height: 100vh; | |
| background-color: #fceeb5; | |
| box-shadow: 2px 0px 6px rgb(0, 0, 0, 0.5); | |
| padding: 0; | |
| min-width: 0; | |
| width: 0; | |
| transition: all 0.3s; | |
| overflow: hidden; | |
| } | |
| aside nav ul { | |
| list-style: none; | |
| margin-top: 1.2rem; | |
| padding: 0; | |
| } | |
| aside nav a { | |
| width: 100%; | |
| display: block; | |
| color: #ee786e; | |
| text-decoration: none; | |
| padding: 0.6rem 1rem 0.6rem 1rem; | |
| transition: background-color 0.8s ease-out; | |
| } | |
| aside nav a:hover { | |
| background-color: #ee786e; | |
| color: #ebebeb; | |
| } | |
| @media (min-width: 900px) { | |
| .mobile-menu { | |
| display: none; | |
| } | |
| aside { | |
| min-width: 200px; | |
| box-shadow: none; | |
| border-right: #ee786e 2px solid; | |
| } | |
| header { | |
| margin-left: 200px; | |
| } | |
| main { | |
| margin-left: 200px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>My Website</h1> | |
| <div> | |
| <label role="button" aria-controls="navbar" aria-label="Toggle navigation" for="mobile-menu-checkbox" | |
| class="mobile-menu"> | |
| <svg width="45" height="45" viewBox="0 0 60 60"> | |
| <rect x="3" y="3" width="54" height="54" rx="15" ry="15" | |
| style="fill:transparent;stroke-width:3;stroke:#555" /> | |
| <line x1="16" y1="15" x2="44" y2="15" style="stroke:#555;stroke-width:5" /> | |
| <line x1="16" y1="30" x2="44" y2="30" style="stroke:#555;stroke-width:5" /> | |
| <line x1="16" y1="45" x2="44" y2="45" style="stroke:#555;stroke-width:5" /> | |
| </svg> | |
| </label> | |
| <input aria-hidden="true" type="checkbox" id="mobile-menu-checkbox" name="mobile-menu-checkbox"> | |
| <aside> | |
| <nav id="navbar"> | |
| <ul> | |
| <li><a href="#">Home</a></li> | |
| <li><a href="#">About</a></li> | |
| <li><a href="#">Blog</a></li> | |
| <li><a href="#">Contact</a></li> | |
| </ul> | |
| </nav> | |
| </aside> | |
| </div> | |
| </header> | |
| <main> | |
| <section> | |
| <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit fugiat totam magni aliquid alias | |
| perferendis, nostrum incidunt deserunt odit voluptatem sed quae quos repellendus nesciunt reiciendis veniam in | |
| velit! Hic!</p> | |
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate qui voluptatum enim! Esse obcaecati, | |
| consectetur sint nisi corporis delectus voluptas officia perferendis harum tempore. Omnis dolor iusto corrupti | |
| voluptatem inventore officiis, quis explicabo? Inventore quas quaerat ducimus sunt. Iusto, qui!</p> | |
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat autem nostrum magnam quam? Amet nesciunt iure | |
| totam earum, nostrum dignissimos.</p> | |
| </section> | |
| </main> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
For a focus outline to appear the label must have a tabindex. Even though it is focusable without it and can be activated with the spacebar nonetheless.