Skip to content

Commit 8a9d62a

Browse files
amit265amit265
committed
sliding side bar added
1 parent b429f86 commit 8a9d62a

File tree

5 files changed

+129
-0
lines changed

5 files changed

+129
-0
lines changed

‎sidebar-menu/assets/close.png‎

9.5 KB
Loading

‎sidebar-menu/assets/interface.png‎

12.9 KB
Loading

‎sidebar-menu/index.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<link rel="stylesheet" href="styles.css">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Sidebar Menu</title>
8+
</head>
9+
<body>
10+
<div class="main">
11+
<div class="header">
12+
<img class="icon hamburger-icon" src="./assets/interface.png" alt="hamburger-icon">
13+
</div>
14+
<div class="side-bar hidden" id="sidebar">
15+
<div class="title">
16+
<h2>AMIT</h2>
17+
<img class="icon close-icon" src="./assets/close.png" alt="close-icon">
18+
</div>
19+
<div>
20+
<ul>
21+
<a href="#"><li>Home</li></a>
22+
<a href="#"><li>About</li></a>
23+
<a href="#"><li>Contact</li></a>
24+
</ul>
25+
</div>
26+
</div>
27+
</div>
28+
<script src="script.js"></script>
29+
</body>
30+
</html>

‎sidebar-menu/script.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
const hamburger = document.querySelector(".hamburger-icon");
2+
const sidebar = document.querySelector(".side-bar");
3+
const close = document.querySelector(".close-icon");
4+
5+
close.addEventListener("click", () => {
6+
// sidebar.classList.add("hidden");
7+
console.log("hey you clicked me");
8+
sidebar.classList.toggle("hidden");
9+
10+
})
11+
12+
13+
hamburger.addEventListener("click", () => {
14+
sidebar.classList.toggle("hidden");
15+
16+
})

‎sidebar-menu/styles.css‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
}
5+
body {
6+
font-family: sans-serif;
7+
background: #ebebeb;
8+
}
9+
10+
.main {
11+
margin: 1rem;
12+
height: 100vh;
13+
}
14+
15+
.header {
16+
display: flex;
17+
justify-content: end;
18+
}
19+
20+
.icon {
21+
padding: 10px;
22+
height: 2rem;
23+
cursor: pointer;
24+
border-radius: 10px;
25+
}
26+
.icon:hover {
27+
background-color: red;
28+
}
29+
30+
.title {
31+
padding: 1rem;
32+
display: flex;
33+
justify-content: space-between;
34+
align-items: center;
35+
border-bottom: 1px solid black;
36+
}
37+
38+
.side-bar {
39+
position: fixed;
40+
background-color: white;
41+
width: 50%;
42+
padding: 2rem;
43+
height: 100%;
44+
transition: all 0.3s linear;
45+
transform: translate(-100%);
46+
margin-left: -2rem;
47+
margin-top: -5rem;
48+
49+
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
50+
}
51+
52+
ul {
53+
list-style: none;
54+
font-size: 1.5rem;
55+
display: flex;
56+
flex-direction: column;
57+
gap: 0.5rem;
58+
}
59+
60+
li {
61+
padding: 1rem;
62+
}
63+
64+
li:hover {
65+
background-color: aqua;
66+
}
67+
68+
a {
69+
text-decoration: none;
70+
}
71+
72+
a:hover {
73+
color: blue;
74+
}
75+
76+
h2 {
77+
color: orangered;
78+
}
79+
80+
.hidden {
81+
transform: translate(0);
82+
}
83+

0 commit comments

Comments
 (0)