Geen omschrijving

sidenav.html 971B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1">
  5. <style>
  6. body {
  7. font-family: "Lato", sans-serif;
  8. }
  9. .sidenav {
  10. height: 100%;
  11. width: 200px;
  12. position: fixed;
  13. z-index: 1;
  14. top: 0;
  15. left: 0;
  16. background-color: #111;
  17. overflow-x: hidden;
  18. padding-top: 20px;
  19. }
  20. .sidenav a {
  21. padding: 6px 6px 6px 32px;
  22. text-decoration: none;
  23. font-size: 25px;
  24. color: #818181;
  25. display: block;
  26. }
  27. .sidenav a:hover {
  28. color: #f1f1f1;
  29. }
  30. .main {
  31. margin-left: 200px; /* Same as the width of the sidenav */
  32. }
  33. @media screen and (max-height: 450px) {
  34. .sidenav {padding-top: 15px;}
  35. .sidenav a {font-size: 18px;}
  36. }
  37. </style>
  38. </head>
  39. <body>
  40. <div class="sidenav">
  41. <a href="#">About</a>
  42. <a href="#">Services</a>
  43. <a href="#">Clients</a>
  44. <a href="#">Contact</a>
  45. </div>
  46. <div class="main">
  47. <h2>Sidenav Example</h2>
  48. <p>This sidenav is always shown.</p>
  49. </div>
  50. </body>
  51. </html>