Full version: jsB@nk » Menu » Multilevel menu » Popup Menu Layers with Menu Hover Effects
URL: https://www.javascriptbank.com/popup-menu-layers-popup-menu-layers-with-menu-hover-effects.html
This JavaScript allows you to associate a dynamic JavaScript menu with regular links on your page. As the mouse moves over the link, a JavaScript menu pops up containing "sub links".
Full version: jsB@nk » Menu » Multilevel menu » Popup Menu Layers with Menu Hover Effects
URL: https://www.javascriptbank.com/popup-menu-layers-popup-menu-layers-with-menu-hover-effects.html
<style type="text/css">body { font: 14px/1.3 verdana, arial, helvetica, sans-serif; }h1 { font-size:16px }a:link { color:#33c }a:visited { color:#339 }/* These are the style specifications for the menu layers. Set width to get more browsers corporation */div.menu { position:absolute; visibility:hidden; width:110px; left:0; top:0; z-index:500; font-size:12px; background-color: #e6e6e6; color:#000; border: 2px solid; border-color: #f7faff #99a #99a #f7faff; z-index:500;}/* Style specifications for menu items and links */div.menu ul { margin:0; padding:0 }/* Need to set padding of at least one pixel or ie sets very large margin */div.menu ul li { padding:1px; margin:0; list-style-type:none }/* Set display block and position relative so clicks on list items activate links */ div.menu a { cursor:default; padding:.3em .4em; margin:0; background-color:transparent; display:block; position:relative; text-decoration:none } div.menu a:link { color:#33b }div.menu a:visited { color:#339 }div.menu a:hover { color:#fff; background-color:#338 }</style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script src="dw_viewport.js" type="text/javascript"></script><script type="text/javascript">var menuLayers = { timer: null, activeMenuID: null, offX: 4, // horizontal offset offY: 6, // vertical offset show: function(id, e) { var mnu = document.getElementById? document.getElementById(id): null; if (!mnu) return; this.activeMenuID = id; if ( mnu.onmouseout == null ) mnu.onmouseout = this.mouseoutCheck; if ( mnu.onmouseover == null ) mnu.onmouseover = this.clearTimer; viewport.getAll(); this.position(mnu,e); }, hide: function() { this.clearTimer(); if (this.activeMenuID && document.getElementById) this.timer = setTimeout("document.getElementById('"+menuLayers.activeMenuID+"').style.visibility = 'hidden'", 200); }, position: function(mnu, e) { var x = e.pageX? e.pageX: e.clientX + viewport.scrollX; var y = e.pageY? e.pageY: e.clientY + viewport.scrollY; if ( x + mnu.offsetWidth + this.offX > viewport.width + viewport.scrollX ) x = x - mnu.offsetWidth - this.offX; else x = x + this.offX; if ( y + mnu.offsetHeight + this.offY > viewport.height + viewport.scrollY ) y = ( y - mnu.offsetHeight - this.offY > viewport.scrollY )? y - mnu.offsetHeight - this.offY : viewport.height + viewport.scrollY - mnu.offsetHeight; else y = y + this.offY; mnu.style.left = x + "px"; mnu.style.top = y + "px"; this.timer = setTimeout("document.getElementById('" + menuLayers.activeMenuID + "').style.visibility = 'visible'", 200); }, mouseoutCheck: function(e) { e = e? e: window.event; // is element moused into contained by menu? or is it menu (ul or li or a to menu div)? var mnu = document.getElementById(menuLayers.activeMenuID); var toEl = e.relatedTarget? e.relatedTarget: e.toElement; if ( mnu != toEl && !menuLayers.contained(toEl, mnu) ) menuLayers.hide(); }, // returns true of oNode is contained by oCont (container) contained: function(oNode, oCont) { if (!oNode) return; // in case alt-tab away while hovering (prevent error) while ( oNode = oNode.parentNode ) if ( oNode == oCont ) return true; return false; }, clearTimer: function() { if (menuLayers.timer) clearTimeout(menuLayers.timer); } }</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><p>Hover over the links to see the <a href="javascript:;" onmouseover="menuLayers.show('menu1', event)" onmouseout="menuLayers.hide()">menu layers</a> demonstrated. The links and menu item links go <a href="javascript:;" onmouseover="menuLayers.show('menu2', event)" onmouseout="menuLayers.hide()">nowhere</a> in this example.</p><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->http://javascriptbank.com/javascript/menu/Popup_Menu_Layers/dw_viewport.js