Superfish Plugin - transparency

[Adriantr]

In addition to my other question about Superfish I am also interested
to know whether there is a way of making the submenus semi-
transparent? If so how would I implement this in menu system where the
background image of the "a" tag determines the colour of the
background of the menu.

Once again, thanks for any help.

[Joel Birch]

Hi Adrian,

Hmm, this isn't pretty, but sort of does the job (see below). I set
the animation to fade to opacity .92 which is only a subtle amount of
transparency because deeper nested submenus will inherit this and
apply their own further .92 amount, which could get hard to read. The
onBeforeShow callback was needed to set initial values so that the
fade-in worked. Like I said - it ain't perdy:

$(document).ready(function(){
        $("ul.nav")
        .superfish({
                animation : { opacity:.92},
                onBeforeShow : function() {
                        $(this).css({
                                opacity :'.01',
                                display : 'block'
                        });
                }
        });
});

[Schmitt]

Hi Joel,

with your original opacity values it didn't work, I had to switch them around.

It looks lovely in Firefox but in IE even the first submenu is already completely transparent. I'm still poking it, so maybe will figure something out.

Cynthia

Joel Birch wrote:

Hi Adrian,

Hmm, this isn't pretty, but sort of does the job (see below). I set
the animation to fade to opacity .92 which is only a subtle amount of
transparency because deeper nested submenus will inherit this and
apply their own further .92 amount, which could get hard to read. The
onBeforeShow callback was needed to set initial values so that the
fade-in worked. Like I said - it ain't perdy:

$(document).ready(function(){
        $("ul.nav")
        .superfish({
                animation : { opacity:.92},
                onBeforeShow : function() {
                        $(this).css({
                                opacity :'.01',
                                display : 'block'
                        });
                }
        });
});

[Joel Birch]

On 26/03/2008, Schmitt <cm@...> wrote:
>  with your original opacity values it didn't work, I had to switch them
>  around.

Hmm, my code worked for me when I tested it. Must be some unknown
difference in the rest of the code I guess.

All this JS hackery aside, I think the easiest and most attractive way
to do this would actually to use a semi-transparent png CSS image for
the background instead of a background-color. That way the type is
full strength and nested submenus do not get more transparent than
they should. Two problems with this however, would be: 1: you'd have
to degrade it for IE6 and and avoid fade-in animations with IE7 (as
its support for png is hacky in that it doesn't combine with
additional filters), and 2: you may want to consider how it would look
with images disabled.

Joel Birch.

[Iulian Anghel]

Hello,
Very useful plug in btw.
My JS knowledge is about zero, so I tried to create some transparency
by adding to the CSS the following

.nav li li {
        opacity: 0.9;
        -moz-opacity: 0.9;
        filter: alpha(opacity=90);
}

This works entirely in FF but only the second level works in IE. Third
level is missing.
You can see it at http://www.digitalcontrast.ro/upet/2/ , third
vertical button (Produse), last horizontal (Galerie foto)

Any help would be appreciated, thanks!

[Joel Birch]

Hi Iulian,

IE can only apply one "filter" to an element at any one time and the
code that jQuery uses to fade-in something uses up that one
opportunity. Therefore, when you apply filter:(opacity=90); in the CSS
problems occur when JS wants to also apply filter to that element.
That is my understanding of these IE issues anyway. My advice is to
simply remove that line of CSS so IE degrades gracefully until it can
handle opacity in less hack-ridden way.

Joel Birch.

[Iulian Anghel]

Thanks for this explanation you've been too kind. It must be the
double applied filter. Now is there a way to get rid of the fade
effect in favor of the overall semi-transparency? I know the fades are
the spice of Superfish but I'm kind of forced to try that too. Can you
help me pretty please? :)
Thank you again Joel

[Joel Birch]

Hi Iuilian,

I just had another go at achieving semi-transparency for all submenus,
but alas IE seems to have outwitted me on this one. It simply refuses
to apply any sort of transparency to elements whose parents already
have a transparency filter applied to them. I tried everything I could
think of. I wonder if there are any examples at all... ever... of a
multi tiered menu with transparency that works in IE6 (I think IE7
would be the same too). If there was then we could see how it was
done... I don't hold out much hope after my experiments - but I'd be
delighted to be proven wrong!

It seems like your IE users will have to miss out on the
semi-transparency. I'm miffed that we couldn't show IE who's boss on
this one - sorry.

Joel Birch.