<!DOCTYPE HTML><html><head>
<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 }
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;
}
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">
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();
}}
var menuLayers = {
timer: null,
activeMenuID: null,
offX: 4,
offY: 6,
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;
var mnu = document.getElementById(menuLayers.activeMenuID);
var toEl = e.relatedTarget? e.relatedTarget: e.toElement;
if ( mnu != toEl && !menuLayers.contained(toEl, mnu) ) menuLayers.hide();
},
contained: function(oNode, oCont) {
if (!oNode) return;
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>
