Skip to content

Instantly share code, notes, and snippets.

@imdanielch

imdanielch/index.html

Last active July 24, 2017 23:26
Show Gist options
  • Save imdanielch/f6e283ee28b9f0047c2b8f5dfd219bfc to your computer and use it in GitHub Desktop.
Save imdanielch/f6e283ee28b9f0047c2b8f5dfd219bfc to your computer and use it in GitHub Desktop.
Download ZIP
custom dropdown menu
Raw
index.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link href="test.css" rel="stylesheet">
</head>
<body>
<ul id="ul">
<div id="selected" />
</ul>
<script src="test.js"></script>
</body>
</html>
Raw
test.css
#selected {
background-color: #c0c;
padding: 5px;
}
#ul{
background-color: #cc0000;
margin: 0;
padding: 0;
}
.li {
display: none;
padding: 5px;
}
.li:hover {
background-color: #fff;
cursor: pointer;
}
#ul:hover .li{
display: block;
z-index: 1;
}
Raw
test.js
var arr = [
{src: "http://google.com", label: 'test1'}
,{src: "http://google.co.uk", label: 'test2'}
,{src: "http://google.fr", label: 'test3'}
];
var menu_count = 0;
var ul = document.getElementById("ul");
var selected = document.getElementById('selected');
var menu = function(item){
if (menu_count == 0){
var content = document.createTextNode(item.label);
selected.appendChild(content);
}
var li = document.createElement("li");
var content = document.createTextNode(item.label);
li.setAttribute("vsrc", item.src);
li.setAttribute("class", "li");
li.setAttribute("onclick", "menu_click(this);");
li.appendChild(content);
ul.appendChild(li);
menu_count += 1;
}
function menu_click(element){
console.log(element);
console.log(element.getAttribute("vsrc"));
selected.innerHTML = element.textContent || element.innerText;
}
arr.map(menu);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment