Question

i have created a jquery onhover vertical sliding menubar now i need to implement horizontal sliding also i am facing some problem with the styling it is not coming horizontally

i have created a demo in jsfiddle link to demo

on hovering over ‘manage’ in the vertical slidedown menu there is lookup management menu under which there are 2 submenus(hi and hello) which i want to slide horizontally but unable to do so, it seems there is some problem with the javascript can someone help me out

the javascript is here

    var menuShowDelay = 500;
var menuHoverTimer = null;
$(function () {
    bindMenuSliding();
});

function bindMenuSliding() {
    // Expand menu on mouse over.
    $('.ulMiddleMenu li').hover(function () {
        // Clear previous mouse hover timer.
        if (menuHoverTimer) {
            clearTimeout(menuHoverTimer);
            menuHoverTimer = null;
        }



        var targetElement = $(this); // Get the target element.

        // Display the menu after a certain time interval.
        menuHoverTimer = setTimeout(function () {
            targetElement.parent('ul').find('ul').stop(true, true).css('display', 'none');
            targetElement.find('ul').slideDown('medium');
        }, menuShowDelay);
    },
    function () {
        // Clear previous mouse hover timer.
        if (menuHoverTimer) {
            clearTimeout(menuHoverTimer);
            menuHoverTimer = null;
        }

        // Hide the menu.
        $(this).find('ul').slideUp('fast');
    });
}

you can copy paste this in the javascript panel of jsfiddle

Answer 1

Two main problems. One, you were showing all sub-menus on hover, instead of just the child. Two, you had no logic to distinguish between levels of navigation, so there was no way to expect the lower levels to behave differently at all.

// Display the menu after a certain time interval.
menuHoverTimer = setTimeout(function () {
    var $parent = targetElement.parent('ul');
    $parent.find('ul').stop(true, true).hide();
    //test for first level nav 
    if( $parent.hasClass("ulMiddleMenu") ){
        targetElement.children('ul').slideDown('medium');
    }else{
        targetElement.find('ul').width(0).show().animate({width:'100%'},1000);
    }

}, menuShowDelay);

jsFiddle. This still leaves some issues for you to sort out in terms of display. You should consider scrapping your CSS and starting from scratch because it is going to get harder and harder to dig your way out of that mess.