apuc/cg-select
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[main] Added dropdown-list!

Browse Source
This commit is contained in:
Макс Овсяников 2022-09-12 19:14:08 +03:00
parent f167a6f906
commit 80ae89f920
5 changed files with 155 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.prettierrc Normal file
View File

@ -0,0 +1,6 @@
{
"printWidth": 100,
"singleQuote": true,
"trailingComma": "all",
"semi": true
}

2
README.md
View File

@ -1,2 +0,0 @@
# Dropdown-list
This Dropdown-list component

29
src/index.html Normal file
View File

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dropdown-list</title>
<link href="main.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="dropdown">
<div class="select">
<span class="selected">BMW</span>
<div class="caret"></div>
</div>
<ul class="list">
<li class="list__item">Nissan</li>
<li class="list__item">Mersedes</li>
<li class="list__item">Ford</li>
<li class="list__item active">Opel</li>
<li class="list__item">Chevrolet</li>
</ul>
</div>
</div>
</body>
<script src="index.js"></script>
</html>

27
src/index.js Normal file
View File

@ -0,0 +1,27 @@
const dropdowns = document.querySelectorAll('.dropdown');
dropdowns.forEach(drop => {
const select = drop.querySelector('.select');
const caret = drop.querySelector('.caret');
const list = drop.querySelector('.list');
const options = drop.querySelectorAll('.list__item')
const selected = drop.querySelector('.selected')
select.addEventListener('click', () => {
caret.classList.toggle('caret-rotate');
list.classList.toggle('open');
});
options.forEach(option => {
option.addEventListener('click', () =>{
selected.innerText = option.innerText;
caret.classList.remove('caret-rotate');
list.classList.remove('open');
options.forEach(option =>{
option.classList.remove('active');
})
option.classList.add('active');
})
})
})

93
src/main.css Normal file
View File

@ -0,0 +1,93 @@
* {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
body{
background: #1b1e25;
}
.container {
margin: 50px auto;
width: 800px;
height: 200px;
}
.dropdown {
position: relative;
}
.select {
padding: 14px;
max-width: 200px;
height: 30px;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
background: #2a2f3b;
cursor: pointer;
border-radius: 5px;
transition: 0.5s;
}
.select:hover {
transition: 0.5s;
background: #394050;
}
.caret {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 6px solid #fff;
transition: 0.5s;
}
.caret-rotate {
transform: rotate(180deg);
transition: 0.5s;
}
.list {
position: absolute;
width: 212px;
padding: 7px;
margin-top: 1px;
list-style: none;
color: white;
background: #2a2f3b;
border: 1px #0a0b0e solid;
box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.5);
border-radius: 5px;
transition: 0.5s;
opacity: 0;
display: none;
z-index: 1;
}
.list__item {
transition: 0.5s;
padding: 15px;
}
.list__item:hover {
transition: 0.5s;
cursor: pointer;
background: #394050;
}
.active {
background: #394050;
}
.open {
transition: 0.5s;
display: block;
opacity: 1;
}