This is a simple side bar navigation using HTML 5, CSS 3, and JavaScript.
HTML- <!DOCTYPE html>
- <html lang="en">
-
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>Side bar menu</title>
- <link rel="stylesheet" href="style.css" /> </head>
-
- <body>
- <nav class="top-nav"> <svg height="20" width="20" onclick="openSideNav()">
- <g fill="none" stroke="black" stroke-width="4">
- <path stroke-linecap="round" d="M5 5 l215 0" />
- <path stroke-linecap="round" d="M5 10 l215 0" />
- <path stroke-linecap="round" d="M5 15 l215 0" />
- </g>
- </svg> </nav>
- <div id="side-bar" class="side-nav">
- <ul>
- <li><a href="#">Home</a></li>
- <li><a href="#">About</a></li>
- <li><a href="#">Contacts</a></li>
- <li><a href="#">Help</a></li>
- </ul>
- </div>
- <div id="body-content"> Body Content here </div>
- <script src="work.js"></script>
- </body>
-
- </html>
Create an external stylesheet file. (style.css)
- body {
- font - family: Arial, Helvetica, sans - serif;
- font - size: 13 px;
- }
- svg {
- cursor: pointer;
- margin: 15 px;
- }.top - nav {
- height: 50 px;
- background - color: #1e90ff;
- position: fixed;
- left: 0;
- width: 100%;
- margin: 0px 5px;
- z-index: 1; }
- .top-nav h2 {
- margin: auto; }
-
- .side-nav {
- height: 100%;
- position: fixed;
- width: 0px;
- top: 58px;
- left: 0;
- bottom: 0;
- margin: 0px 5px;
- background-color: # d3d3d3;
- transition: 1 s;
- }.side - nav ul {
- padding: 0;
- list - style: none;
- margin: 0;
- }.side - nav ul li {
- background - color: grey;
- cursor: pointer;
- border - radius: 2 px;
- margin: 2 px;
- padding: 5 px 0 px;
- text - align: center;
- }.side - nav ul li: hover {
- background - color: #008080; }
- .side-nav ul li a {
- text-decoration: none;
- color: # f9f9f9;
- }#
- body - content {
- position: absolute;
- top: 58 px;
- transition: margin - left 1 s;
- }
JS
Add an external javaScript file. (work.js)
- function openSideNav() {
- var sideBarDisplay = document.getElementById("side-bar").style.width;
- if (sideBarDisplay == "150px") {
- document.getElementById("side-bar").style.width = "0px";
- document.getElementById("body-content").style.marginLeft = "0px";
- } else {
- document.getElementById("side-bar").style.width = "150px";
- document.getElementById("body-content").style.marginLeft = "150px";
- }
- }
When the page loads, click on svg bars.