[icos] Add delay to menu hover and allow keyboard menu expansion

[ahd44]

Improve user experience by delaying opening of menu so that briefly hovering over a menu item does not take up the entire screen on small displays.

Increases general delay from 0.1s to 0.4s; adds additional delay for "disappearing" to ensure flickering does not occur, and increases z-index on hover so hovered tab always appears on top.

Also adds rules to allow keyboard focus to expand menu. (Note that for testing, the "admin" interface messes with tab order somehow and the menu navigation links are not focusable; I am not sure why, but it works for non-logged in users just fine.)

The keyboard focus could use some work; right now if you hover over something else with a menu open via keyboard focus, the menu opens "twice", and it can be difficult to close the menu via keyboard only. But it is still preferable for accessibility to allow keyboard focus to open the menu, I think.

---

• To see the specific tasks where the Asana app for GitHub is being used, see below:
  • https://app.asana.com/0/0/1208361819652425

[jonathanthiry]

It's nice not to have the menu open when your cursor just crosses the main navigation!
Do you think you try to have an animation for the menu opening? You could draw some inspiration from Apple's website, where the menu opens from top to bottom. I think that it could work for us as well.

[ahd44]

It's nice not to have the menu open when your cursor just crosses the main navigation! Do you think you try to have an animation for the menu opening? You could draw some inspiration from Apple's website, where the menu opens from top to bottom. I think that it could work for us as well.

Yes, definitely -- I had tried doing a fade in/fade out using transitions on opacity but it did not look great and had some issues with hovering on/off because of the delay in opening/closing (where you could get it "stuck" in a partially transparent state until the delay was up), so I scrapped it. I think I might have the same issue with transitions on height, but I'll try it and see if I can get it to work well. I like the look and feel of those menus from Apple though, they are super nice!

[ahd44]

Do you think you try to have an animation for the menu opening?

Added/deployed my first attempt at this to demo.icos-cp.eu. It's not as smooth as Apple's just yet... theirs has a very nice like "sliding appearing" effect on each submenu that I'd like to try (and currently I'm just changing opacity of the subcontent to get a similar kind of feel). But it's a good start, I think.

[jonathanthiry]

Oh yes! That is already very good!
As you said, it could be a bit smoother in some cases, but I like it!

[ahd44]

As this was done with the old theme, this is no longer relevant. The idea has been re-implemented for the new themre in #26