CODEWITHSUNDEEP
jquerynavigation
Stephen Jenkins
Stephen Jenkins

Reputation: 1836

How to prevent a hover firing on responsive navigation

I am building a responsive navigation and have just run into a problem. The essence of the navigation is for it to be responsive, so you click a 'three-line' button and the menu pops down in the page. The menu supports nested <ul>'s so that inside the menu, you can click a box (on the right) to open the nested menu as well. Now, my issue here is that I only want to open the navigation onclick, not hover.

In essence:

All is working fine, but the hover event to open the desktop navigation, is obviously triggering the navigation to open when it's in responsive view. How can I prevent this?

Here's the JSFiddle of the nav, please click the black box: http://bit.ly/ZZJcYk

Upvotes: 0

Views: 1005

Answers (1)

Vexter
Vexter

Reputation: 1172

One way I'd recommend is to use: http://modernizr.com/

It will help you in many other ways when developing responsive sites/apps.

By including it, you'll be getting (among other things) classes for your HTML node.

If the user is on a touch device it will be the .touch class, if not, .no-touch.

To make use of this you would do the following with your code:

$('.no-touch .nav').on({
        mouseenter: function () {
            $(this).children('.nav-submenu').toggle();
        },
        mouseleave: function () {
            $(this).children('.nav-submenu').toggle();
        }
    }, '.nav-item');

The $('.no-touch .nav') would make sure that this code only executes on no-touch devices, such as desktop. There are other solutions, but using modernizr is something I'd highly recommend in the long run.

Upvotes: 1

Related Questions