<!DOCTYPE html>
<html>
<head>
<style>
.menu-item {
width: 100px;
height: 50px;
background-color: #f1f1f1;
border: #ccc 1px solid;
float: left;
}
.menu-item td {
text-align: center;
vertical-align: center;
font-size: 20px;
font-weight: bold;
color: #444;
text-shadow: #ccc 1px 1px;
}
.menu-item:hover {
background-color: #eee;
}
.menu-item:hover td {
color: #000;
text-shadow: #ccc 1px 1px;
}
.menu-clear {
width: 0px;
height: 0px;
clear: both;
}
#menuPopup {
position: absolute;
width: 200px;
height: 200px;
border: #ccc 1px solid;
background-color: #f1f1f1;
visibility: hidden;
}
</style>
<script type="text/javascript">
var Menu = {
closePopupHandler: null
};
Menu.closeMenuTimer = function() {
console.log('Menu.closeMenuTimer');
this.stopCloseMenuTimer();
var obj = this;
this.closePopupHandler = setTimeout(function() {
console.log('Closing menu popup');
obj.popupHide();
}, 1000);
};
Menu.stopCloseMenuTimer = function() {
console.log('Menu.stopCloseMenuTimer');
if (this.closePopupHandler) {
clearTimeout(this.closePopupHandler);
this.closePopupHandler = null;
}
};
Menu.popupShow = function() {
document.getElementById('menuPopup').style.visibility = 'visible';
document.getElementById('menuPopup').style.display = 'block';
};
Menu.popupHide = function() {
document.getElementById('menuPopup').style.visibility = 'hidden';
document.getElementById('menuPopup').style.display = 'none';
};
Menu.init = function() {
for (var i = 0; i < document.getElementsByClassName('menu-item').length; i++) {
document.getElementsByClassName('menu-item')[i].xyz = 'testando';
var obj = this;
document.getElementsByClassName('menu-item')[i].onmouseover = function() {
console.log('onmouseover menu item');
var x = this.offsetLeft;
var y = this.offsetTop;
var width = this.offsetWidth;
var height = this.offsetHeight;
console.log('x=' + x + ' y=' + y + ' width=' + width + ' height=' + height);
Menu.stopCloseMenuTimer();
document.getElementById('menuPopup').style.top = (y + height - 1) + 'px';
document.getElementById('menuPopup').style.left = x + 'px';
obj.popupShow();
}
document.getElementsByClassName('menu-item')[i].onmouseout = function() {
console.log('onmouseout menu item');
Menu.closeMenuTimer();
}
document.getElementById('menuPopup').onmouseover = function() {
console.log('onmouseover menu popup');
Menu.stopCloseMenuTimer();
}
document.getElementById('menuPopup').onmouseout = function() {
console.log('onmouseout menu popup');
Menu.closeMenuTimer();
}
}
};
</script>
</head>
<body>
<div class="menu-item">
<table width="100%" height="100%">
<tr>
<td>
Teste
</td>
</tr>
</table>
</div>
<div class="menu-item">
<table width="100%" height="100%">
<tr>
<td>
Teste
</td>
</tr>
</table>
</div>
<div class="menu-item">
<table width="100%" height="100%">
<tr>
<td>
Teste
</td>
</tr>
</table>
</div>
<div class="menu-item">
<table width="100%" height="100%">
<tr>
<td>
Teste
</td>
</tr>
</table>
</div>
<div class="menu-clear"></div>
<div id="menuPopup"></div>
</body>
</html>
<script type="text/javascript">
Menu.init();
</script>
Posts
No comments:
Post a Comment