Conditional menu mouseout using jQuery Background-Position plugin

Question

Hi,

I currently have a drop-line horizontal menu using an unordered list with the following HTML markup:

<div class="menu">
  <ul>
    <li><a class="tier1" href="#">Top Link 1</a></li>
    <li>
        <a class="tier1" href="#">Top Link 2</a>
        <ul>
            <li><a href="#">Sub Link 1</a></li>
            <li><a href="#">Sub Link 2</a></li>
            <li><a href="#">Sub Link 3</a></li>
        </ul>
    </li>
    <li><a class="tier1" href="#">Top Link 3</a></li>
  </ul>
</div>

The CSS is far too lengthy to paste in here, but it follows the same structure that I've been using for ages here from CSS Menu Maker - the only difference is that for the sub-menu list items, I have them displayed "inline" with their widths set to "auto" and a bit of left and right padding, and every Top Link menu item with a class of "tier1" uses CSS Sprites. The jQuery is where I am having an issue. Ordinarily, this would be the approach to take:

function animateMenu() {
  $('.menu li a.tier1').css({backgroundPosition:'0 -60px'});
  $('.menu li a.tier1').hover(
     function() {
        $(this).stop(true, true).animate({backgroundPosition:'0 0'},{duration:400})
        .next('ul').css({display:'none'}).stop(true, true).delay(200).slideDown(400);
     },
     function() {
        $(this).stop(true, true).animate({backgroundPosition:'0 -60px'},{duration:250})
        .next('ul').stop(true, true).slideUp(400);
     }
  );
}

Whilst this method works, and visually does what I want it to do, the SubMenu obviously slides back up when I mouseout off the Top Link items. My only workaround for this was to break it into two separate functions:

function animateTopMenu() {
    $('.menu li a.tier1').css({backgroundPosition:'0 -60px'});
    $('.menu li a.tier1').hover(
            function() {
                $(this).stop(true, true).animate({backgroundPosition:'0 0'},{duration:400});
            },
            function() {
                $(this).stop(true, true).animate({backgroundPosition:'0 -60px'},{duration:250});
            }
    );
}

function animateSubMenu(){
    $('.menu li').hover(
            function() {
                $(this).find('ul:first').css({display:'none'}).stop(true, true).delay(200).slideDown(400);
            },
            function() {
                $(this).find('ul:first').stop(true, true).slideUp(400);
            }
    );
}

This helps me keep my SubMenu items hover-able when I mouseout off the Top Link, but what I would ideally like to do is retain the hovered background appearance of the Top Links when I hover over the submenu items, and only revert (and animate) to the normal state once the mouse has moved off either the submenu or the top Link itme itself. This is where I am having difficulties. I could add and remove a class with CSS "background-positon: 0 0 !important" but then the animation effect is lost.

I'm sorry for the lengthy question, but just wanted to provide as much as possible to get your help!

Thank you!! -Shalan

Answer 1

problem sorted! :D

I should've figured from the start, but anyway, here is what I had to change:

1. change the CSS such that the top-level List Item gets the background-image, and not its child hyperlink like how I had it.
2. change the target element in the Javascript to match with what I did in the CSS.

It makes perfect sense due to the hierarchy of HTML elements - when you hover over the top-level list item, the nested unordered list is made visible allowing the space (using the term loosely) that the top-level list item occupies to "expand" to include its childrens' dimensions. So when you hover over any items in the child list, the parent list item is still 'active', and the hover function works as it should.

I will come back to this post in a few days time to update with the working code, should anyone need. For now, I just need to finish the remainder of the project!

cheers!