Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

I'm somewhat new to developing with SharePoint, so sorry if this is painfully obvious and I'm totally missing something.

I have a publishing site that I'm working on, and I need to tweak the navigation on it. So far the heading links work well, but I want its sublinks to just appear right under each heading looking like they're child links to each heading. No hover or anything to make them appear, they'll already be appearing by default. Here's a screenshot of what I currently have:

enter image description here

Disregard the unimplemented CSS that needs to be done. Currently, "ABC 101" and "ABC 123" show up when I mouse-over "Teaching" or the space below it. Once I leave either that mouse-over space or the "ABC 101"/"ABC 123" links, it'll go away. Same thing happens with "Research". What I would like to do is make it so that the links show up all the time (don't rely on a hover to make them appear) and to move them over so they're in the navigation area. Here is the jQuery code that I'm unsuccessfully using:

(function($) {
    var timer;
    $(document).ready(function() {
        $('li.static.dynamic-children').unbind('mouseover').unbind('mouseout')
        .hover(function () {
            var li = $(this);
            li.css({'position': 'relative', 'z-index': '100'}).find('ul.dynamic').css({'left': '-1px', 'top': '25px'});
        }, function() {
            var li = $(this);
            //li.css({'position': 'static', 'z-index': 'auto'})
            //.find('ul.dynamic').css({'left': '-999em'});
        });
    });
}(jQuery));

Can anyone give me a hand as to what I'm doing wrong?

share|improve this question

1 Answer 1

Try $(".menu [hoverDebouncer]").removeAttr("hoverDebouncer") instead of the unbinds

$(document).ready(function() {
    $(".menu [hoverDebouncer]").removeAttr("hoverDebouncer")
    .hover(function () {
        var li = $(this);
        li.css({'position': 'relative', 'z-index': '100'}).find('ul.dynamic').css({'left': '-1px', 'top': '25px'});
    }, function() {
        var li = $(this);
        //li.css({'position': 'static', 'z-index': 'auto'})
        //.find('ul.dynamic').css({'left': '-999em'});
    });
});
share|improve this answer
    
Added that into my jQuery block, replacing everything else, and got nothing. –  Chiggins Feb 26 '13 at 20:39
    
Ah sorry, I meant instead of the unbind statements - I thought I already put that in the answer, let me update. –  James Love Feb 26 '13 at 22:32
    
Don't you think it would be easier to do this via CSS? –  Stephen Feb 26 '13 at 22:43
    
@JamesLove I copy/pasted what you have exactly, but still no dice. –  Chiggins Feb 27 '13 at 16:16

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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