Version complète: jsB@nk » Menu » Multilevel menu » Menu des calques
URL: https://www.javascriptbank.com/popup-menu-layers-popup-menu-layers.html
Cet JavaScript vous permet d'associer une dynamique JavaScript menu régulièrement Liens sur votre page. Comme les déplacements de la souris sur le lien, une JavaScript menu apparaît contenant "sous les liens".
Version complète: jsB@nk » Menu » Multilevel menu » Menu des calques
URL: https://www.javascriptbank.com/popup-menu-layers-popup-menu-layers.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:#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--><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><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'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-->http://javascriptbank.com/javascript/menu/Popup_Menu_Layers/dw_viewport.js