Simple drop-down menu example
Move mouse to this word: to open a menu.
Source code:
<![CDATA[
<!--
Example for KLayers project
http://www.kruglov.ru/klayers/
(c) Kruglov S.A. 2002
-->
<script src="klayers.js"></script>
<script>
function cancelCloseMenu(){
if(self.tm) clearTimeout(tm) // cancel delayed closing
}
function showMenu(){
if(!self.menu || !self.submenu){
menu=layer("menulayer")
submenu=layer("submenulayer")
}
cancelCloseMenu()
submenu.moveTo(menu.getAbsoluteLeft(), menu.getAbsoluteTop() + menu.getHeight()) // move second menu relatively
submenu.show()
}
function initiateHideMenu(){
tm=setTimeout("hideMenu()",1000) // 1 second delay to close a submenu
}
function hideMenu(){
submenu.hide()
}
</script>
Move mouse to this word: <span id="menulayer" style="position: relative; background-color: yellow"><a href="#" onmouseover="showMenu(); return true" onmouseout="initiateHideMenu(); return true">MENU</a></span> to open a menu.
<div id="submenulayer" style="position: absolute; visibility: hidden; background-color: #00ff00; top: 0px; left: 0px">
<a href="#" onmouseover="cancelCloseMenu(); return true" onmouseout="initiateHideMenu(); return true">item1</a><br>
<a href="#" onmouseover="cancelCloseMenu(); return true" onmouseout="initiateHideMenu(); return true">item2</a></div></plaintext></body></html>]]></plaintext></body>