Skip to content

Instantly share code, notes, and snippets.

@kosalvann

kosalvann/index.html

Created May 22, 2020 08:18
Show Gist options
  • Save kosalvann/b4c899821544847399b5f723ba9d3153 to your computer and use it in GitHub Desktop.
Save kosalvann/b4c899821544847399b5f723ba9d3153 to your computer and use it in GitHub Desktop.
Download ZIP
Custom DropDown Custom dropdown menu written in Javascript // source https://jsbin.com/jowuxuy
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Custom dropdown menu written in Javascript">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Custom DropDown</title>
<style id="jsbin-css">
*, :after, :before {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
html, body {
padding: 0;
margin: 0;
background-color: #ffffff;
height: 100%;
}
body * {
font-size: 15px;
font-family: arial,sans-serif;
line-height: 1.2;
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
#app {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 100%;
}
.hide {
display: none;
}
.trigger {
position: relative;
display: flex;
flex: 0 45%;
flex-direction: row;
min-width: 200px;
}
.trigger.open::before {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
content: ' ';
background: rgba(255, 255, 255, 0);
}
.trigger .text {
position: relative;
display: flex;
width: 100%;
padding: 10px 30px 10px 10px;
border-radius: 5px;
border: 1px solid #dddddd;
background-color: #ffffff;
box-shadow: 0 .15rem 0.525rem 0 rgba(54, 141, 255, 0.1);
cursor: pointer;
}
.trigger .text::after {
position: absolute;
content: '▲';
top: 12px;
right: 10px;
color: #c3c3c3;
font-size: 13px;
transform: rotate(180deg);
}
.dropdown {
position: absolute;
top: 36px;
border-radius: 0px 0 5px 5px;
border: 1px solid #dddddd;
border-top: 0 none;
background-color: #ffffff;
width: 100%;
box-sizing: border-box;
}
.dropdown > div {
padding: 10px;
border-top: 1px solid #dddddd;
cursor: pointer;
}
.trigger .text:hover,
.dropdown > div:hover {
background-color: #fafbff;
}
.result {
height: 20px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="result"></div>
<div id="app"></div>
</div>
<script id="jsbin-javascript">
/**
* The data source
*/
var cities = [
{id: 'chi', value: 'Chicago'},
{id: 'nyc', value: 'New York City'},
{id: 'lax', value: 'Los Angeles'}
];
window.onload = () => {
document.querySelector('.result').innerHTML = 'Please make a selection';
dropdown();
}
const dropdown = () => {
let app = document.querySelector('#app');
const trigger = dropDownTrigger();
const menu = dropDownMenu(cities);
trigger.appendChild(menu);
return app.appendChild(trigger);
}
const dropDownTrigger = () => {
const div = document.createElement('div');
const span = document.createElement('span');
span.classList.add('text');
span.textContent = 'Select ...';
div.classList.add('trigger');
div.appendChild(span);
div.addEventListener('click', () => {
toggleDropdown();
});
return div;
}
const dropDownMenu = (datas) => {
const div = document.createElement('div');
div.classList.add('dropdown', 'hide');
datas.forEach(data => {
const { id, value } = data;
const option = document.createElement('div');
const _value = document.createElement('div');
_value.textContent = value;
option.setAttribute('data-id', id);
option.appendChild(_value);
div.appendChild(option);
});
div.addEventListener('click', (e) => {
const triggerText = document.querySelector('.trigger .text');
triggerText.innerHTML = e.target.textContent;
document.querySelector('.result')
.innerHTML = ''
+ 'You selected '
+ '<u>' + e.target.textContent + '</u>';
});
return div;
}
const toggleDropdown = (text) => {
const trigger = document.querySelector('.trigger');
const dropdown = document.querySelector('.dropdown');
trigger.classList.toggle('open');
dropdown.classList.toggle('hide');
}
</script>
<script id="jsbin-source-css" type="text/css">*, :after, :before {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
html, body {
padding: 0;
margin: 0;
background-color: #ffffff;
height: 100%;
}
body * {
font-size: 15px;
font-family: arial,sans-serif;
line-height: 1.2;
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
#app {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 100%;
}
.hide {
display: none;
}
.trigger {
position: relative;
display: flex;
flex: 0 45%;
flex-direction: row;
min-width: 200px;
}
.trigger.open::before {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
content: ' ';
background: rgba(255, 255, 255, 0);
}
.trigger .text {
position: relative;
display: flex;
width: 100%;
padding: 10px 30px 10px 10px;
border-radius: 5px;
border: 1px solid #dddddd;
background-color: #ffffff;
box-shadow: 0 .15rem 0.525rem 0 rgba(54, 141, 255, 0.1);
cursor: pointer;
}
.trigger .text::after {
position: absolute;
content: '▲';
top: 12px;
right: 10px;
color: #c3c3c3;
font-size: 13px;
transform: rotate(180deg);
}
.dropdown {
position: absolute;
top: 36px;
border-radius: 0px 0 5px 5px;
border: 1px solid #dddddd;
border-top: 0 none;
background-color: #ffffff;
width: 100%;
box-sizing: border-box;
}
.dropdown > div {
padding: 10px;
border-top: 1px solid #dddddd;
cursor: pointer;
}
.trigger .text:hover,
.dropdown > div:hover {
background-color: #fafbff;
}
.result {
height: 20px;
margin-bottom: 20px;
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">/**
* The data source
*/
var cities = [
{id: 'chi', value: 'Chicago'},
{id: 'nyc', value: 'New York City'},
{id: 'lax', value: 'Los Angeles'}
];
window.onload = () => {
document.querySelector('.result').innerHTML = 'Please make a selection';
dropdown();
}
const dropdown = () => {
let app = document.querySelector('#app');
const trigger = dropDownTrigger();
const menu = dropDownMenu(cities);
trigger.appendChild(menu);
return app.appendChild(trigger);
}
const dropDownTrigger = () => {
const div = document.createElement('div');
const span = document.createElement('span');
span.classList.add('text');
span.textContent = 'Select ...';
div.classList.add('trigger');
div.appendChild(span);
div.addEventListener('click', () => {
toggleDropdown();
});
return div;
}
const dropDownMenu = (datas) => {
const div = document.createElement('div');
div.classList.add('dropdown', 'hide');
datas.forEach(data => {
const { id, value } = data;
const option = document.createElement('div');
const _value = document.createElement('div');
_value.textContent = value;
option.setAttribute('data-id', id);
option.appendChild(_value);
div.appendChild(option);
});
div.addEventListener('click', (e) => {
const triggerText = document.querySelector('.trigger .text');
triggerText.innerHTML = e.target.textContent;
document.querySelector('.result')
.innerHTML = ''
+ 'You selected '
+ '<u>' + e.target.textContent + '</u>';
});
return div;
}
const toggleDropdown = (text) => {
const trigger = document.querySelector('.trigger');
const dropdown = document.querySelector('.dropdown');
trigger.classList.toggle('open');
dropdown.classList.toggle('hide');
}
</script></body>
</html>
Raw
jsbin.jowuxuy.css
*, :after, :before {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
html, body {
padding: 0;
margin: 0;
background-color: #ffffff;
height: 100%;
}
body * {
font-size: 15px;
font-family: arial,sans-serif;
line-height: 1.2;
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
#app {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 100%;
}
.hide {
display: none;
}
.trigger {
position: relative;
display: flex;
flex: 0 45%;
flex-direction: row;
min-width: 200px;
}
.trigger.open::before {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
content: ' ';
background: rgba(255, 255, 255, 0);
}
.trigger .text {
position: relative;
display: flex;
width: 100%;
padding: 10px 30px 10px 10px;
border-radius: 5px;
border: 1px solid #dddddd;
background-color: #ffffff;
box-shadow: 0 .15rem 0.525rem 0 rgba(54, 141, 255, 0.1);
cursor: pointer;
}
.trigger .text::after {
position: absolute;
content: '▲';
top: 12px;
right: 10px;
color: #c3c3c3;
font-size: 13px;
transform: rotate(180deg);
}
.dropdown {
position: absolute;
top: 36px;
border-radius: 0px 0 5px 5px;
border: 1px solid #dddddd;
border-top: 0 none;
background-color: #ffffff;
width: 100%;
box-sizing: border-box;
}
.dropdown > div {
padding: 10px;
border-top: 1px solid #dddddd;
cursor: pointer;
}
.trigger .text:hover,
.dropdown > div:hover {
background-color: #fafbff;
}
.result {
height: 20px;
margin-bottom: 20px;
}
Raw
jsbin.jowuxuy.js
/**
* The data source
*/
var cities = [
{id: 'chi', value: 'Chicago'},
{id: 'nyc', value: 'New York City'},
{id: 'lax', value: 'Los Angeles'}
];
window.onload = () => {
document.querySelector('.result').innerHTML = 'Please make a selection';
dropdown();
}
const dropdown = () => {
let app = document.querySelector('#app');
const trigger = dropDownTrigger();
const menu = dropDownMenu(cities);
trigger.appendChild(menu);
return app.appendChild(trigger);
}
const dropDownTrigger = () => {
const div = document.createElement('div');
const span = document.createElement('span');
span.classList.add('text');
span.textContent = 'Select ...';
div.classList.add('trigger');
div.appendChild(span);
div.addEventListener('click', () => {
toggleDropdown();
});
return div;
}
const dropDownMenu = (datas) => {
const div = document.createElement('div');
div.classList.add('dropdown', 'hide');
datas.forEach(data => {
const { id, value } = data;
const option = document.createElement('div');
const _value = document.createElement('div');
_value.textContent = value;
option.setAttribute('data-id', id);
option.appendChild(_value);
div.appendChild(option);
});
div.addEventListener('click', (e) => {
const triggerText = document.querySelector('.trigger .text');
triggerText.innerHTML = e.target.textContent;
document.querySelector('.result')
.innerHTML = ''
+ 'You selected '
+ '<u>' + e.target.textContent + '</u>';
});
return div;
}
const toggleDropdown = (text) => {
const trigger = document.querySelector('.trigger');
const dropdown = document.querySelector('.dropdown');
trigger.classList.toggle('open');
dropdown.classList.toggle('hide');
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment