Version compl�te: jsB@nk » Menu » Multilevel menu » Menu des calques avec le menu Effets Hover
URL: https://www.javascriptbank.com/popup-menu-layers-popup-menu-layers-with-menu-hover-effects.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 avec le menu Effets Hover
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