Библиотека Javascript. SE@RCHER

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html lang="en"> <head> <meta name="robots" content="noindex,nofollow"> <title>Вертикальное меню выпадает из линка при наведении</title> <meta http-equiv="Content-Type" content="text/html;charset=windows-1251"> <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> <script type="text/javascript"> /************************************************************************* dw_viewport.js version date Nov 2003 This code is from Dynamic Web Coding at http://www.dyn-web.com/ Copyright 2003 by Sharon Paine See Terms of Use at http://www.dyn-web.com/bus/terms.html Permission granted to use this code as long as this entire notice is included. *************************************************************************/ viewport = { getWinWidth: function () { this.width = 0; if (window.innerWidth) this.width = window.innerWidth - 18; else if (document.documentElement && document.documentElement.clientWidth) this.width = document.documentElement.clientWidth; else if (document.body && document.body.clientWidth) this.width = document.body.clientWidth; }, getWinHeight: function () { this.height = 0; if (window.innerHeight) this.height = window.innerHeight - 18; else if (document.documentElement && document.documentElement.clientHeight) this.height = document.documentElement.clientHeight; else if (document.body && document.body.clientHeight) this.height = document.body.clientHeight; }, getScrollX: function () { this.scrollX = 0; if (typeof window.pageXOffset == "number") this.scrollX = window.pageXOffset; else if (document.documentElement && document.documentElement.scrollLeft) this.scrollX = document.documentElement.scrollLeft; else if (document.body && document.body.scrollLeft) this.scrollX = document.body.scrollLeft; else if (window.scrollX) this.scrollX = window.scrollX; }, getScrollY: function () { this.scrollY = 0; if (typeof window.pageYOffset == "number") this.scrollY = window.pageYOffset; else if (document.documentElement && document.documentElement.scrollTop) this.scrollY = document.documentElement.scrollTop; else if (document.body && document.body.scrollTop) this.scrollY = document.body.scrollTop; else if (window.scrollY) this.scrollY = window.scrollY; }, getAll: function () { this.getWinWidth(); this.getWinHeight(); this.getScrollX(); this.getScrollY(); } } </script> <script type="text/javascript"> /************************************************************************* This code is from Dynamic Web Coding at http://www.dyn-web.com/ Copyright 2003 by Sharon Paine See Terms of Use at http://www.dyn-web.com/bus/terms.html regarding conditions under which you may use this code. This notice must be retained in the code as is! *************************************************************************/ 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> </head> <body> <a href="javascript:;" onmouseover="menuLayers.show('menu1', event)" onmouseout="menuLayers.hide()">menu1</a> <br> <br> <a href="javascript:;" onmouseover="menuLayers.show('menu2', event)" onmouseout="menuLayers.hide()">menu2</a> <br><br> <a href="javascript:;" onmouseover="menuLayers.show('menu3', event)" onmouseout="menuLayers.hide()">menu3</a><br> <br> <a href="javascript:;" onmouseover="menuLayers.show('menu4', event)" onmouseout="menuLayers.hide()">menu4</a>. <br><br> <a href="javascript:;" onmouseover="menuLayers.show('menu6', event)" onmouseout="menuLayers.hide()">menu6</a<br> <br> <a href="javascript:;" onmouseover="menuLayers.show('menu5', event)" onmouseout="menuLayers.hide()">menu5</a><br><br> <div id="menu1" class="menu"> <ul> <li><a href="#">link 1</a></li> <li><a href="#">link two</a></li> <li><a href="#">link three</a></li> <li><a href="#">link four</a></li> <li><a href="#">link five</a></li> </ul> </div> <div id="menu2" class="menu"> <ul> <li><a href="#">ink 1</a></li> <li><a href="#">link two</a></li> <li><a href="#">link three</a></li> </ul> </div> <div id="menu3" class="menu"> <ul> <li><a href="#">link 1</a></li> <li><a href="#">link two</a></li> <li><a href="#">link three</a></li> </ul> </div> <div id="menu4" class="menu"> <ul> <li><a href="#">link 1</a></li> <li><a href="#">link two</a></li> <li><a href="#">link three</a></li> <li><a href="#">link four</a></li> </ul> </div> <div id="menu5" class="menu"> <ul> <li><a href="#">link 1</a></li> <li><a href="#">link two</a></li> <li><a href="#">link three</a></li> <li><a href="#">link four</a></li> </ul> </div> <div id="menu6" class="menu"> <ul> <li><a href="#"> link 1</a></li> <li><a href="#">link two</a></li> <li><a href="#">link three</a></li> <li><a href="#">link four</a></li> </ul> </div> </body> </html>