Skip to content

Commit efd4929

Browse files
HuXn-WebDevHuXn-WebDev
committed
Select Menu
1 parent 7a03e27 commit efd4929

File tree

10 files changed

+137
-0
lines changed

10 files changed

+137
-0
lines changed

‎29. Select Menu/app.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
let selectField = document.getElementById("selectField");
2+
let selectText = document.getElementById("selectText");
3+
let list = document.getElementById("list");
4+
let arrowIcon = document.getElementById("arrowIcon");
5+
let options = document.getElementsByClassName("options");
6+
7+
selectField.addEventListener("click", () => {
8+
list.classList.toggle("hide");
9+
arrowIcon.classList.toggle("rotate");
10+
});
11+
12+
for (option of options) {
13+
option.onclick = function () {
14+
selectText.innerHTML = this.textContent;
15+
list.classList.toggle("hide");
16+
arrowIcon.classList.toggle("rotate");
17+
};
18+
}

‎29. Select Menu/images/arrow.png‎

5.77 KB
Loading

‎29. Select Menu/images/facebook.png‎

10 KB
Loading

‎29. Select Menu/images/instagram.png‎

59 KB
Loading

‎29. Select Menu/images/pinterest.png‎

16.7 KB
Loading

‎29. Select Menu/images/twitter.png‎

13.3 KB
Loading

‎29. Select Menu/images/whatsapp.png‎

33.4 KB
Loading

‎29. Select Menu/images/youtube.png‎

8.42 KB
Loading

‎29. Select Menu/index.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
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>Social Media Menu Select</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<header>
11+
<div class="selector">
12+
<div id="selectField">
13+
<p id="selectText">Select Social Media</p>
14+
<img src="images/arrow.png" id="arrowIcon" />
15+
</div>
16+
17+
<ul id="list" class="hide">
18+
<li class="options">
19+
<img src="images/facebook.png" />
20+
<p>Facebook</p>
21+
</li>
22+
<li class="options">
23+
<img src="images/instagram.png" />
24+
<p>Instagram</p>
25+
</li>
26+
<li class="options">
27+
<img src="images/pinterest.png" />
28+
<p>Pinterest</p>
29+
</li>
30+
<li class="options">
31+
<img src="images/twitter.png" />
32+
<p>Twitter</p>
33+
</li>
34+
<li class="options">
35+
<img src="images/whatsapp.png" />
36+
<p>Whatsapp</p>
37+
</li>
38+
<li class="options">
39+
<img src="images/youtube.png" />
40+
<p>YouTube</p>
41+
</li>
42+
</ul>
43+
</div>
44+
</header>
45+
46+
<script src="app.js"></script>
47+
</body>
48+
</html>

‎29. Select Menu/style.css‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
font-family: sans-serif;
5+
}
6+
7+
header {
8+
width: 100%;
9+
height: 100vh;
10+
background-image: linear-gradient(#0093e9, #80d0c7);
11+
display: flex;
12+
justify-content: center;
13+
align-items: center;
14+
}
15+
16+
.selector {
17+
width: 350px;
18+
}
19+
20+
#selectField {
21+
width: 100%;
22+
padding: 15px 20px;
23+
margin-bottom: 30px;
24+
box-sizing: border-box;
25+
background: rgba(255, 255, 255, 0.7);
26+
border-radius: 6px;
27+
display: flex;
28+
justify-content: space-between;
29+
align-items: center;
30+
cursor: pointer;
31+
}
32+
33+
#selectField img {
34+
width: 12px;
35+
transition: transform 0.5s;
36+
}
37+
38+
#list {
39+
width: 100%;
40+
background: rgba(255, 255, 255, 0.7);
41+
border-radius: 6px;
42+
overflow: hidden;
43+
}
44+
45+
.options {
46+
width: 100%;
47+
position: relative;
48+
padding: 15px 0 15px 70px;
49+
list-style: none;
50+
box-sizing: border-box;
51+
}
52+
53+
.options img {
54+
width: 25px;
55+
position: absolute;
56+
top: 12px;
57+
left: 25px;
58+
}
59+
60+
.options:hover {
61+
background: rgba(255, 255, 255, 0.7);
62+
}
63+
64+
/* JavaScript */
65+
.hide {
66+
visibility: hidden;
67+
}
68+
69+
.rotate {
70+
transform: rotate(180deg);
71+
}

0 commit comments

Comments
 (0)