Disable jQuery Dropdown for Mobile

Question

My website has had nav dropdowns that I made with CSS but I've recently changed it to jQuery so it's animated. When it was CSS I was able to disable the dropdowns on the smallest breakpoints for mobile. But with jQuery I don't know how to do that. This is my dropdown code. What can I do to it to make it disable when the viewport gets small enough?

$(document).ready(function() {
    $('.nav > li').mouseenter(function() {
        $(this).children('.nav-content').slideDown(200);
    });

    $('.nav > li').mouseleave(function() {
        $(this).children('.nav-content').slideUp(200);
    });
});

This is the website as it is now:

http://mattboy115.github.io/scarymonkeyshow/index.html

score 3 · Accepted Answer · answered Feb 29 '16 at 02:23

3

You can check the size of the screen with $(window).width() and $(window).height()

So something like

$(document).ready(function() {
    if($(window).width() > 800){
        $('.nav > li').mouseenter(function() {
            $(this).children('.nav-content').slideDown(200);
        });

        $('.nav > li').mouseleave(function() {
            $(this).children('.nav-content').slideUp(200);
        });
    }
});

answered Feb 29 '16 at 02:23

Eric Guan

13,320
7
34
53

You were the only one who knew what I was specifically looking for and gave me a clear answer. Thank you. This works. It doesn't let me switch between working and non working unless I reset the page first. But it works and that's what matters. People aren't going to stretch their phone screens out anyway lol – Matt Lee Feb 29 '16 at 04:44
1

Thanks. You could potentially put my answer into a `resize` event listener, then you could switch between working and non working without a reset. It 's more complicated though, and you're right ppl won't stretch their phones. But for testing wise it's comforting to see the code working as expected. – Eric Guan Feb 29 '16 at 04:55

score 1 · Answer 2 · answered Feb 29 '16 at 02:34

The answers given will work, but I'd recommend making a second nav for mobile and using media queries to make the right one show.

Just real simple HTML:

<div class="desktop-nav">
    [nav code]
</div>
<div class="mobile-nav">
    [mobile nav code]
</div>

then CSS:

@media screen and (min-width: [X]px) {
    .mobile-nav {
        display: none;
    }
}
@media screen and (max-width: [X]px) {
    .desktop-nav {
        display: none;
    }
}

then your jquery is solved by just applying the mouseenter to .desktop-nav:

$(document).ready(function() {
    $('.desktop-nav > li').mouseenter(function() {
        $(this).children('.nav-content').slideDown(200);
    });

    $('.desktop-nav > li').mouseleave(function() {
        $(this).children('.nav-content').slideUp(200);
    });
});

score 1 · Answer 3 · edited May 23 '17 at 11:59

I am uncertain if you are looking to do this at a specific size or if you want it for mobile. For example you can use modernizer to detect if touch is enabled on the device:

Using Modernizr to test for tablet and mobile - Opinions wanted

you can also check user agents to match device types and apply your code that way:

What is the best way to detect a mobile device in jQuery?

You can then apply if it does or doesn't match your conditions based on your detection..

Disable jQuery Dropdown for Mobile

3 Answers3