Last Updated: November 19, 2020

Make CSS dropdown menus work on touch devices

CSS dropdown menus are pretty neat, but they usually depend on :hover, touch devices don't support hover states. So this bit of JQuery will allow you to, use clicks instead of hovers.

//Allow clicking instead of hover for dropdown menus
$(document).ready( function(){

    $('#submenu').click( function(event){
        event.stopPropagation();
        $('#drop').toggle();
    });

    $(document).click( function(){
        $('#drop').hide();
    });

});

This script assumes markup similar to this:

<a href="#" id = "submenu">Products</a>
        <ul id = "drop" >
            <li><a href="#">Widgets</a></li>
            <li><a href="#">Thingamabobs</a></li>
            <li><a href="#">Doohickies</a></li>
        </ul>

#jquery

#css

#javascript

Written by James Barnett

Say Thanks

Respond

Related protips

Bind load and resize for responsive jQuery

27.74K

Breaking Bad logo with CSS, HTML, SVG & JS

17.71K

Bootstrap: Dropdowns on mouse over

16.95K

1 Response

Add your response

rb_atlanta

Thanks for the useful code. It's great that its in jQuery, and works in IE10 and IE11 touch. Do you have a version that works with menus that have several top-level headings with dropdowns? Perhaps using the jQuery ".this" keyword, and CSS classes would work?
--------- Follow Up ----------- I'm new to jQuery, so see if this will work reliably, or maybe there's a better way?

$(document).ready( function(){

$('.submenu').click( function(event){
    event.stopPropagation();
    $(".drop").hide();
    $(this).children("ul").toggle();
});

$(document).click( function(){        
    $('.drop').hide();
});

});

over 1 year ago ·