Итак, у меня есть вопрос, который, я уверен, многие задавали раньше. Я пытаюсь использовать систему меню с исчезновением собственного дизайна без помощи JQuery. Моя проблема, конечно, в том, что я могу заставить меню исчезать или исчезать в идеальном мире, где указатель не может быстро войти и покинуть элемент, который создает меню (в моем случае UL). Но, естественно, я получаю эффект мерцания, когда курсор быстро входит и выходит из UL. Я предполагаю, что мне нужен отличный обработчик событий моего собственного дизайна. Я опубликую свой код, хотя я не думаю, что он понадобится, потому что я, вероятно, собираюсь его пересмотреть и начать все сначала. У кого-нибудь есть ссылки / идеи / или хорошее руководство, чтобы начать с этого?
код JavaScript:
window.onload = InitPage;
function InitPage(){
function fadeEffect(child, opacity, direction, e){
if(direction && opacity != 1){
opacity = opacity < 1?Math.round((opacity + 0.05)*100)/100:1;
child.style.opacity = opacity;
setTimeout(function(){fadeEffect(child, opacity, direction,e)},50);
}else if(!direction && opacity != 0){
opacity = opacity > 0?Math.round((opacity - 0.05)*100)/100:0;
child.style.opacity = opacity;
child.style.display = opacity == 0?"none":"block";
setTimeout(function(){fadeEffect(child, opacity, direction,e)},50);
}
}
function hoverMenu(e, oTarget){
var isChildOf = function(pNode, cNode){
if(pNode === cNode){
return true;
}
while (cNode && cNode !== pNode){
cNode = cNode.parentNode;
}
return cNode === pNode;
}
var hasChildMenu = function(pNode, cNode){
while(cNode && cNode !== pNode){
if(cNode.className == "ul_menu" || cNode.className == "li_menu"){
cNode.style.display = "block";
//cNode.style.opacity = 1;
fadeEffect(cNode,0,true,e);
//cNode.timer = setInterval(function(arg1,arg2,arg3){return function(){fadeEffect(arg1,arg2,arg3)}}(cNode,opacity,true),50);
}
cNode = cNode.previousSibling;
}
if(e.type == "mouseout"){
e.cancelBubble();
}
}
var target = e.target;
if(!oTarget){
oTarget = target;
}
var relTarg = e.fromElement;
if(isChildOf(oTarget, relTarg) == false){
//alert("mouse enters");
hasChildMenu(oTarget, oTarget.lastChild);
}
}
function unhoverMenu(e, oTarget){
var isChildOf = function(pNode, cNode){
//check to see if element is a child
if(pNode === cNode){
return true;
}
while (cNode && cNode !== pNode){
cNode = cNode.parentNode;
}
return cNode === pNode;
}
var hasChildMenu = function(pNode, cNode){
while(cNode && cNode !== pNode){
if(cNode.className == "ul_menu" || cNode.className == "li_menu"){
//cNode.style.opacity = 0;
//cNode.style.display = "none";
fadeEffect(cNode,1,false,e);
}
cNode = cNode.previousSibling;
}
if(e.type == "mouseover"){
e.cancelBubble();
}
}
var target = e.target;
if(!oTarget){
oTarget = target;
}
var relTarg = e.toElement;
if(isChildOf(oTarget, relTarg) == false){
hasChildMenu(oTarget, oTarget.lastChild);
}
function MenuEventHandler (e, oTarget){
}
}
var ul_menu = document.getElementById("ul_grabbed");
ul_menu.addEventListener("mouseover", function(e1){return function(e){hoverMenu(e, e1)}}(ul_menu),false);
ul_menu.addEventListener("mouseout", function(e1){return function(e){unhoverMenu(e, e1)}}(ul_menu),false);
//document.addEventListener("mouseover", hoverMenu,false);
//document.addEventListener("mouseout",unhoverMenu,false);
}
HTML код:
<html>
<head>
<script type="text/javascript" src="bubble.js"></script>
<link rel="stylesheet" href="bubble_style.css" type="text/css" media="screen" />
</head>
<body>
<div id="background">
<div id="menu_section">
<ul id="ul_grabbed" class="ul_menu">Menu 1
<li class="li_menu">item 1</li>
<li class="li_menu">item 2</li>
<li class="li_menu">item 3</li>
<li class="li_menu">item 4</li>
</ul>
<ul class="ul_menu">
Menu 2
</ul>
</div>
</div>
</body>
</html>
Код CSS:
*{margin:0; padding:0}
body{margin:0; padding:0;background-color:black}
div#background{
margin: 0 auto 0 auto;
display:block;
width:800px;
height:100%;
vertical-align:middle;
background-color: green;}
div#menu_section{
margin:auto;
width:800px;
height:40px;
background-color:purple;}
div#monkey{
width:400px;
height:400px;
background-color:red;}
ul.ul_menu{
list-style:none;
display:block;
height:40px;
width:400px;
float:left;
text-align:center;
color:white;
}
li.li_menu{
height:20px;
display:none;
position:relative;
text-align:center;
color:white;
background-color:black;
opacity:0;}