Responsive Sidebar Navigation

This is a simple sidebar navigation using HTML 5, CSS 3, and JavaScript.
HTML
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>Side bar menu</title>
  8. <link rel="stylesheet" href="style.css" />
  9. </head>
  10. <body>
  11. <nav class="top-nav">
  12. <svg height="20" width="20" onclick="openSideNav()">
  13. <g fill="none" stroke="black" stroke-width="4">
  14. <path stroke-linecap="round" d="M5 5 l215 0" />
  15. <path stroke-linecap="round" d="M5 10 l215 0" />
  16. <path stroke-linecap="round" d="M5 15 l215 0" />
  17. </g>
  18. </svg>
  19. </nav>
  20. <div id="side-bar" class="side-nav">
  21. <ul>
  22. <li>
  23. <a href="#">Home</a>
  24. </li>
  25. <li>
  26. <a href="#">About</a>
  27. </li>
  28. <li>
  29. <a href="#">Contacts</a>
  30. </li>
  31. <li>
  32. <a href="#">Help</a>
  33. </li>
  34. </ul>
  35. </div>
  36. <div id="body-content"> Body Content here </div>
  37. <script src="work.js"></script>
  38. </body>
  39. </html>
CSS
Create an external stylesheet file. (style.css)
  1. body {
  2. font - family: Arial, Helvetica, sans - serif;
  3. font - size: 13 px;
  4. }
  5. svg {
  6. cursor: pointer;
  7. margin: 15 px;
  8. }
  9. .top - nav {
  10. height: 50 px;
  11. background - color: #1e90ff;
  12. position: fixed;
  13. left: 0;
  14. width: 100%;
  15. margin: 0px 5px;
  16. z-index: 1;
  17. }
  18. .top-nav h2 {
  19. margin: auto;
  20. }
  21. .side-nav {
  22. height: 100%;
  23. position: fixed;
  24. width: 0px;
  25. top: 58px;
  26. left: 0;
  27. bottom: 0;
  28. margin: 0px 5px;
  29. background-color: # d3d3d3;
  30. transition: 1 s;
  31. }
  32. .side - nav ul {
  33. padding: 0;
  34. list - style: none;
  35. margin: 0;
  36. }
  37. .side - nav ul li {
  38. background - color: grey;
  39. cursor: pointer;
  40. border - radius: 2 px;
  41. margin: 2 px;
  42. padding: 5 px 0 px;
  43. text - align: center;
  44. }
  45. .side - nav ul li: hover {
  46. background - color: #008080;
  47. }
  48. .side-nav ul li a {
  49. text-decoration: none;
  50. color: # f9f9f9;
  51. }
  52. #body - content {
  53. position: absolute;
  54. top: 58 px;
  55. transition: margin - left 1 s;
  56. }
JS
Add an external javaScript file. (work.js)
  1. function openSideNav() {
  2. var sideBarDisplay = document.getElementById("side-bar").style.width;
  3. if (sideBarDisplay == "150px") {
  4. document.getElementById("side-bar").style.width = "0px";
  5. document.getElementById("body-content").style.marginLeft = "0px";
  6. } else {
  7. document.getElementById("side-bar").style.width = "150px";
  8. document.getElementById("body-content").style.marginLeft = "150px";
  9. }
  10. }
When the page loads, click on SVG bars.
a
s