superfish customisation
Permalink
I was wondering if anybody has installed the superfish block and customised it outwith the editor that only allows colour changes?
I need to create a horizontal menu that drops down the options below. However, at the moment when the options dropdown, they push the top level options out to the right, making a mess of everything and pushing some top options on to a line below.
I'm looking for an example of a menu that drops down the suboptions without affecting the top. Can you tell me what code to change and in what files I should change it?
Thanks.
I need to create a horizontal menu that drops down the options below. However, at the moment when the options dropdown, they push the top level options out to the right, making a mess of everything and pushing some top options on to a line below.
I'm looking for an example of a menu that drops down the suboptions without affecting the top. Can you tell me what code to change and in what files I should change it?
Thanks.
can you post a link to a page that's having the issues? it's a little hard to know exactly what's occurring from the description.
Hi. You can see athttp://67.225.176.153/~stphil/secure_unit/home/...
It's not great in FF or IE, but it is worse in IE as the sub menu goes horizontally rather than vertically.
Thanks.
It's not great in FF or IE, but it is worse in IE as the sub menu goes horizontally rather than vertically.
Thanks.
sorry that this took a few days to get to this. it's been a busy week.
so here's what seems to be happening. in the default superfish block, the .sf-menu li { } element has a width explicitly set. Your example doesn't have this width, so the width seems to be set automatically based on the size of the link text. But the sub-menu is set to have a width of 100%, with this:
.sf-menu ul { width:100%; }
you probably need to explicity set the width of the main menu li tags, and/or set the sub menu ul tag to not have a width of 100% (because in IE it thinks that is the entire width of the page). Hope that helps.
so here's what seems to be happening. in the default superfish block, the .sf-menu li { } element has a width explicitly set. Your example doesn't have this width, so the width seems to be set automatically based on the size of the link text. But the sub-menu is set to have a width of 100%, with this:
.sf-menu ul { width:100%; }
you probably need to explicity set the width of the main menu li tags, and/or set the sub menu ul tag to not have a width of 100% (because in IE it thinks that is the entire width of the page). Hope that helps.
Hi. Thanks for your reply.
Yes, my example just sets the width depending on the amount of text. This is because there is not enough horizontal space to set a width that is wide enough to allow the longest word.
I have now set the width of the submenu items to be 150px rather than {width:100%} and this stops the top level getting wider.
However, I've had to also set a width for the top level, meaning I've had to reduce the size of the text so that all items fit. This is not ideal, but will be ok for now. As soon as I remove the explicit width, it reverts back to changing the width of the top item when I roll over the bottom one.
Hope that makes sense.
Yes, my example just sets the width depending on the amount of text. This is because there is not enough horizontal space to set a width that is wide enough to allow the longest word.
I have now set the width of the submenu items to be 150px rather than {width:100%} and this stops the top level getting wider.
However, I've had to also set a width for the top level, meaning I've had to reduce the size of the text so that all items fit. This is not ideal, but will be ok for now. As soon as I remove the explicit width, it reverts back to changing the width of the top item when I roll over the bottom one.
Hope that makes sense.
I wonder if you could give all of the top level link <li> elements unique ids, so that you can assign fixed widths for each of them depending on how wide you need each of them.
Hi Tony
I am understanding all you have said so far with the customization.
With that said, wouldn't it be ideal to clean the superfish.css file to have actual width's set for the horizontal. I know this will prob cause some issues with some folks...but when you have a fixed width header that it is going into, things can go a little hay wire.
I am tinkering with it now and if I get it working with five browsers and it looks the same, I will send it to you to see if you like it.
I am understanding all you have said so far with the customization.
With that said, wouldn't it be ideal to clean the superfish.css file to have actual width's set for the horizontal. I know this will prob cause some issues with some folks...but when you have a fixed width header that it is going into, things can go a little hay wire.
I am tinkering with it now and if I get it working with five browsers and it looks the same, I will send it to you to see if you like it.
by default, the width is set on the top level <li> tags. i think flora removed it on her site to get them to collapse to the size of the text, and that's where the problems came from. Maybe the child <ul> link lists should be set to that same width, instead of 100%? (or is that what you were referring to?)
so how exactly do i get the top menu to fit the size of the text width wise?
iv beent trying but i cant find it anywhere in the superfish css... and i dont quite know how to change the <li>???
anyone help
oh and i want to get rid of background colour altogether on the top level menu?
http://white-design.org/SUBSITES/whitedesign/...
iv beent trying but i cant find it anywhere in the superfish css... and i dont quite know how to change the <li>???
anyone help
oh and i want to get rid of background colour altogether on the top level menu?
http://white-design.org/SUBSITES/whitedesign/...
You should go into the superfish view.php file. Where the styles say "width:<?php echo $cellWidth?>px" you should remove that and just put in some padding at the left and right (if menu is going horizontally).
This should mean that any width in the superfish control panel is no longer used to set a width for each item.
This should mean that any width in the superfish control panel is no longer used to set a width for each item.
but saying that, i never got it working properly with the drop down options. so I actually reverted back to a fixed width and the final thing doesn't look too great. :(
were in the middle of adding this option to the superfish block so if you can hang out a tad this will be easier
could you also see if you could add a no color option to the top menu.
thanks
thanks
The upcoming release of c5 has a couple of improvements to the colorpicker, including the ability to have no color. I'm not 100% this will work, but try copying the files in the attached zip to /concrete/js/ and /concrete/css/. Remember to backup your old files first and to refresh your browser's cache.
Superfish 1.1 is now released:
http://www.concrete5.org/marketplace/addons/superfish/...
btw, you'll need the new version of superfish to get those new color picker files that I just posted to work.
http://www.concrete5.org/marketplace/addons/superfish/...
btw, you'll need the new version of superfish to get those new color picker files that I just posted to work.
