Skip to content

Commit 48c26d8

Browse files
thepranayguptathepranaygupta
committed
add: curved outside sidebar
1 parent 2e87ca9 commit 48c26d8

File tree

4 files changed

+241
-0
lines changed

4 files changed

+241
-0
lines changed

‎Navbars/Side_Navbar_01/README.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
## Curved Outside Side Bar
2+
3+
<h3> Tech Stack Used <img src = "https://media2.giphy.com/media/QssGEmpkyEOhBCb7e1/giphy.gif?cid=ecf05e47a0n3gi1bfqntqmob8g9aid1oyj2wr3ds3mg700bl&rid=giphy.gif" width = 32px> </h3>
4+
<p align="left"> <a href="https://www.w3.org/html/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-original-wordmark.svg" alt="html5" width="40" height="40"/> </a> <a href="https://www.w3schools.com/css/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-original-wordmark.svg" alt="css3" width="40" height="40"/> </a> </p>
5+
6+
### Preview

‎Navbars/Side_Navbar_01/code/index.html

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8">
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Curved Outside Side Bar</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="side-navigation">
11+
<ul>
12+
<li class="item-list active">
13+
<b></b>
14+
<b></b>
15+
<a href="#">
16+
<span class="icons"><ion-icon name="home-outline"></ion-icon></span>
17+
<span class="title">Home</span>
18+
</a>
19+
</li>
20+
21+
<li class="item-list">
22+
<a href="#">
23+
<span class="icons"><ion-icon name="person-outline"></ion-icon></span>
24+
<span class="title">My Profile</span>
25+
</a>
26+
</li>
27+
28+
<li class="item-list">
29+
<a href="#">
30+
<span class="icons"><ion-icon name="chatbubble-outline"></ion-icon></span>
31+
<span class="title">Messages</span>
32+
</a>
33+
</li>
34+
35+
<li class="item-list">
36+
<a href="#">
37+
<span class="icons"><ion-icon name="settings-outline"></ion-icon>
38+
</span>
39+
<span class="title">Settings</span>
40+
</a>
41+
</li>
42+
43+
<li class="item-list">
44+
<a href="#">
45+
<span class="icons"><ion-icon name="key-outline"></ion-icon></span>
46+
<span class="title">Password Reset</span>
47+
</a>
48+
</li>
49+
50+
<li class="item-list">
51+
<a href="#">
52+
<span class="icons"><ion-icon name="help-outline"></ion-icon></span>
53+
<span class="title">FAQs</span>
54+
</a>
55+
</li>
56+
57+
<li class="item-list">
58+
<a href="#">
59+
<span class="icons"><ion-icon name="information-circle-outline"></ion-icon></span>
60+
<span class="title">Help</span>
61+
</a>
62+
</li>
63+
64+
<li class="item-list">
65+
<a href="#">
66+
<span class="icons"><ion-icon name="arrow-back-circle-outline"></ion-icon></span>
67+
<span class="title">Sign Out</span>
68+
</a>
69+
</li>
70+
</ul>
71+
</div>
72+
73+
<div class="toggle">
74+
<ion-icon name="grid-outline" class="opne"></ion-icon>
75+
<ion-icon name="close-circle-outline" class="close"></ion-icon>
76+
</div>
77+
78+
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
79+
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
80+
81+
<script>
82+
83+
let menuToggle = document.querySelector('.toggle');
84+
menuToggle.onclick = function(){
85+
menuToggle.classList.toggle('active')
86+
}
87+
88+
89+
90+
const list =document.querySelectorAll('.item-list');
91+
function activeLink(){
92+
list.forEach((item) =>
93+
item.classList.remove('active'));
94+
this.classList.add('active');
95+
}
96+
list.forEach((item) =>
97+
item.addEventListener('click', activeLink));
98+
</script>
99+
</body>
100+
</html>

‎Navbars/Side_Navbar_01/code/script.js

Whitespace-only changes.

‎Navbars/Side_Navbar_01/code/style.css

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500&display=swap');
2+
3+
*{
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
font-family: 'Quicksand', sans-serif;
8+
font-weight: 500;
9+
}
10+
11+
body{
12+
min-height: 100vh;
13+
background: #11052C;
14+
15+
}
16+
17+
.side-navigation{
18+
position: fixed;
19+
top: 20px;
20+
left: 20px;
21+
bottom: 20px;
22+
width: 280px;
23+
border-radius: 15px;
24+
box-sizing: initial;
25+
border-left: 5px solid #ffe459;
26+
background: #FFE459;
27+
transition: width 0.7s;
28+
}
29+
30+
.side-navigation ul{
31+
position: absolute;
32+
top:0;
33+
left: 0;
34+
padding-left: 5px;
35+
padding-top: 40px;
36+
}
37+
38+
.side-navigation ul li{
39+
position: relative;
40+
list-style: none;
41+
width: 280px;
42+
border-top-left-radius: 21px;
43+
border-bottom-left-radius: 21px;
44+
45+
46+
47+
}
48+
49+
.side-navigation ul li.active{
50+
background-color: #11052C;
51+
}
52+
53+
.side-navigation ul li b:nth-child(1){
54+
position: absolute;
55+
top: -20px;
56+
height: 20px;
57+
width: 100%;
58+
background: #11052C;
59+
display: none;
60+
}
61+
62+
.side-navigation ul li b:nth-child(1)::before{
63+
content: '';
64+
position: absolute;
65+
top: 0;
66+
left: 0;
67+
width: 98.25%;
68+
height: 100%;
69+
background: #ffe459;
70+
border-bottom-right-radius: 20px;
71+
}
72+
73+
.side-navigation ul li b:nth-child(2){
74+
position: absolute;
75+
bottom: -20px;
76+
height: 20px;
77+
width: 100%;
78+
background: #11052C;
79+
display: none;
80+
}
81+
82+
.side-navigation ul li b:nth-child(2)::before{
83+
content: '';
84+
position: absolute;
85+
top: 0;
86+
left: 0;
87+
width: 98.25%;
88+
height: 100%;
89+
background: #ffe459;
90+
border-top-right-radius: 20px;
91+
}
92+
93+
.side-navigation ul li.active b:nth-child(1),.side-navigation ul li b:nth-child(2){
94+
display: block;
95+
}
96+
97+
.side-navigation ul li a{
98+
position: relative;
99+
display: block;
100+
width: 100%;
101+
display: flex;
102+
text-decoration: none;
103+
color: #3D087B;
104+
105+
}
106+
107+
.side-navigation ul li.active a{
108+
color: #ffe459;
109+
}
110+
111+
.side-navigation ul li a .icons{
112+
position: relative;
113+
display: block;
114+
min-width: 60px;
115+
height: 40px;
116+
line-height: 40px;
117+
text-align: center;
118+
119+
}
120+
121+
.side-navigation ul li a .icons ion-icon{
122+
font-size: 1.5em;
123+
padding-top: 13.5px;
124+
}
125+
126+
.side-navigation ul li a .title{
127+
position: relative;
128+
display: block;
129+
padding-left: 10px;
130+
height: 50px;
131+
line-height: 22px;
132+
white-space: normal;
133+
padding-top: 15px;
134+
}
135+

0 commit comments

Comments
 (0)