Выпадающее меню, по клику
Захотелось сделать в плагине для juick выпадающее меню, которое появляется по клику, и исчезает в случае, если был клик в другом месте. Прогуглил пол дня, но удалось найти только решении на css. Намучившись с поиском, решил попытаться переделать css на javascript, решение оказалось не таким сложным как казалось с первого раза:
< !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>
<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>
21.06.2010 в 21:46
В google chrome не работает
23.06.2010 в 15:13
видимо в новых версиях чего-то поменяли, событие onfocus при клике теперь не срабатывает, собственно и пример, по которому я делал, тоже не работает http://www.cssplay.co.uk/menus/ul-multi-four.html
10.02.2012 в 20:58
не работает
25.04.2013 в 23:12
не работает