How to make jQuery UI nav menu horizontal?

Question

I love the jQuery UI stuff!

I like the navigation menu, but I can\'t seem to get it horizontal. I\'ve got to be missing something that\'s a cinch.

Anyone kno

Answer 1

Just think about the jquery-ui menu as being the verticle dropdown when you hover over a topic on your main horizonal menu. That way, you have a separate jquery ui menu for each topic on your main menu. The horizonal main menu is just a collection of float:left divs wrapped in a mainmenu div. You then use the hover in and hover out to pop up each menu.

$('.mainmenuitem').hover(
    function(){ 
        $(this).addClass('ui-state-focus');
        $(this).addClass('ui-corner-all');
        $(this).addClass('ui-state-hover');
        $(this).addClass('ui-state-active');
        $(this).addClass('mainmenuhighlighted');
        // trigger submenu
        var position=$(this).offset();
        posleft=position.left;
        postop=position.top;
        submenu=$(this).attr('submenu');
        showSubmenu(posleft,postop,submenu);    
    },
    function(){ 
        $(this).removeClass('ui-state-focus');
        $(this).removeClass('ui-corner-all');
        $(this).removeClass('ui-state-hover');
        $(this).removeClass('ui-state-active');
        $(this).removeClass('mainmenuhighlighted');
        // remove submenu
        $('.submenu').hide();
    }
    );

The showSubmenu function is simple - it just positions the submenu and shows it.

function showSubmenu(left,top,submenu){
    var tPosX=left;
    var tPosY=top+28;
    $('#'+submenu).css({left:tPosX, top:tPosY,position:'absolute'});
    $('#'+submenu).show();
}

You then need to make sure the submenu is visible while your cursor is on it and disappears when you leave (this should be in your document.ready function.

$('.submenu').hover(
            function(){ 
                $(this).show();
            },
            function(){ 
                $(this).hide();
            }
            );

Also don't forget to hide your submenus to start with - in the document.ready function

$(".submenu" ).hide();

See the full code here

http://jsfiddle.net/R4nyn/