Clickable Dropdown Navigation [PROBLEM]
I 'm working on a menu which imitates a desktop application menu toolbar (like this on your firefox
).
Here's a demo
http://jsfiddle.net/bvRnR/11/
[1] The menu is an <ul> containing <li> elements and <ul>s for sub-navigation.
[2] User clicks the top-nav <li> with the arrow indicator and sub-menu pops out.
[3] By clicking again the sub-menu hides.
[4] Also by clicking outside the top-nav <ul>, a visible sub-menu hides (i used focusout event for this one).
[5] Last one, a usability enhancement. Once a user clicks a top-nav <li> element with arrow indicator, he doesn't have to click again the rest <li>s with sub-nav. For instance, in the demo, if i click "Articles" and the menu pops out i shouldn't have to click "Games" in order to display it's own sub-nav.
I'm having problems with [2]-[3], like arrow flickering as i click but before releasing the mouse button.
Number [5] is a big mystery to me, i 'm not at this level right now.
Thanks in advance for anyone having an idea about fixing the problem.
).Here's a demo
http://jsfiddle.net/bvRnR/11/
[1] The menu is an <ul> containing <li> elements and <ul>s for sub-navigation.
[2] User clicks the top-nav <li> with the arrow indicator and sub-menu pops out.
[3] By clicking again the sub-menu hides.
[4] Also by clicking outside the top-nav <ul>, a visible sub-menu hides (i used focusout event for this one).
[5] Last one, a usability enhancement. Once a user clicks a top-nav <li> element with arrow indicator, he doesn't have to click again the rest <li>s with sub-nav. For instance, in the demo, if i click "Articles" and the menu pops out i shouldn't have to click "Games" in order to display it's own sub-nav.
I'm having problems with [2]-[3], like arrow flickering as i click but before releasing the mouse button.
Number [5] is a big mystery to me, i 'm not at this level right now.
Thanks in advance for anyone having an idea about fixing the problem.
Topic Participants
pelagwsa