sidebar menu with html css and javascript

guneyural · web-flow · commit 7e6eabaf56c8 · 2020-10-22T23:42:57.000+03:00
diff --git a/SidebarApp/app.js b/SidebarApp/app.js
@@ -0,0 +1,12 @@
+let collapse = document.querySelector('span');
+let sidebar = document.querySelector('.side-navbar');
+let i = 0;
+
+collapse.addEventListener("click", function(e) {
+     i++;
+     if(i % 2 === 0) {
+          sidebar.style.width = "160px";
+     } else{
+          sidebar.style.width = "0px";
+     }
+});
diff --git a/SidebarApp/index.html b/SidebarApp/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+     <meta charset="UTF-8">
+     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+     <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
+     <link rel="stylesheet" type="text/css" href="style.css">
+     <title>Document</title>
+</head>
+<body>
+     
+     <div class="side-navbar">
+          <div class="navbar">
+               <ul>
+                    <li>Home</li>
+                    <li>About</li>
+                    <li>Contact</li>
+               </ul>
+          </div> 
+     </div>    
+
+     <div class="container">
+          <span role="button">☰</span>
+          <h1>This is The website Content</h1>
+     </div>
+
+     <script src="app.js"></script>
+</body>
+</html>
diff --git a/SidebarApp/style.css b/SidebarApp/style.css
@@ -0,0 +1,76 @@
+body {
+     margin: 0;
+     padding:0;
+     font-family: 'Montserrat', Arial, Helvetica, sans-serif;
+}
+* {
+     margin: 0;
+     padding:0;
+}
+.container {
+     margin: 0 auto;
+     width: 70%;
+}
+
+.hidden {
+     visibility: hidden;
+}
+
+.side-navbar {
+     position: fixed;
+     height: 100%;
+     width: 160px;
+     top: 0;
+     left: 0;
+     z-index: 1;
+     overflow-x: hidden;
+     background: #efefef;
+     transition: 0.5s;
+}
+
+span {
+     padding:0;
+     margin:0; 
+     font-size: 35px; 
+     cursor: pointer; 
+     border-bottom: 1px solid black; 
+     width:100%;
+     padding-left:130px;
+}
+
+li {
+     list-style-type: none;
+     font-size: 22px;
+     padding-left: 20px;
+     padding-top: 5px;
+     padding-bottom: 5px;
+}
+
+li:hover {
+     background: #e0e0e0;     
+}
+
+li:nth-of-type(1) {
+     margin-top: 5px;
+}
+
+.btn {
+     padding: 5px;
+     font-size: 20px;
+}
+
+@media only screen and (max-width: 600px) {
+     .container {
+       margin-top: 0;
+       width: 100%;
+     }
+
+}
+
+@media only screen and (max-width: 800px) {
+     .container {
+       margin-top: 0;
+       margin-left: 20%;
+     }
+     
+}
