»
EnglishFrenchVietnamese

Print - Popup Menu Layers - JavaScriptBank.com

Full version: jsB@nk » Menu » Multilevel menu » Popup Menu Layers
URL: http://www.javascriptbank.com/popup-menu-layers-popup-menu-layers.html

Popup Menu Layers © JavaScriptBank.comThis 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
URL: http://www.javascriptbank.com/popup-menu-layers-popup-menu-layers.html



CSS
<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:#eeeeef;   border: 2px solid;border-color: #f7faff #99a #99a #f7faff; }/* Style specifications for menu items and links  */div.menu ul { margin:.5em 1em .6em 0; padding:0 }div.menu ul li { line-height:1; list-style-type:none; margin:0 0 .8em .4em; }div.menu a { text-decoration:none; white-space:nowrap; }  div.menu a:link { color:#33b }div.menu a:visited { color:#339 }div.menu a:hover { color:#33c; border-bottom:1px dashed #33c }</style><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


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


HTML
<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><p>You can set up <a href="javascript:;" onmouseover="menuLayers.show('menu3', event)" onmouseout="menuLayers.hide()">links</a> anywhere in your document to show <a href="javascript:;" onmouseover="menuLayers.show('menu4', event)" onmouseout="menuLayers.hide()">menu layers</a>. You can set up as many menu layers as you like with this code.</p><p>If your <a href="javascript:;" onmouseover="menuLayers.show('menu6', event)" onmouseout="menuLayers.hide()">links</a> appear near the window edge, the code adjusts the position of the <a href="javascript:;" onmouseover="menuLayers.show('menu5', event)" onmouseout="menuLayers.hide()">layer</a> so it will appear within the available window space. </p><p>The <a href="javascript:;" onmouseover="menuLayers.show('menu3', event)" onmouseout="menuLayers.hide()">menu layers</a> are set up using div&#39;s and menu items are in unordered lists. Their appearance is controlled with <a href="javascript:;" onmouseover="menuLayers.show('menu6', event)" onmouseout="menuLayers.hide()">style sheets</a>. </p><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


Files
http://javascriptbank.com/javascript/menu/Popup_Menu_Layers/dw_viewport.js