Created
November 20, 2020 06:41
-
-
Save MuhammadKhizar7/a62566553a9b44bbe6ca293b22d7329d to your computer and use it in GitHub Desktop.
menu in pure css
This file contains 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" /> | |
| <title>Menu pure css</title> | |
| <style> | |
| html, | |
| body { | |
| height: 100%; | |
| } | |
| body { | |
| font-family: monospace; | |
| margin: 0; | |
| background: #ededed; | |
| } | |
| main { | |
| padding: 1rem 1rem 0 1rem; | |
| transition: margin 0.3s; | |
| } | |
| .side-nav { | |
| padding: 1rem; | |
| box-sizing: border-box; | |
| background: white; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| height: 100%; | |
| width: 300px; | |
| transform: translatex(-100%); | |
| transition: transform 0.3s; | |
| box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), | |
| 0 1px 2px 0 rgba(0, 0, 0, 0.06); | |
| } | |
| .side-nav:target { | |
| transform: translatex(0); | |
| } | |
| .side-nav:target ~ main { | |
| margin-left: 300px; | |
| } | |
| .side-nav:target ~ main .open { | |
| display: none; | |
| } | |
| .side-nav:not(:target) ~ main .close { | |
| display: none; | |
| } | |
| .side-nav .links { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .side-nav .links > .link { | |
| font-size: 1.5rem; | |
| text-decoration: none; | |
| padding: 0.5rem 1rem; | |
| border: 1px solid silver; | |
| margin-bottom: 0.5rem; | |
| border-radius: 1rem; | |
| } | |
| .open, | |
| .close { | |
| box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), | |
| 0 1px 2px 0 rgba(0, 0, 0, 0.06); | |
| border-radius: 1rem; | |
| font-size: 1.5rem; | |
| background: white; | |
| text-transform: uppercase; | |
| text-decoration: none; | |
| display: inline-flex; | |
| flex-direction: row; | |
| align-items: center; | |
| padding: 0.5rem 1rem; | |
| border: 1px solid silver; | |
| } | |
| .open > svg, | |
| .close > svg { | |
| margin-right: 1rem; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="side-nav" id="nav"> | |
| <div class="links"> | |
| <a class="link" href="#"><span>Home</span></a | |
| ><a class="link" href="#"><span>Profile</span></a | |
| ><a class="link" href="#"><span>Settings</span></a> | |
| </div> | |
| </div> | |
| <main> | |
| <header> | |
| <a class="open" href="#nav"> | |
| <svg viewBox="0 0 448 512" width="20" title="bars"> | |
| <path | |
| d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z" | |
| ></path> | |
| </svg> | |
| ><span>Menu</span></a | |
| ><a class="close" href="#"> | |
| <svg viewBox="0 0 448 512" width="20" title="outdent"> | |
| <path | |
| d="M100.69 363.29c10 10 27.31 2.93 27.31-11.31V160c0-14.32-17.33-21.31-27.31-11.31l-96 96a16 16 0 0 0 0 22.62zM432 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm3.17-128H204.83A12.82 12.82 0 0 0 192 300.83v38.34A12.82 12.82 0 0 0 204.83 352h230.34A12.82 12.82 0 0 0 448 339.17v-38.34A12.82 12.82 0 0 0 435.17 288zm0-128H204.83A12.82 12.82 0 0 0 192 172.83v38.34A12.82 12.82 0 0 0 204.83 224h230.34A12.82 12.82 0 0 0 448 211.17v-38.34A12.82 12.82 0 0 0 435.17 160zM432 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z" | |
| ></path> | |
| </svg> | |
| ><span>Close</span></a | |
| > | |
| </header> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam arcu felis, | |
| finibus in lectus vitae, fermentum tempus nisl. Duis libero dolor, | |
| venenatis et lorem nec, lobortis vestibulum felis. Donec justo enim, | |
| venenatis vitae ex a, finibus mollis est. Donec placerat magna at nisl | |
| condimentum tincidunt. Sed eget faucibus elit. Aliquam tristique est non | |
| diam molestie, eu bibendum ante porta. Donec in lacinia dui. | |
| </p> | |
| <p> | |
| Nulla ac dictum turpis, quis consequat odio. Pellentesque rhoncus est | |
| quis nibh pulvinar sagittis. Donec rhoncus molestie massa nec | |
| pellentesque. Maecenas et nisl magna. Sed lorem nulla, aliquam sed nibh | |
| et, ornare vestibulum lacus. Vivamus suscipit magna et arcu condimentum | |
| laoreet. Suspendisse venenatis ligula quam, quis ornare libero iaculis | |
| a. Aenean posuere, libero at ultricies commodo, nibh neque eleifend | |
| erat, id molestie quam nulla ac libero. Proin dignissim nunc a ante | |
| viverra, quis facilisis nisl rutrum. Morbi tempus lectus a est placerat | |
| venenatis. Sed quis risus rhoncus, placerat turpis vitae, lacinia justo. | |
| Duis massa lectus, auctor et nunc et, egestas dictum orci. Nam ex enim, | |
| vehicula in lacus vel, fringilla imperdiet velit. Nulla est mi, suscipit | |
| vel nunc sed, sollicitudin egestas purus. Nulla in dignissim eros. | |
| </p> | |
| </main> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment