Post
Ask Question

Responsive SideBar Navigation

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
Next Recommended Reading Remove Scroll bars from the Responsive web page