0

The dropdown menu that Thesis creates is 99% fine, except that it's very unforgiving to users that don't master the use of mouse very easily - old people and people with average to bad vision. I would like to improve its usability using a bit of javascript, allowing the mouse to be a few pixels offside and still keep the submenu open. I tried this in my custom javascript file:

var hoverConfig = {    
         over: function(e){
                e.preventDefault();
                $.log("launch menu");
                $('.sub-menu',$(this)).show();
        },  
        timeout: 500, // number = milliseconds delay before onMouseOut    
        out:  function(e){
                e.preventDefault();
                $.log("hide menu");
                $('.sub-menu',$(this)).hide();
        } 
    };

    $('.sub-menu').hide();
    $("#menu-main-menu").hoverIntent( hoverConfig );

Firebug logging shows that it works - the show and hide functions are called, but the CSS behaviour still triggers and i don't manage to cancel it so that the javascript behaviour takes the full control. Any idea how i can do that?

0

In fact it works; i just didn't bind the behaviour to the right element. It should be bound to the #mainmenu>li and then it works. Dumb me!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.