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.

Recommended Answers

All 9 Replies

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?

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.

i wont write doHide function after i write corectly doShow

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???

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 ?

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

Eh??? What does that mean???

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

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

ok. thanks for help!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.