superfish width = 100%?
Permalink Browser Info Environment
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
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
Type: | Discussion |
---|---|
Status: | Archived |
Please?
It's an add-on developped by concret5 team for concrete5... so i thought the fix would be easy :S
thanks again
Ludovic
It's an add-on developped by concret5 team for concrete5... so i thought the fix would be easy :S
thanks again
Ludovic
Same problem here, is there a solution somewhere? It is driving us crazy..
Here's some css code that may get you going in the right direction:
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
<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
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
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
This is exactly what I want to do. Please provide the code if it has been resolved.
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.
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.
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.
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.
Attention: Since there has been no activity on this issue for two weeks, this issue has been automatically archived.
To re-open this issue, reply to this message.
To re-open this issue, reply to this message.
Is anyone out there that can help?
Thanks,
Earthdirt