Hey All,
Yesterday I spent some time implementing Superfish (at that time v1.3)
with jQuery 1.2 - it's not a straightforward menu implementation, I'm
more tailoring it for a pseudo selection box. Curiously I didn't run
into the selector issue (other than animations weren't working) and
had it working pretty much exactly as intended. One of the little
"hacks" I had to put into place was to accommodate the fact that I put
padding and a border around the LI of my top level nav items. These
items also have a background image aligned to the right and nested in
a little (rough approximation below).
_________________
| |^| |
| Drop Down |
|_________________|
I'm giving this detail in order to explain later on why I couldn't
quite simulate the CSS in the example on the Superfish plugin page.
The issue I run into with the CSS for this implementation is that the
drop down navigation is shifted to the right a little. The drop down
UL itself has a matching border and padding, but it aligns itself with
the left edge of the text (the "D" in the above example). I monkeyed
with the CSS a bit to see if I couldn't set the border/padding on
different elements, but when combined with the background image for
the parent element it would never exactly align. So, I added a little
jQuery trickery to shift the left position of the UL as it's
displayed:
$('.sfMenuDropDown')
.superfish()
.mouseover(function() {
$('ul', this).css({left:
$(this).offset().left}).bgiframe();
})
.mouseout(function() {
$('ul', this).css({left: strOrigLeft}).;
});
--(strOrigLeft above is set to $('.sfMenuDropDown li.current
ul').css('left') when the page first loads)--
This worked great when I was on Superfish 1.3 and jQuery 1.2.1 (again,
custom animations didn't work though). However, once I updated
Superfish to 1.3.1 I can see that the shift to the left occurs, but
then after Superfish animates (which now works because of the selector
correction) it shifts over to the right in line with the "D" again.
Upon investigation I discovered the culprit is line 63 in 1.3.1 where
there is $(this).removeAttr('style'); which is removing my style
declaration of shifting the UL over just a bit. If I comment this line
out, my code runs flawlessly (with the addition of the .hide() in the
mouseout function).
So, I'm wondering why this removal of the style attribute is in there.
Watching with Firebug I can see what it's doing and such, but I'm not
sure what the purpose is. When the line is commented out, with a
default setup of Superfish, I only see style="display:block" - and
with my left position hack it adds a left specification. I'm sure
there is/was a reason for it's being in there - I just can't seem to
see it (after playing with various settings). Can someone (Joel maybe)
explain it to me and the possible risk of removing it (obviously I'd
prefer not to have to change the plugin and remember each time I might
need to update it).
For now I may need to simply comment it out in my implementation,
however what would solve my particular dilemma would be if Superfish
allowed for adding custom functions that get executed once the
animation is complete so they would fire just after the removeAttr is
performed (ideally it would be nice to have hooks to put functions at
the end of showSuperfishUI and hideSuperfishUI). Is this sort of
functionality something that might be worked into Superfish in the
future?
Thanks for the great work.
Jacob Stuart
