Everyone of you gets 1st prize on helping me with Javascript drop-down menus

JavaScript
1

Although all of you deserve 1st prize, I think Technobear gets a second 1st prize when he would not give up and kept pushing me on TABbing & shift-TABbing between successive mark-up <LI>'s.

Well, I think the “almost” final product says it all:

lovesongforever.com/testmenubar

The final problem centers on seamlessly moving between keypresses in Javascript and mouse hovering with CSS.

The problem is demonstrated by first TABbing between items, followed by mouse hovering. For example, if I first TAB between items in a given drop-down menu, and then TAB to another drop-down menu, CSS’s :hover on the previous menu (the one I just left) no longer works.

Quite frankly I do not know where to begin and am pleading for a place to start.

I thought of placing both li:hover and li:focus with my existing CSS , or placing both in my Javascript (rather than splitting the 2 events, li:hover in CSS and focus [tabindex=0] in Javascript).

I just do not know at this point.

2

I have not figured out why my Javascript keypress(tabindex=0) code is interfering with my CSS hover code. In spite of that ignorance, I have figured out how to circumvent the problems I was having randomly pressing TAB(shift-TAB) and mouse hovering.

My former .CSS was:

li:hover .aMenu {
	left: auto;
}

Instead of that, I have created a new function installed via
<body onload=" ... ">

Well, actually 2 functions, but let’s concentrate on:

function setupHoverOverDropMenu() {

	$("li.drop").on( {
		mouseenter: function() {
		//	alert("hover over drop-menu");
			
			if ($itsPrevDropMenu.length > 0) {
				hideMenu($itsPrevDropMenu);
				$itsPrevDropMenu = {};   // mark as hidden
			};
			
			$itsCurrDropMenu = $(this).find(".aMenu").first();
			$itsPrevDropMenu = $itsCurrDropMenu;   // for next time
			
			showMenu($itsCurrDropMenu);
		}, 
		mouseleave: function() {		
			// other Javascript code addresses on mouseleave
		}
	});   // on
	
}   // setupHoverOverDropMenu

I’ve learned a lot in the process; for example, on mouseenter and on mouseleave are inherently less bulky than using :hover … so that’s neat!

(the WHY I mentioned at the top is still bugging me … but later)

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.