Create new suckerfish type template

Before I start I would like to say I am generally very happy with this product. With that said, I have been trying to use the suckerfish template and stylesheets that are offered as samples, and to be honest I am having many problems, and find them to be very flaky. When I adjust one thing, other seemingly unrelated things break. In another post I have been recorded some problems I have been experiencing, most of these problems were caused by style shet settings further up the chain. I have spent 5 days now trying to get a simple three level menu to work with the fonts and colours I need for this site.

After seking advice in Expert Exchange, I was directed to a site that specialises in menus made 100% from CSS. No javascript, and ready built with little css changes required.  I have attached a sample ul and css from a style I like. I was wondering if anyone has the ability, and time, to help me build a template file to create the ul as required by this style, or at least give me some advice. I have tried, but am getting very confused, yet again.

I really hope someone can help me with this.

Thanks

Mark

Hi Mark,

I'll help you and post back with the template & css you need.  What is the site that you used for this? That sounds like a good idea.

Hi Mark,

I have attached a skin with the example code you produced from CSS Play.

It looks like this was only generated for three levels so the fourth shows up when hovering over the third.

I tried to make the 4th behave correctly, but I couldn't quite get it and I wasn't sure if you really needed it.

Let me know if you need that.

I also combined the CSS for IE into the same CSS file and it appears to work consitently on both browsers.

Hi John,

I installed your templates and css into my site, and I still have problems. It seems to be related to a float:left being applied to the parent div of the menu code.

I did notice that when I checked the source produced by your template, it still sems to use javascript, and looks nothing like the code produced by the CSS only menus.  Is this an indication that your control cannot create an output the same as theirs?

I did try inserting their source into my site, with manually assigned anchors, and it works fine.  So I  have to assume the problemis in your script or processing somewhere.

I guess at this stage, as I really need to get this site published, I will have to hardcode the menus first, then when I get time, play with the templates. Failing that look for another way to create what I need.

Thanks for your help.

Regards

Mark

John,

I have noticed a very confusing behaviour. I have attached one on my skins which shows the effect  very clearly.

If you select a second level menu, you can only select the first item. You can not go down beyond this else the menu disapears. However, if you change the style for the menu, and remove the float:left, it works fine. I don;t understand why floating a menu left would have this effect. 

I need to float:left as I have two divs menu and search that  need to be be on the same line.

Do you have any idea about this?

Thanks

Mark

Hi Mark,

Yes, the menu could produce output the same as theirs if you wanted it to. You would just have to define it the way they do in the template.

The reason I did not do this is because after looking at their code and seeing all the IE conditional comments and tables (gasp!), I thought it would be better to just make the CSS work with the suckerfish style menu.  There is a lot of extra markup in their html code.  So what I sent was a combination of Suckerfish and that CSS.

Also, I tried their IE only CSS in the menu and it would not drop-down on hover.  I still had to adjust the positioning of the menu differently in IE than it was for Mozilla, but maybe that is why they added the tables.

The son of suckerfish type menu is highly adopted and works very well across browsers.

I'll see if I can figure out what the issue is you are having with float:left, but I didn't see anything like that in the skin I attached.

I saw that the font-size seemed to be getting smaller with each level. You may have an easier time using fixed sizes.

#nav li ul a
{   
    font-size: 14px;
    width: 17em;
    w\idth: 14em;
    color:DarkBlue;
    padding-right: 0em; 
}

You could also do that with the Widths:

#nav li ul a
{   
    font-size: 14px;
    width: 150px;
    color:DarkBlue;
    padding-right: 0em; 
}

This will make the menu more predictable across browsers.

After making these adjustments I was able to get to all menu items up to four levels.