Skip to content

Commit b5b404c

Browse files
Jaideep25-techJaideep25-tech
authored
Merge pull request #448 from srinjoy-26/side
Responsive sidebar
2 parents 457003a + 3822bcd commit b5b404c

File tree

4 files changed

+180
-0
lines changed

4 files changed

+180
-0
lines changed

‎Side-bar/README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
# Responsive sidebar
2+
## HTML , CSS , JS
3+
## LOOK
4+
![Screenshot 2022-05-31 213923](https://user-images.githubusercontent.com/91176055/171229784-bafcd02b-071b-4bbd-b291-24533c9c04b0.png)

‎Side-bar/index.html

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Responsive sidebar </title>
8+
<link rel="stylesheet" href="style.css">
9+
<script src="https://kit.fontawesome.com/e886567ce7.js" crossorigin="anonymous"></script>
10+
</head>
11+
<body>
12+
<div class="content">
13+
<h2>sidebar Menu <br> Using html and CSS</h2>
14+
</div>
15+
<div class="open">
16+
<span class="fa fa-bars" onclick="openbar()"></span>
17+
</div>
18+
<div class="sidebar" id="sidebar">
19+
<div class="close">
20+
<span class="fa fa-times" onclick="closebar()"></span>
21+
</div>
22+
<div class="title"> sidebar</div>
23+
<ul class="links">
24+
<li><a href="#"><i class="fa fa-home"> <br> Home</i></a></li>
25+
<li><a href="#"><i class="fa fa-qrcode"> <br> Dashboard</i></a></li>
26+
<li><a href="#"><i class="fa fa-user"> <br> Profile</i></a></li>
27+
<li><a href="#"><i class="fa fa-bell"> <br> Notification</i></a></li>
28+
<li><a href="#"><i class="fa fa-envelope"> <br> Contact us</i></a></li>
29+
<li><a href="#"><i class="fa fa-power-off"> <br> Logout</i></a></li>
30+
</ul>
31+
<div class="social">
32+
<i class="fa fa-instagram"></i>
33+
<i class="fa fa-youtube-play"></i>
34+
<i class="fa fa-facebook"></i>
35+
<i class="fa fa-twitter"></i>
36+
</div>
37+
</div>
38+
<script src="script.js"></script>
39+
40+
</body>
41+
</html>

‎Side-bar/script.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
function openbar(){
2+
let sidebar = document.getElementById("sidebar");
3+
sidebar.style.left = "0";
4+
}
5+
function closebar(){
6+
let sidebar = document.getElementById("sidebar");
7+
sidebar.style.left = "-250px";
8+
}

‎Side-bar/style.css

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
font-family: Arial, Helvetica, sans-serif;
6+
}
7+
8+
body{
9+
width: 100%;
10+
height: 100vh;
11+
position: relative;
12+
}
13+
14+
.content{
15+
position: absolute;
16+
top: 40%;
17+
left: 40%;
18+
}
19+
20+
.content h2{
21+
text-align: center;
22+
font-size: 40px;
23+
}
24+
25+
.open{
26+
position: absolute;
27+
left: 0;
28+
}
29+
30+
.open span{
31+
position: absolute;
32+
top: 20px;
33+
left: 35px;
34+
font-size: 30px;
35+
line-height: 35px;
36+
padding: 6px 10px;
37+
color: white;
38+
background: #333;
39+
border-radius: 4px;
40+
cursor: pointer;
41+
}
42+
43+
.sidebar{
44+
width: 250px;
45+
position: absolute;
46+
left: -250px;
47+
top: 0;
48+
height: 100%;
49+
background: #222;
50+
transition: 0.5s;
51+
}
52+
53+
.sidebar .close span{
54+
position: absolute;
55+
top: 5px;
56+
right: 10px;
57+
padding: 7px;
58+
color: white;
59+
background: #444;
60+
border-radius: 4px;
61+
cursor: pointer;
62+
}
63+
64+
.sidebar .title{
65+
padding-left: 60px;
66+
font-size: 25px;
67+
line-height: 60px;
68+
color: white;
69+
border-bottom: 2px solid gray;
70+
}
71+
72+
.sidebar .links li{
73+
list-style: none;
74+
display: block;
75+
width: 100%;
76+
line-height: 60px;
77+
border-left: 5px solid transparent;
78+
border-bottom: 2px solid gray;
79+
cursor: pointer;
80+
}
81+
82+
.sidebar .links li:hover{
83+
background: #333;
84+
border-left: 5px solid cornflowerblue;
85+
}
86+
87+
.sidebar .links li a{
88+
text-decoration: none;
89+
color: white;
90+
font-size: 20px;
91+
padding-left: 40px;
92+
transition: 0.5s;
93+
}
94+
95+
.sidebar .links li:hover a{
96+
color: cornflowerblue;
97+
letter-spacing: 1.2px;
98+
}
99+
100+
.sidebar .links li a i{
101+
margin-right: 5px;
102+
}
103+
104+
.sidebar .social{
105+
width: 100%;
106+
position: absolute;
107+
bottom: 30px;
108+
left: 20px;
109+
}
110+
111+
.sidebar .social i{
112+
width: 45px;
113+
font-size: 25px;
114+
color: white;
115+
background: #444;
116+
padding: 10px;
117+
text-align: center;
118+
margin-right: 5px;
119+
cursor: pointer;
120+
border-radius: 5px;
121+
transition: 0.5s;
122+
}
123+
124+
.sidebar .social i:hover{
125+
background: cornflowerblue;
126+
transform: translateY(-10px);
127+
}

0 commit comments

Comments
 (0)