Question

I'm using superfish (http://users.tpg.com.au/j_birch/plugins/superfish/#aa) with jquery to do menu control. Nearly all the elements are set up in

  • elements nested in . I have one menu item I want to hide every time the superfish menu closes (I show it elsewhere with .show() ). So, my superfish initialization looks like this:

    $(document).ready(function () {
        $("#menu").superfish({
              delay: 400,
              onHide: function () { $("#HideThis").hide(); }
         });
     });
    

    However, it instead hides HideThis on hover over of HideThis (no hover event is bound to that element). This makes the menu item unusuable, since it hides when you try to click it instead of when the menu closes. There doesn't appear to be any other events that could fit my purposes, any ideas how to make this work through superfish?

    The HTML i'm using looks like this:

    <ul id="menu">
      <li id="Stuff"><span>Stuff</span>
         <ul>
            <li id="HideThis" ><span>Hide This</span>
               <ul>
                  <li><span>Hidden Stuff</span></li>
               </ul>
            </li>
            <li id="DontHideThis" ><span>Dont Hide This</span></li>
         </ul>
      </li>
    </ul>
    

    Edit: I was able to find out the problem: the 'onHide' event triggers every time a submenu hides, not just when the whole menu hides (Fun fact, it also triggers when the menu first shows; so onHide occurs a lot more often than you would expect). So, I ended up having to filter onHide like so:

    $(document).ready(function () {
       $("#menu").superfish({
          delay: 400,
          onHide: function () { if ($('ul.sf-menu li.sfHover').length == 0) $("#HideThis").hide(); }
       });
    });
    

    And the 'if' statement is only true when all menus are collapsed.

  • Was it helpful?

    Solution

    You'd be better off creating a jsFiddle for this sort of thing. I made you one here and added some cursory styling in addition to a class .sf-menu to hang said styling from. From what I can see, your code seems to work how you want. If this doesn't help, feel free to describe what I am missing.

    Licensed under: CC-BY-SA with attribution
    Not affiliated with StackOverflow
    scroll top