Created
May 31, 2018 15:49
-
-
Save oliverbth05/9b64348313f7ddc2a67d074ea28d8678 to your computer and use it in GitHub Desktop.
Navigation Side Drawer
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
| *{ | |
| padding: 0; | |
| margin: 0; | |
| font-family: 'Lato', sans-serif; | |
| } | |
| /* The sidebar menu */ | |
| .sidenav { | |
| height: 100%; /* Full-height: remove this if you want "auto" height */ | |
| width: 150px; /* Set the width of the sidebar */ | |
| position: fixed; /* Fixed Sidebar (stay in place on scroll) */ | |
| z-index: 1; /* Stay on top */ | |
| top: 0; /* Stay at the top */ | |
| left: 0; | |
| background: linear-gradient(to right ,rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.8)); | |
| overflow-x: hidden; /* Disable horizontal scroll */ | |
| padding-top: 0; | |
| } | |
| .sidenav-heading{ | |
| display: block; | |
| padding: 20px 5px; | |
| text-align:center; | |
| color: white; | |
| font-weight: lighter; | |
| } | |
| .sidenav a { | |
| text-align: center; | |
| padding: 6px 8px 6px 16px; | |
| text-decoration: none; | |
| font-size: 15px; | |
| color: white; | |
| display: block; | |
| text-transform: uppercase; | |
| padding: 20px; | |
| } | |
| .sidenav a:hover { | |
| background: white; | |
| transition: all .3s; | |
| color: black; | |
| transform: translateY(-5px); | |
| } | |
| /* Main margin has to be the same as sidenav width. */ | |
| .main { | |
| margin-left: 150px; | |
| } | |
| @media screen and (max-width: 650px) { | |
| .sidenav {visibility: hidden} | |
| .sidenav a {font-size: 13px;} | |
| .main{margin: 0;} | |
| .menu-button {visibility: visible;} | |
| } |
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
| <head> | |
| <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"> | |
| </head> | |
| <body> | |
| <!-- Side navigation --> | |
| <div class="sidenav"> | |
| <h1 class = "sidenav-heading"> | |
| <i class="fas fa-bars"></i> | |
| </h1> | |
| <a href="#">Link 1</a> | |
| <a href="#">Link 2</a> | |
| <a href="#">Link 3</a> | |
| <a href="#">Link 4</a> | |
| </div> | |
| <!-- Page content --> | |
| <div class="main"> | |
| </div> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment