superfish width = 100%?

Permalink 1 user found helpful
Hi

Bought superfish for a client's website (purple-channel/lapsys/). I tried to setup widths to respect the design we agreed on:
1- 100% width for the menu
2- the submenu's width the same as their parent's

I tried few things but didnt work. a collegue tried but didnt succeed neither. Hence my questions.

Thanks for your help

Ludovic
View Replies:
earthdirt replied on at Permalink Reply
I have the same question. I am trying to make the menu 100% but cannot figure it out.
Is anyone out there that can help?
Thanks,
Earthdirt
epurple replied on at Permalink Reply
Please?
It's an add-on developped by concret5 team for concrete5... so i thought the fix would be easy :S
thanks again

Ludovic
dignenenzo replied on at Permalink Reply
Same problem here, is there a solution somewhere? It is driving us crazy..
ryan replied on at Permalink Reply 1 Attachment
ryan
Here's some css code that may get you going in the right direction:

<style>
ul.sf-menu { width: 100%; background-color:#79C6D4;  }
ul.sf-menu li { width: 19%; margin-top: -1px; }
</style>
<? ?>


See the attached screenshot..

I set the background color of the ul element to be the same as the menu items, then because the menu items have a 1px border on the top, I offset them by 1px.

It's not perfect, and would only work if you know that the #of top level menu items would be the same - in my case 5
kannetkeifer replied on at Permalink Reply
hi

if i'm not wrong you guys want is sub menus of main menu should adjust width based on main menu item if that is so this will be the right solution

take a look in supersubs.js in superfish
line number 59 to 67 will originally like this

// restrict to at least minWidth and at most maxWidth
if (emWidth > o.maxWidth) { emWidth = o.maxWidth; }
else if (emWidth < o.minWidth) { emWidth = o.minWidth; }
emWidth += 'em';
// set ul to width in ems
$ul.css('width',emWidth);
// restore li floats to avoid IE bugs
// set li width to full width of this ul
// revert white-space to normal

so replace that lines with this lines i put additional source code to do that functionality

// restrict to at least minWidth and at most maxWidth
if (emWidth > o.maxWidth) { emWidth = o.maxWidth; }
else if (emWidth < o.minWidth) { emWidth = o.minWidth; }
emWidth += 'em';
// set ul to width in ems
$ul.css('width',emWidth);
//make the child menu item widths limit by parent
//created by Kyaw Thiha
//----------------------
var kth = $ul.parent().width();
kth += 'px';
$ul.css('width',kth);
//----------------------
// restore li floats to avoid IE bugs
// set li width to full width of this ul
// revert white-space to normal

hope you guys may useful
aleamio replied on at Permalink Reply
This is exactly what I want to do. Please provide the code if it has been resolved.
MattWaters replied on at Permalink Reply
MattWaters
Hi aleamio,

If you want to adjust the width of your menu, you will need to customize the block CSS. The code Ryan posted above is a good start, and I may be able to provide some further direction on how I'd approach customizing it for your site. The best way would be to create a new post in the Questions and Discussion section, and describe how you'd like your menu to appear:

http://www.concrete5.org/marketplace/addons/superfish/questions-and...

Be sure to provide a link to your site, or perhaps a screen shot if your site is not public at the moment.
aleamio replied on at Permalink Reply
I have already posted a separate ask for help.

Ryan's code works with a fixed number of Menu item, in my case it will change from 2-5. I am trying the second code posted here.