Re: [jQuery] Superfish: width of top level links - great with js off - too wide with js on

Fri, 04 Dec 2009 16:23:34 -0800

autoarrows: true

this appends the link with a span with an arrow image to show links with subs and is adding addiitonal width, set to false

Dasher wrote: 
Hello,

I am setting up my first superfish menu and having an issue with the
width of the top level link tabs.

When _javascript_ is off, the width of the top level links look exactly
how I want them - with flexible width to accomodate the link text and
7px padding either side.

When _javascript_ is on, extra width seems to be added to the top level
links - I am not sure what is causing it. It does get it right for the
active state (which is wierd because there is no width for that in the
css either).

Here is a visual:
http://www.gocreate.com.au/superfish-menu-spacing.jpg

So what I am wanting to do is stop jquery / superfish adding extra
width to the menu so that it looks the same with js on or off.

The only widths mentioned in the css are as follows but changing these
to "auto" does not have any effect on the width of the links:
.sf-menu ul { position: absolute; top: -999em; width: 12em; }
.sf-menu ul li { width: 100%; }

My _javascript_ knowledge is very limited (I am a css'er) - with a bit
of googling and the more user friendly nature of jquery, I found some
tricks that I could try but as yet have been unable to solve it.

My base code is as follows:

        $("ul.sf-menu").supersubs({
            minWidth:    8,
            maxWidth:    13,
            extraWidth:  1
        }).superfish();

        $('ul.sf-menu').superfish({
            delay:       1000,
            animation:   {opacity:'show',height:'show'},
            speed:       100,
            autoArrows:  true,
            dropShadows: true
			});

	 	  $('ul.sf-menu > li > a span').remove(); 				// remove arrows from
top level links

The same thing happens with or without using the supersubs plugin.

Adding this does reduce the width of each link but it makes all top
level links the same width - so that's not suitable:
$(".sf-menu li").css("width","100px");

Adding any of these variations do not seem to do anything (the idea
being to reduce any width setting that jquery may 'secretly' be
adding):
$('ul.sf-menu li').css('width', '');
or
$("ul.sf-menu li").css("width","");
or
$('ul.sf-menu li')[0].style.width = '';
or
$('ul.sf-menu li').style.removeAttribute("width", false);

Then I thought maybe I could add a class to the top level links with
jquery and set width:auto in the css for the class but that does not
seem to solve it either:
$("ul.sf-menu li").addClass("jq-wfix");

So now I am scratching my head...

Any ideas?

Thanks in advance.

Reply via email to