Skip to content

Commit 73e6022

Browse files
hicodersofficialhicodersofficial
committed
added dropdown
1 parent 1e0cc7f commit 73e6022

File tree

2 files changed

+115
-0
lines changed

2 files changed

+115
-0
lines changed

‎dropdown/index.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
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+
<link rel="stylesheet" href="style.css" />
8+
<link
9+
rel="stylesheet"
10+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
11+
/>
12+
<title>Dropdown</title>
13+
</head>
14+
<body>
15+
<div class="dropdown">
16+
<span class="label"><i class="fa-solid fa-link"></i> Social Links</span>
17+
<ul class="items">
18+
<li>
19+
<a href=""><i class="fa-brands fa-github"></i> Github</a>
20+
</li>
21+
<li>
22+
<a href=""><i class="fa-brands fa-instagram"></i> Instagram</a>
23+
</li>
24+
<li>
25+
<a href=""><i class="fa-brands fa-discord"></i> Discord</a>
26+
</li>
27+
<li>
28+
<a href=""><i class="fa-brands fa-youtube"></i> Youtube</a>
29+
</li>
30+
</ul>
31+
</div>
32+
</body>
33+
</html>

‎dropdown/style.css

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
body {
2+
margin: 0;
3+
font-family: "Poppins", Arial, sans-serif;
4+
background: #1f2023;
5+
color: #fff;
6+
display: grid;
7+
place-items: center;
8+
height: 100vh;
9+
}
10+
11+
ul {
12+
list-style: none;
13+
margin-block-start: 0;
14+
margin-block-end: 0;
15+
padding-inline-start: 0;
16+
}
17+
.dropdown {
18+
position: relative;
19+
}
20+
.label {
21+
cursor: pointer;
22+
background: rgb(40, 40, 40);
23+
padding: 0.8rem 1rem;
24+
width: 100%;
25+
display: block;
26+
box-sizing: border-box;
27+
transition: all 0.3s;
28+
}
29+
30+
.items a {
31+
color: #fff;
32+
display: flex;
33+
align-items: center;
34+
padding: 0.5rem 1rem;
35+
text-decoration: none;
36+
transition: all 0.2s;
37+
}
38+
.items a:hover {
39+
border-left: 5px solid;
40+
background: rgb(37, 37, 37);
41+
}
42+
43+
.fa-brands,
44+
.fa-solid {
45+
margin-right: 10px;
46+
}
47+
48+
.items {
49+
background: rgb(52, 52, 52);
50+
opacity: 0;
51+
visibility: hidden;
52+
min-width: 100%;
53+
height: 0;
54+
position: absolute;
55+
top: 48px;
56+
transform-origin: top;
57+
transform: scaleY(0);
58+
transition: transform 0.3s;
59+
}
60+
61+
.items::before {
62+
content: "";
63+
position: absolute;
64+
width: 15px;
65+
height: 15px;
66+
background: rgb(52, 52, 52);
67+
transform: rotate(45deg);
68+
top: -7px;
69+
left: 20px;
70+
z-index: -1;
71+
}
72+
73+
.dropdown:hover > .items {
74+
opacity: 1;
75+
visibility: visible;
76+
height: unset;
77+
transform: scaleY(1);
78+
}
79+
80+
.dropdown:hover > .label {
81+
background: rgb(255, 115, 0);
82+
}

0 commit comments

Comments
 (0)