Custom drop down menu v1.0
HTML
<!-- Custom dropdown menu v1.0 https://codepad.co/Asiank -->
<div class="body" >
<div class="dropdown" role="dropdown" >
<input type="hidden" value="" />
<div class="dropMain" role="dropdownMain">
<span class="dmtxt" >Choose</span>
<span class='ddarrow'></span>
</div>
<!-- All the classes with drop will be your dropdown items -->
<div class="drop" role="drop">Drop down 1</div>
<div class="drop" role="drop">Drop down 2</div>
<div class="drop" role="drop">Drop down 3</div>
<div class="drop" role="drop">Drop down 4</div>
<div class="drop" role="drop">Drop down 5</div>
</div>
</div>
CSS
.body{
display:block;
margin:0 auto;
width:300px;
margin-top:100px;
}.dropdown{
position: absolute;
display: block;
box-sizing: border-box;
text-align: center;
width: 230px;
font-size: 18px;
height: 0px;
max-height: 0px;
z-index: 10000;
font-family: "Pt sans",monospace,sans-serif;
}
.dropMain{
background-color: #f9f9f9;
border: 1px solid #d1d1d1;
}
.dropdown div{
display: block;
cursor: pointer;
padding: 10px;
background-color: #eee;
transition: background-color 0.3s ease-in-out;
-webkit-transition: background-color 0.3s ease-in-out;
-o-transition: background-color 0.3s ease-in-out;
-moz-transition: background-color 0.3s ease-in-out;
}
.dropdown div:hover{
background-color: #e2e2e2;
}
.dropdown div:active{
background-color: #e6e6e6;
}
.ddarrow{
display: inline-block;
float: right;
width: 13px;
height: 13px;
margin-top: 8px;
background-image: url(downarrowimagelink);
background-repeat: no-repeat;
background-size: contain;
opacity: 0.5;
transition: opacity 0.4s ease-in-out;
-webkit-transition: opacity 0.4s ease-in-out;
-o-transition: opacity 0.4s ease-in-out;
-moz-transition: opacity 0.4s ease-in-out;
}
.dropdown:hover .ddarrow{
opacity: 1;
}
JAVASCRIPT
/* Custom dropdown menu v1.0 https://codepad.co/Asiank */
var dds = document.getElementsByClassName("dropdown");
for (var i=0; i<dds.length; i++){
dds[i].setAttribute("id","dropDown"+i);
dds[i].setAttribute("onclick","toogleDd("+i+");");
}
for(var i=0;i<document.getElementsByClassName("drop").length;i++){
var dps = document.getElementsByClassName("drop")[i];
dps.style.display = "none";
var pid = dps.parentNode.id;
dps.setAttribute("onclick","ddAction(this);");
}
function toogleDd(ide) {
var id = "dropDown"+ide;
var dropd = document.getElementById(id);
for(var i=0;i<dropd.getElementsByClassName("drop").length;i++){
var ce = dropd.getElementsByClassName("drop")[i];
if ( ce.style.display == "none" ) {
ce.style.display = "block";
dropd.getElementsByClassName("dropMain")[0].style.backgroundColor = "#90CAF9";
}else{
ce.style.display = "none";
dropd.getElementsByClassName("dropMain")[0].style.backgroundColor = "#eee";
}
}
}
function ddAction(t) {
var did = t.parentNode.id;
var dd = document.getElementById(did);
dd.getElementsByClassName("dropMain")[0].getElementsByClassName("dmtxt")[0].innerHTML = t.innerHTML;
var ip = dd.getElementsByTagName("INPUT")[0];
ip.value = t.innerHTML;
}
/*
Use :-
<div class="dropdown" role="dropdown" >
<input type="hidden" value="" /> <-- this input gets the value whatever the user selects
<div class="dropMain" role="dropdownMain">
<span class="dmtxt" >Choose</span>
<span class='ddarrow'></span> <-- dropdown arrow
</div>
\\ All the classes with drop will be your dropdown items \\
<div class="drop" role="drop">DD1</div>
<div class="drop" role="drop">DD2</div>
<div class="drop" role="drop">DD3</div>
</div>
*/
2 Responses