Phiên bản đầy đủ: jsB@nk » Trình đơn » Trình đơn nhiều cấp » Menu kiểu popup với hiệu ứng rê chuột
URL: https://www.javascriptbank.com/popup-menu-layers-popup-menu-layers-with-menu-hover-effects.html
Hiệu ứng tạo ra bảng chứa các liên kết con tương ứng mỗi khi người dùng rê con trỏ chuột vào các liên kết được chỉ định.
Phiên bản đầy đủ: jsB@nk » Trình đơn » Trình đơn nhiều cấp » Menu kiểu popup với hiệu ứng rê chuột
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