0

Hy all. I have some problem then tried employ action onMouseover and onMouseOut.
I have further drop unordered menu

div#content{position: relative; padding:0 10px; border: solid 1px #6b6b6b; height: 100px;}
ul li {list-style: none;}
ul.menu {padding: 0; margin:0; display: block; height: 68px;}
ul.menu > li  {float: left;  background: url("li.jpg") no-repeat top right; height: 68px;} 
ul.menu > li  a{display:block; padding-left: 3px; text-decoration: none; height: 68px;} 
ul.menu > li  a:hover {display: block; background: url("a-hover.gif") repeat-x bottom left; height: 68px;} 
ul.menu  > li > ul.submenu {display: none;}
<div id="content" class="content">
			<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>
		</div>

and javascript

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;
		console.log(t.tagName);
		var pN = t.parentNode;
		console.log(pN)
			if (pN.tagName == 'LI') {
				if (doMenu(pN)) {
					var oUl = doMenu(pN);
					if (oUl.style.display == "none") {
						oUl.style.display = "block"}
					else {oUl.style.display = "none"}}}}};

function doHide (e) { //d't essue
	if (e) {
		var t = e.target;
		if (t.tagName == "A") {
			if (t.onFocus === 'null') {alert('focus')}
		} 
	//	console.log("doHide event "+t.tagName);}}
function dodo (event){
	document.addEventListener('mouseover', doShow, false);
	document.addEventListener('mouseout', doHide, true);
}
dodo();

then i mouse over to html element <a> my sub menu is show but it work partial. Because then i first time mouse over to <a> it d't work, and when i follow action sub menu Show. i d't understand why it work so this. who may help ???? I dont so long study js.

2
Contributors
9
Replies
10
Views
6 Years
Discussion Span
Last Post by kudenv
0

I am not sure how you want to 'hide' your menu item. In your doShow(), you hide it if it is being displayed when mouseover. Is that what you really want? In doHide(), I see nothing about hiding because you only remove the onFocus...

Also, your code works only on FF and other browsers but not IE. Do you want it to work on all browsers too?

0

i hook event from element <a> and see if <a> have parentNode="LI" i hold <li> and refer to function doMenu(li). It function find all child <li> and if has <ul> then i now what this Menu. Futher i employ function doShow and attach to element new style if (display: none) i make it :block and backward.

so i show menu. But then i do this it not work directly. evry time i do mouse over twice.

0

i wont write doHide function after i write corectly doShow

0

Hmm... You still don't get what I am trying to say about your doShow()...

The way you toggle the hide/show in your doShow() will result in mouseover-show & mouseover-hide instead of mouseover-show & mouseout-hide. You need to do the hiding (display:none) part inside doHide(), not in doShow(). How would the doShow() knows which element is the previous displayed from the mouse? It only knows which element the event is being fired from mouseover which is itself... Unless you do not want to hide those links from mouseout???

Edited by Taywin: n/a

0

oo seem i underestand that you tell me.
in function doShow - delete this line

else {oUl.style.display = "none"}

and doHide like this

function doHide (e) { 
if (e) {
var t = e.target;
// (some match to event may this )
if (t.tagName == "A") {
 //and hide
   getElementById("submenu").style.display = "none";
}

and my next question have frend from russia may be frend ?

0

my english not so well. sorry. i mean frend. It corrispond, tolk.
what you think i not undestand.

0

Oh you could just come on this forum to ask. :) There would be other people willing to help you out as well. :)

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.