Skip to content

Commit 95094e6

Browse files
author
AP-BAPPI-WEBAPP\bappi.chandra
committed
Technical SEO Optimized
1 parent 714a436 commit 95094e6

File tree

8 files changed

+179
-124
lines changed

8 files changed

+179
-124
lines changed

‎css/style.css‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
2+
body {
3+
font-family: "Poppins", sans-serif;
4+
}
5+
.selectDropdown {
6+
position: relative;
7+
display: block;
8+
width: 100%;
9+
}
10+
.selectDropdownToggle {
11+
width: 100%;
12+
border: 1px solid #2F8B8A;
13+
cursor: pointer;
14+
background: #fff;
15+
text-align: left;
16+
border-radius: 8px;
17+
color: #334155;
18+
font-size: 12px;
19+
font-weight: 500;
20+
display: flex;
21+
justify-content: space-between;
22+
align-items: center;
23+
24+
position: relative;
25+
z-index: 9999;
26+
}
27+
.selectDropdownMenu {
28+
display: none;
29+
position: absolute;
30+
width: 100%;
31+
background: #fff;
32+
border: 1px solid #ddd;
33+
max-height: 300px;
34+
overflow-x: hidden;
35+
overflow-y: auto;
36+
z-index: 1000;
37+
box-shadow: 0px 4px 34px 0px #0000000D;
38+
39+
margin-top: -10px;
40+
border-bottom-right-radius: 12px;
41+
border-bottom-left-radius: 12px;
42+
}
43+
.selectDropdownMenu input[type="text"] {
44+
border: 1px solid #E2E8F0;
45+
width: 95%;
46+
color: #334155;
47+
font-weight: 500;
48+
padding: .5rem 1rem;
49+
padding-left: 2.25rem;
50+
border-radius: 8px;
51+
margin-bottom: .5rem;
52+
}
53+
.selectDropdownMenu input[type="text"]:focus{
54+
border: 1px solid #2F8B8A;
55+
outline: none;
56+
}
57+
.selectDropdownItem {
58+
display: flex;
59+
justify-content: space-between;
60+
align-items: center;
61+
padding: 8px;
62+
cursor: pointer;
63+
width: 100%;
64+
box-sizing: border-box;
65+
font-size: 0.75rem;
66+
color: #000000;
67+
user-select: none;
68+
}
69+
.selectDropdownItem:focus,
70+
.selectDropdownItem:hover {
71+
background: rgba(47, 139, 138, 0.1);
72+
color: #2F8B8A;
73+
}
74+
.selectDropdownItem span {
75+
flex: 1;
76+
}
77+
.selectDropdownItem input[type="checkbox"] {
78+
pointer-events: none;
79+
}
80+
81+
.dropdown-toggle__title{
82+
width: 100%;
83+
display: flex;
84+
justify-content: space-between;
85+
align-items: center;
86+
padding: .75rem;
87+
user-select: none;
88+
}
89+
.slectInputSearch{
90+
position: relative;
91+
}
92+
.slectInputSearch img{
93+
position: absolute;
94+
top: .6rem;
95+
height: 1rem;
96+
left: 1rem;
97+
}
98+
.rotate {
99+
transform: rotate(180deg);
100+
transition: .3s;
101+
}
102+
.hidden {
103+
display: none;
104+
}

‎google0f5a226c971617bc.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
google-site-verification: google0f5a226c971617bc.html

‎img/OG.webp‎

8.01 KB
Loading

‎chevron-up.svg‎ renamed to ‎img/chevron-up.svg‎

File renamed without changes.

‎img/favicon.png‎

10.6 KB
Loading

‎img/search-input.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎index.html‎

Lines changed: 33 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -4,109 +4,53 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Dropdown with Search & Checkboxes</title>
7-
<style>
8-
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
9-
body {
10-
font-family: "Poppins", sans-serif;
11-
}
12-
.selectDropdown {
13-
position: relative;
14-
display: block;
15-
width: 100%;
16-
}
17-
.selectDropdownToggle {
18-
width: 100%;
19-
border: 1px solid #2F8B8A;
20-
cursor: pointer;
21-
background: #fff;
22-
text-align: left;
23-
border-radius: 8px;
24-
color: #334155;
25-
font-size: 12px;
26-
font-weight: 500;
27-
display: flex;
28-
justify-content: space-between;
29-
align-items: center;
7+
<link rel="stylesheet" href="./css/style.css">
308

31-
position: relative;
32-
z-index: 9999;
33-
}
34-
.selectDropdownMenu {
35-
display: none;
36-
position: absolute;
37-
width: 100%;
38-
background: #fff;
39-
border: 1px solid #ddd;
40-
max-height: 300px;
41-
overflow-x: hidden;
42-
overflow-y: auto;
43-
z-index: 1000;
44-
box-shadow: 0px 4px 34px 0px #0000000D;
45-
46-
margin-top: -10px;
47-
border-bottom-right-radius: 12px;
48-
border-bottom-left-radius: 12px;
49-
}
50-
.selectDropdownMenu input[type="text"] {
51-
border: 1px solid #E2E8F0;
52-
width: 97.3%;
53-
color: #334155;
54-
font-weight: 500;
55-
padding: .5rem 1rem;
56-
border-radius: 8px;
57-
margin-bottom: .5rem;
58-
}
59-
.selectDropdownMenu input[type="text"]:focus{
60-
border: 1px solid #2F8B8A;
61-
outline: none;
62-
}
63-
.selectDropdownItem {
64-
display: flex;
65-
justify-content: space-between;
66-
align-items: center;
67-
padding: 8px;
68-
cursor: pointer;
69-
width: 100%;
70-
box-sizing: border-box;
71-
font-size: 0.75rem;
72-
color: #000000;
73-
user-select: none;
74-
}
75-
.selectDropdownItem:focus,
76-
.selectDropdownItem:hover {
77-
background: rgba(47, 139, 138, 0.1);
78-
color: #2F8B8A;
79-
}
80-
.selectDropdownItem span {
81-
flex: 1;
82-
}
83-
.selectDropdownItem input[type="checkbox"] {
84-
pointer-events: none;
85-
}
9+
<meta charset="UTF-8">
10+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
11+
12+
<!-- ✅ Basic SEO Meta Tags -->
13+
<title>Dropdown with Search & Checkboxes | Custom Select Menu</title>
14+
<meta name="description" content="A custom dropdown select menu with a search bar and checkboxes. Perfect for multi-select functionality with a smooth user experience.">
15+
<meta name="keywords" content="dropdown, search dropdown, checkbox select, custom dropdown, HTML dropdown, JavaScript dropdown, multi-select">
16+
<meta name="author" content="Ch Bappy">
17+
18+
<!-- ✅ Open Graph Meta Tags (For Social Media Sharing) -->
19+
<meta property="og:title" content="Dropdown with Search & Checkboxes | Custom Select Menu">
20+
<meta property="og:description" content="A powerful, customizable dropdown with search functionality and checkboxes. Improve your form UX with this easy-to-use component.">
21+
<meta property="og:image" content="./img/OG.webp">
22+
<meta property="og:url" content="https://chbappy-cse.github.io/dropdown-search-checkbox-javascript/">
23+
<meta property="og:type" content="website">
24+
25+
<!-- ✅ Twitter Meta Tags (For Twitter Cards) -->
26+
<meta name="twitter:card" content="A feature-rich dropdown menu with search and multi-select checkboxes.">
27+
<meta name="twitter:title" content="Dropdown with Search & Checkboxes | Custom Select Menu">
28+
<meta name="twitter:description" content="A feature-rich dropdown menu with search and multi-select checkboxes.">
29+
<meta name="twitter:image" content="./img/OG.webp">
30+
31+
<!-- ✅ Canonical URL (Avoids Duplicate Content Issues) -->
32+
<link rel="canonical" href="https://chbappy-cse.github.io/dropdown-search-checkbox-javascript/">
8633

87-
.dropdown-toggle__title{
88-
width: 100%;
89-
display: flex;
90-
justify-content: space-between;
91-
align-items: center;
92-
padding: .75rem;
93-
user-select: none;
94-
}
95-
</style>
34+
<!-- ✅ Favicon (For Browser Tabs & Mobile) -->
35+
<link rel="icon" type="image/png" href="./img/favicon.png">
36+
37+
<!-- ✅ Robots Meta Tag (Control Search Engine Indexing) -->
38+
<meta name="robots" content="index, follow"> <!-- Allows indexing -->
9639
</head>
9740
<body>
9841

9942
<div class="selectDropdown">
10043
<div class="selectDropdownToggle">
10144
<div class="dropdown-toggle__title">
10245
<span>Select Continent/ Region</span>
103-
<img src="./chevron-up.svg">
46+
<img id="dropdownIcon" src="./img/chevron-up.svg" alt="Dropdown with Search & Checkboxes">
10447
</div>
10548
</div>
10649
<div class="selectDropdownMenu">
10750
<div style="padding: 1rem;">
10851
<div class="slectInputSearch">
10952
<input type="text" id="searchBox" placeholder="Search...">
53+
<img src="./img/search-input.svg" alt="Dropdown with Search & Checkboxes">
11054
</div>
11155
<div id="selectDropdownItems">
11256
<div class="selectDropdownItem"><span>Apple</span> <input type="checkbox" value="Apple"></div>
@@ -121,41 +65,6 @@
12165
</div>
12266
</div>
12367

124-
<script>
125-
const dropdown = document.querySelector(".selectDropdown");
126-
const dropdownToggle = document.querySelector(".selectDropdownToggle");
127-
const dropdownMenu = document.querySelector(".selectDropdownMenu");
128-
const searchBox = document.getElementById("searchBox");
129-
130-
// Toggle dropdown menu
131-
dropdownToggle.addEventListener("click", () => {
132-
dropdownMenu.style.display = dropdownMenu.style.display === "block" ? "none" : "block";
133-
});
134-
135-
// Toggle checkbox when clicking dropdown item
136-
document.querySelectorAll(".selectDropdownItem").forEach(item => {
137-
item.addEventListener("click", () => {
138-
const checkbox = item.querySelector("input[type='checkbox']");
139-
checkbox.checked = !checkbox.checked; // Toggle checked state
140-
});
141-
});
142-
143-
// Filter items based on search
144-
searchBox.addEventListener("keyup", () => {
145-
let searchValue = searchBox.value.toLowerCase();
146-
document.querySelectorAll(".selectDropdownItem").forEach(item => {
147-
let text = item.textContent.toLowerCase();
148-
item.style.display = text.includes(searchValue) ? "flex" : "none";
149-
});
150-
});
151-
152-
// Close dropdown when clicking outside
153-
document.addEventListener("click", (e) => {
154-
if (!dropdown.contains(e.target)) {
155-
dropdownMenu.style.display = "none";
156-
}
157-
});
158-
</script>
159-
68+
<script src="./js/app.js"></script>
16069
</body>
16170
</html>

‎js/app.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
const dropdownToggle = document.querySelector(".selectDropdownToggle");
2+
const dropdownMenu = document.querySelector(".selectDropdownMenu");
3+
const dropdownIcon = document.getElementById("dropdownIcon");
4+
const searchBox = document.getElementById("searchBox");
5+
const dropdownItems = document.querySelectorAll(".selectDropdownItem");
6+
7+
// Toggle dropdown menu and rotate icon
8+
dropdownToggle.addEventListener("click", () => {
9+
const isOpen = dropdownMenu.style.display === "block";
10+
dropdownMenu.style.display = isOpen ? "none" : "block";
11+
dropdownIcon.classList.toggle("rotate", !isOpen);
12+
});
13+
14+
// Toggle checkbox when clicking dropdown item
15+
dropdownItems.forEach(item => {
16+
item.addEventListener("click", () => {
17+
const checkbox = item.querySelector("input[type='checkbox']");
18+
checkbox.checked = !checkbox.checked;
19+
});
20+
});
21+
22+
// Search functionality: Show/Hide items based on input
23+
searchBox.addEventListener("keyup", () => {
24+
const searchValue = searchBox.value.toLowerCase();
25+
dropdownItems.forEach(item => {
26+
const text = item.textContent.toLowerCase();
27+
item.style.display = text.includes(searchValue) ? "flex" : "none";
28+
});
29+
});
30+
31+
// Close dropdown when clicking outside
32+
document.addEventListener("click", (e) => {
33+
if (!dropdownToggle.contains(e.target) && !dropdownMenu.contains(e.target)) {
34+
dropdownMenu.style.display = "none";
35+
dropdownIcon.classList.remove("rotate");
36+
}
37+
});

0 commit comments

Comments
 (0)