Question

I’ve got a menu like:

<ul class="sub">
    <li><a href="#">New</a></li>
    <li><a href="#">Open</a></li>
    <li><a href="#">Save</a></li>
    <li><a href="#">Help</a></li>
</ul>

which is “animated” via css hover code (nothing special). The Open option kicks off a file open function (via a hidden “input type=file” control). That all works fine, but when I’m done with the “file open” dialog, the menu is still displayed (albeit briefly). Is there any way to have the menu disappear as soon as “Open” is clicked, and have that (disappearance) render on the screen even before the “open dialog” runs?
TIA

Answer 1

What you want to do is hide the submenu when the window blurs. Not sure if you’re using a JS library, but it would simply be like below. Here’s a generic jsfiddle: http://jsfiddle.net/rgthree/b6QSP/

window.onblur = function(){
  // Where "submenu" is the sub menu to hide,
  // however you're targeting it
  submenu.style.display = 'none';
}