Responsive SideBar Navigation

This is a simple side bar navigation using HTML 5, CSS 3, and JavaScript.

HTML
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <meta charset="UTF-8">  
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">  
  8.     <title>Side bar menu</title>  
  9.     <link rel="stylesheet" href="style.css" /> </head>  
  10.   
  11. <body>  
  12.     <nav class="top-nav"> <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> </nav>  
  19.     <div id="side-bar" class="side-nav">  
  20.         <ul>  
  21.             <li><a href="#">Home</a></li>  
  22.             <li><a href="#">About</a></li>  
  23.             <li><a href="#">Contacts</a></li>  
  24.             <li><a href="#">Help</a></li>  
  25.         </ul>  
  26.     </div>  
  27.     <div id="body-content"> Body Content here </div>  
  28.     <script src="work.js"></script>  
  29. </body>  
  30.   
  31. </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. }.top - nav {  
  9.     height: 50 px;  
  10.     background - color: #1e90ff;    
  11. position: fixed;    
  12. left: 0;    
  13. width: 100%;    
  14. margin: 0px 5px;    
  15. z-index: 1; }    
  16. .top-nav h2 {    
  17. margin: auto; }    
  18.     
  19. .side-nav {    
  20. height: 100%;    
  21. position: fixed;    
  22. width: 0px;    
  23. top: 58px;    
  24. left: 0;    
  25. bottom: 0;    
  26. margin: 0px 5px;    
  27. background-color: # d3d3d3;  
  28.     transition: 1 s;  
  29. }.side - nav ul {  
  30.     padding: 0;  
  31.     list - style: none;  
  32.     margin: 0;  
  33. }.side - nav ul li {  
  34.     background - color: grey;  
  35.     cursor: pointer;  
  36.     border - radius: 2 px;  
  37.     margin: 2 px;  
  38.     padding: 5 px 0 px;  
  39.     text - align: center;  
  40. }.side - nav ul li: hover {  
  41.     background - color: #008080; }    
  42. .side-nav ul li a {    
  43. text-decoration: none;    
  44. color: # f9f9f9;  
  45. }#  
  46. body - content {  
  47.     position: absolute;  
  48.     top: 58 px;  
  49.     transition: margin - left 1 s;  
  50. }  
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.

 
X

Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now