SIFR'ing <LI> parents only

Question

I'm using SIFR 3.0 in combination with suckerfish popup menus. I only want to SIFR the top level li's and not apply the effect to the nested ones. I'm also using WordPress, so restructuring the menu, like wrapping the parent in a <div> or other object is too hard (I'm still figuring out the basics of WordPress).

Is there a way to turn SIFR ON for ul#menu li but OFF for ul#menu li li ?

Other things I've tried that haven't worked is applying a class or id to the parent <li class="top-level"> or <li id="top-level">--that didn't stop the SIFR, it still grabbed the children.

Thanks so much for the help.

Answer 1

This can be done with the CSS child selector:

ul#menu > li

this will only select li elements that are direct children of ul#menu. This should work in all standards complient browsers, and IE7+.

For IE6 there are a few hacks you can do to fake it, although I prefer to use jQuery to make up for selectors it doesn't support:

$('ul#menu > li').css({ ... });

which you can place in conditional comments.

Answer 2

If you download the uncompressed sifr source, and also have jQuery or are good with javascript you can probably put a conditional in at around line 491 of the sifr code along the lines of

if ($(node).parent().parent().parent().attr('id', 'menu')) {continue;}

I'm not great at jQuery, and I'm also not sure what kind of object the nodes that sifr runs through are, but in theory something like the above should make waht you want possible.

Answer 3

I'm going to assume your HTML structure is like this:

<ul id="menu">
  <li>
    <a href="/">My link</a>
    <ul>
      <li>My submenu item</li>
    </ul>
  </li>
</ul>

When you replace ul#menu li, you will replace the entire content of the <li> element. Unfortunately this also includes the submenu. The solution is to replace just the link, but note that you can't directly replace <a> elements.

Therefore:

<ul id="menu">
  <li>
    <span><a href="/">My link</a></span>
    <ul>
      <li>My submenu item</li>
    </ul>
  </li>
</ul>

And replace ul#menu > li span.

Finally there is the question whether the Suckerfish menus actually work if the events have to come through sIFR. I suspect it won't, meaning you're probably better off not using sIFR here.