Last active
July 24, 2017 23:26
-
-
Save imdanielch/f6e283ee28b9f0047c2b8f5dfd219bfc to your computer and use it in GitHub Desktop.
custom dropdown menu
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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