Tap to open nav dropdown

Hey everybody,

I'm building a site with a nav menu that includes a dropdown (About): https://sites.birdboar.co/annaps/

It works fine on hover, but on a touch device the "About" dropdown doesn't work. I want to make it so tapping on "About" opens the dropdown, but right now it behaves like clicking a link.

I'm guessing this will require tweaking a JS file but I don't know enough about that to know where to look. Any help is much appreciated.

Because touch devices don't handle hover, since there isn't a pointer, they won't ever react to that state.

One thing you could do is check if the target has children, and then prevent the default action if the dropdown isn't open. And make it so you have to click away from the dropdown to close it. This way the user can click the about link if the dropdown is open, but if not, the click will open the dropdown. This should get you started.

$('#navigation > li').on('click', function(event) {
    if(event.target.className.indexOf('has-children') !== -1
    && event.target.className.indexOf('open') === -1) { // If the target has children and isn't open
        event.preventDefault(); // Stops the page redirection
        $(event.target).addClass('open'); // Adds open class to dropdown
    }
});

Ben,

Thanks a lot for replying. Sounds like this is exactly what I need to do. I'll give it a shot.