Выпадающее меню, по клику

Захотелось сделать в плагине для juick выпадающее меню, которое появляется по клику, и исчезает в случае, если был клик в другом месте. Прогуглил пол дня, но удалось найти только решении на css. Намучившись с поиском, решил попытаться переделать css на javascript, решение оказалось не таким сложным как казалось с первого раза:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Drop down menu</title>
<style type="text/css">
ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
padding:0;
margin:0;
position:absolute;
left:-9999em;
background-color:white;
border:1px solid black;
}
</style>
</head>
<body>
<a href="#top" onblur="this.nextSibling.nextSibling.style.left='-9999em';" onfocus="this.nextSibling.nextSibling.style.left='auto';">Menu</a>
<ul>
<li>
<a onfocus="this.parentNode.parentNode.style.left='auto';" href="#sub1" onclick="this.blur()" onblur="this.parentNode.parentNode.style.left='-9999em'">Submenu1</a>
</li>
<li>
<a onfocus="this.parentNode.parentNode.style.left='auto';" href="#sub2" onclick="this.blur()" onblur="this.parentNode.parentNode.style.left='-9999em'">Submenu2</a>
</li>
</ul>
</body>
</html>

29.01.2010