« »

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".

Label: Popup Menu Layers with Menu Hover Effects

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
Files
CSS
JavaScript
HTML
Print

dw_viewport.js

Copy All x2

<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
	-->

Copy All x2

<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
	-->

Copy All x2

<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
	-->