Что я хотел сделать - скрипт в точности повторяющий скрытие/открытие контекстного меню ( на
https://plus.google.com это настройки, значок шестеренка, на facebook это треугольник направленный вниз), скпытие должно происходить по нажатию в любой области экрана. Вот скрины контекстных меню, если кто-либо еще не понял о чём я:
http://s1.ipicture.ru/uploads/20111025/TUILFYr5.png
http://s2.ipicture.ru/uploads/20111025/UoVlkTUZ.png
Я абсолютный новичок в программировании, потому прошу строго не судить за вариант быдлорешения.
Реализовал так - есть основной див в нем контент, при нажатии на див менюха прячется, но меня и настигла злая шутка, я не смог запихнуть саму кнопку открывающую контекст меню в этот самый див, иначе бы это все не заработало,
Вот запилил рабочий вариант
<head>
<style>
.v-menu{border:solid 1px #7f9fbf; width:200px; clear:both;}
ul.v-menu, v.menu li{padding:0; margin:0; list-style:none;}
ul.v-menu{clear:both; margin-top:6px;padding:6px 2px;}
ul#v-menu.v-menu li:hover {background-color: #D8DFEA;}
ul#v-menu.v-menu li a{color: #333333;font-size: 11px;font-family: "lucida grande",tahoma,verdana,arial,sans-serif;text-decoration:none;padding-left:10px;}
</style>
<script type="text/javascript">
function showElement(layer) {
var myLayer = document.getElementById("v-menu");
if ( myLayer.style.display=="none" )
{
myLayer.style.display="block";
myLayer.backgroundPosition="top";
} else {
myLayer.style.display="none";
}
}
function hideElement(layer) {
var myLayer = document.getElementById("v-menu");
if ( myLayer.style.display=="block" )
{
myLayer.style.display="none";
}
}
</script>
</head>
<div id="content" onclick="javascript:hideElement('v-menu')">
<a href="#" class="button" id="button" onclick="javascript:showElement('v-menu')">
<span>Click Here</span>
</a>
<div id="menu">
<ul id="v-menu" class="v-menu" style="display:none;">
<li><a href="/user/profile/">профиль</a></li>
<li><a href="/user/viewfriends/">друзья</a></li>
<li><a href="/user/saved/">избранное</a></li>
<li><a href="/login.php?op=logout&return=">выйти</a></li>
</ul>
</div>
</div>
может кто посоветовать нормальный вариант реализации без всяких костылей и скрытых дивов?