Skip to content

Commit 3d09857

Browse files
aayush105aayush105
authored
Merge pull request #973 from pranavpanmand/add-sidebar-navigation
Add Responsive Sidebar Navigation Template (HTML & CSS Only) Fixes #972
2 parents f790cef + 24a7116 commit 3d09857

File tree

4 files changed

+221
-0
lines changed

4 files changed

+221
-0
lines changed

‎index.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -570,6 +570,10 @@ <h1>You Dont Need JavaScript</h1>
570570
<a href="./watch_art/index.html">Watch Art</a>
571571
<a href="./stickyheader/index.html">Sticky Header</a>
572572
<a href="./Music/index.html">Music Player</a>
573+
574+
<a href="./misc/todo-1.html">Todo</a>
575+
<a href="./Piano/index.html">Piano</a>
576+
<a href="./Slidebar/index.html">Slideshow</a>
573577
</td>
574578
</tr>
575579
</table>

‎slidebar/image.jpeg‎

490 KB
Loading

‎slidebar/index.html‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
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+
<title>Sidebar Menu</title>
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
9+
integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
10+
crossorigin="anonymous" referrerpolicy="no-referrer" />
11+
<link rel="stylesheet" href="style.css">
12+
</head>
13+
14+
<body>
15+
<div class="main-box">
16+
17+
<input type="checkbox" id="check">
18+
<div class="btn1">
19+
<label for="check">
20+
<i class="fas fa-bars"></i>
21+
</label>
22+
</div>
23+
24+
<div class="sidebar-menu">
25+
<div class="logo">
26+
<a href="#">Astro Space</a>
27+
</div>
28+
29+
<div class="btn2">
30+
<label for="check">
31+
<i class="fas fa-times"></i>
32+
</label>
33+
</div>
34+
35+
<ul class="menu">
36+
<li><a href="#"><i class="fas fa-qrcode"></i>
37+
Dashboard</a></li>
38+
<li><a href="#"><i class="fas fa-link"></i>
39+
Shortcuts</a></li>
40+
<li><a href="#"><i class="fas fa-stream"></i>
41+
Overview</a></li>
42+
<li><a href="#"><i class="fas fa-calendar-week"></i>
43+
Events</a></li>
44+
<li><a href="#"><i class="fas fa-question-circle"></i>
45+
About</a></li>
46+
<li><a href="#"><i class="fas fa-sliders-h"></i>
47+
Services</a></li>
48+
<li><a href="#"><i class="fas fa-phone-volume"></i>
49+
Contact</a></li>
50+
<li><a href="#"><i class="fas fa-comments"></i>
51+
Feedback</a></li>
52+
</ul>
53+
54+
<div class="social-media">
55+
<a href="#"><i class="fab fa-facebook-f"></i></a>
56+
<a href="#"><i class="fab fa-twitter"></i></a>
57+
<a href="#"><i class="fab fa-instagram"></i></a>
58+
<a href="#"><i class="fab fa-youtube"></i></a>
59+
</div>
60+
</div>
61+
</div>
62+
</body>
63+
64+
</html>

‎slidebar/style.css‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
2+
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
font-family: "Poppins", sans-serif;
8+
}
9+
10+
li {
11+
list-style-type: none;
12+
}
13+
14+
.main-box {
15+
position: relative;
16+
background: url('image.jpeg') right no-repeat;
17+
background-size: cover;
18+
height: 100vh;
19+
width: 100%;
20+
}
21+
22+
.sidebar-menu {
23+
position: fixed;
24+
height: 100vh;
25+
width: 280px;
26+
left: -280px;
27+
background: rgba(255, 255, 255, 0.1);
28+
box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
29+
}
30+
31+
.logo {
32+
position: absolute;
33+
width: 100%;
34+
height: 60px;
35+
box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
36+
}
37+
38+
.logo a {
39+
color: #fff;
40+
font-size: 25px;
41+
font-weight: 500;
42+
position: absolute;
43+
left: 50px;
44+
line-height: 60px;
45+
text-decoration: none;
46+
outline: none;
47+
-webkit-tap-highlight-color: transparent;
48+
}
49+
50+
.menu {
51+
position: absolute;
52+
top: 80px;
53+
width: 100%;
54+
}
55+
56+
.menu li {
57+
margin-top: 6px;
58+
padding: 14px 20px;
59+
transition: all 0.3s linear;
60+
outline: none;
61+
-webkit-tap-highlight-color: transparent;
62+
}
63+
64+
.menu i {
65+
color: #fff;
66+
font-size: 20px;
67+
padding-right: 8px;
68+
}
69+
70+
.menu a {
71+
color: #fff;
72+
font-size: 20px;
73+
text-decoration: none;
74+
}
75+
76+
.menu li:hover {
77+
border-left: 1px solid #fff;
78+
box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
79+
}
80+
81+
.social-media {
82+
position: absolute;
83+
left: 50%;
84+
bottom: 20px;
85+
transform: translateX(-50%);
86+
cursor: pointer;
87+
outline: none;
88+
-webkit-tap-highlight-color: transparent;
89+
}
90+
91+
.social-media i {
92+
padding: 0 5px;
93+
color: #fff;
94+
opacity: 0.6;
95+
font-size: 20px;
96+
transition: all 0.2s linear;
97+
}
98+
99+
.social-media i:hover {
100+
opacity: 1;
101+
}
102+
103+
#check {
104+
display: none;
105+
}
106+
107+
.btn1 i {
108+
color: #fff;
109+
font-size: 30px;
110+
font-weight: 700;
111+
position: absolute;
112+
left: 30px;
113+
line-height: 60px;
114+
cursor: pointer;
115+
opacity: 1;
116+
transition: all 0.3s linear;
117+
outline: none;
118+
-webkit-tap-highlight-color: transparent;
119+
}
120+
121+
.btn2 i {
122+
color: #fff;
123+
font-size: 25px;
124+
line-height: 60px;
125+
position: absolute;
126+
left: 240px;
127+
cursor: pointer;
128+
opacity: 1;
129+
transition: all 0.3s linear;
130+
outline: none;
131+
-webkit-tap-highlight-color: transparent;
132+
}
133+
134+
#check:checked~.sidebar-menu {
135+
left: 0%;
136+
}
137+
138+
#check:checked~.btn1 i {
139+
opacity: 0;
140+
}
141+
142+
#check:checked~.btn2 i {
143+
opacity: 1;
144+
}
145+
146+
/* responsiveness */
147+
148+
@media (max-width: 1245px) {
149+
150+
.menu li {
151+
margin-top: 0;
152+
}
153+
}

0 commit comments

Comments
 (0)