eigenes-select-menue-eigenbau.php
Quell Code
<style>
.wowSelect > input { width:200px; cursor:pointer; }
.wowSelect > .options {
width:200px;
margin:0;
padding:0;
list-style-type:none;
opacity:0.01;
}
.wowSelect > .options > li {
margin:2px 0;
padding:5px;
cursor:pointer;
border:1px solid #ccc;
}
.wowSelect > .options > li:hover { background:#eee; }
.wowFader { animation:fadeInOptions 2s forwards; }
@keyframes fadeInOptions {
from { opacity:0.01; }
to { opacity:1.0; }
}
</style>
<form name="foo">
<div class="wowSelect">
<input type="text" name="valbox" placeholder="click for wow">
<ul class="options">
<li>Apfel</li>
<li>Banane</li>
<li>Birne</li>
</ul>
</div>
</form>
<script>
var _wow = document.querySelector('.wowSelect > input[name="valbox"]');
var _wowOpts = document.querySelector('.wowSelect > .options');
// click event for animation
_wow.addEventListener(
'click'
, (e) => { _wowOpts.classList.add('wowFader'); }
);
// click event for options
document.querySelectorAll('.wowSelect > .options > li').forEach(
(e) => {
e.addEventListener(
'click', () => {
_wow.value = e.innerText;
_wowOpts.classList.remove('wowFader');
}
);
}
);
</script>