»
Tiếng AnhTiếng PhápTiếng Việt

In - Menu kiểu popup - JavaScriptBank.com

Phiên bản đầy đủ: jsB@nk » Trình đơn » Trình đơn nhiều cấp » Menu kiểu popup
URL: https://www.javascriptbank.com/popup-menu-layers-popup-menu-layers.html

Menu kiểu popup © JavaScriptBank.comHiệ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
URL: https://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