CODEWITHSUNDEEP
javascriptcss
rdoyle720
rdoyle720

Reputation: 3130

open/close nav on hover with mouse, touch on mobile?

My navigation is a short bar that is fixed to the top of the screen. If you hover over it, it expands to show you the menu options and collapses if you roll out of it. This works great on the desktop (and actually even modern Android devices where you can click inside the nav to open it, and click outside to close it). On iOS devices, touching the nav will open it, but touching outside the nav will NOT close it, except in odd cases like touching an image.

I could rewrite the nav so it opens/closes on click across the board, but that feels clunky on the desktop. Having it open and close on hover feels more discoverable and snappy.

Have you folks ever come across this? Is it possible to have it work differently on mobile? Should it?

Upvotes: 1

Views: 539

Answers (2)

Adam Jenkins
Adam Jenkins

Reputation: 55732

There's a few ways to solve this - here's the fastest (hackiest) one:

Create a hidden input (or you can use a regular input if you've always got on on your page). Listen for a "touchstart" event on the body - if the target is inside your nav element you can ignore it, OTHERWISE, focus and blur that input element simultaneously. This will remove focus from your "hovered" nav item.

This is a piece of code I recently used (uses Modernizr and jQuery):

            Modernizr.touch && $('body').on('touchstart',function(e) {
                $('input',$('#search')).focus().blur();
            });

Upvotes: 1

Mark1ra
Mark1ra

Reputation: 28

Maybe something like @media could help you: http://www.w3schools.com/css/css_mediatypes.asp

Upvotes: 0

Related Questions