0

i have a Menu that show or hide than a rolls the mouse pointer into ( mouseover ) and ( mouseout ) an element's space. But whan i fire mouseout an element space to hide menu, the open shave works only if i move mouse pointer an top eletment list ul id="menu". And d't hide then i move mouse pointer on bootom element list ul id=submenu. why ? who can help at this problem???

<ul id="menu" class="menu">
				<li><a href="#">item 1&nbsp </a></li>
				<li><a href="#">item 2&nbsp </a></li>
				<li><a href="#">item 3</a>
					<ul id="submenu" class="submenu">
						<li><a href="#">item 3 sub 1</a></li>
						<li><a href="#">item 3 sub 2</a></li>
					</ul>
				</li>
			</ul>
function doMenu (li){
	var oli = li.childNodes;
	var len = oli.length;
	if (len > 1) {
		for (var i = 0; i < len; i++) {
			if (oli[i].nodeType == 1) {
			   if (oli[i].tagName == 'UL') {
			     return oli[i];
			   }
			 }
		}
	} 
};
function doShow(e) {     
	if (e) {
		var t = e.target;
		var pN = t.parentNode;
			if (pN.tagName == 'LI') {
				if (doMenu(pN)) {
					var oUl = doMenu(pN);
						oUl.style.display = "block";
				}
			}
	}			
};

function doHide (e) {

	if (e) {
		var d = document;
		var t = e.target;
		var n = e.relatedTarget;	
		if (t.parentNode.parentNode.className != 'submenu') {
			console.log('1');
			document.getElementById('submenu').style.display = 'none';
		}
		else document.getElementById('submenu').style.display = 'block';
	} 
	
}
function doEvent (event){
	document.addEventListener('mouseover', doShow, false);
	document.addEventListener('mouseout', doHide, true);
}
doEvent();
2
Contributors
7
Replies
8
Views
6 Years
Discussion Span
Last Post by kudenv
0

Let me see if I can help. You are triggering doShow and doHide from your mouse event. There is no code for this shown. The doShow uses the doMenu function to determine if you are over the 'LI' (watch the case here as this is not the case you are using in your html). This case problem also exists inthe doMenu function.

if (oli[i].tagName == 'UL') {

Your doEvent is adding event listeners but they will not work in IE. In ie you use attachEvent. There is no way shown that removes the event listeners.

That's a start, I hope it helps.

0

Ok. I rewrite my script to this

(function(){ 
  var menu = document.getElementById('menu');
  window.onload = dynamicMenu(menu);
    function dynamicMenu(node){
          var child = node.childNodes;
      for(var i = 0; i < child.length; i++){
            if(child[i].nodeType == 1 && child[i].getAttribute('alowed')){
                  child[i].onmouseover = function see(){
												var submenu = document.getElementById('submenu');
												if(submenu.style.display == 'none'){
													submenu.style.display = 'block';
												}
										};
                  child[i].onmouseout = function hide(){
											var submenu = document.getElementById('submenu');
											if(submenu.style.display == 'block'){
												submenu.style.display = 'none';
											}
										};
                }
                dynamicMenu(child[i]);
                
      }
    }
        
        
  })();

but he work if embed alowed attribute to my li HTML element. And explicitly employ style an COLOR="Green"]UL ID="submenu" style ="display:none" . Bu I wonted, write script don't attach to code at HTML tag's. Only deal script. The full dynamics. I wont what only ul tags enact at work of menu.

0

it may be nothing but is the allowed spelled correctly in this.

if(child[i].nodeType == 1 && child[i].getAttribute('alowed')){
0

Any objections to me switching to jquery.
I have no idea where your heading and what plans you have short of the fact that if an attribute 'allowed' is set you can get at the sub menu's. Back with the code shortly.

0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type = 'text/javascript' src = scripts/jquery-1.4.4.min.js></script>
<style type = 'text/css'>
ul, ul ul{list-style:none; padding:0; margin:0; width:200px;}
ul ul{display:none;}
</style>
</head>
<body>
<ul id="menu">
	<li><a href="#">item 1&nbsp </a></li>
	<li title='3'><a href="#">item 2&nbsp </a></li>
	<li title='3'><a href="#">item 3</a>
		<ul id="submenu">
			<li><a href="#">item 3 sub 1</a></li>
			<li><a href="#">item 3 sub 2</a></li>
		</ul>
	</li>
</ul>
<script type = 'text/javascript'>
$(document).ready(function(){
	$('#menu li').each(function(){
		if($(this).attr('title')) $(this).bind('mouseover', function(e){$('#submenu').css({'display': 'block'}); });
		if($(this).attr('title')) $(this).bind('mouseout', function(e){$('#submenu').css({'display': 'none'}); });
	});
});
</script>
</body>
</html>
0

You will have to make some changes. There is no attribute 'allowed' for anything so I used title instead. As you can see the li in the ul doesn't have a title attribute so the menu is not triggered. Hope this helps.

0

OK. Thanks.
However i want make menu where not use anything attribute (allowed or other name) into LI tag's.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.