dropdown menus - suckerfish - basics?

[mafiasam]

okay so I have tried to search and search for a basic tutorial on how to implement the suckerfish dropdown menus in zencart but I have no idea where to paste the html and css code.

A basic tutorial as to which CSS and PHP files I need to modify would be great.

my site:
http://www.oldwestgames.com

my resources:
I do have a basic understanding of CSS.
Very little knowledge of PHP.
I have Adobe GoLive which is awesome for editing CSS.
my zencart version is 1.3.0.2
I am using the future zen template.
I have the category tabs on.

suckerfish tutorials I have read:
http://www.alistapart.com/articles/dropdowns/
http://www.htmldog.com/articles/suckerfish/dropdowns/

Thanks
Sam

[kobra]

If this is for your header nav, look at tpl_header.php & place the code outside of the php tags.

Add the css to your stylesheet.css file ( you are using just one ??correct), or you could make one stylesheet_menu.css if you prefer

[kobra]

OOPS...are you trying to wrap the cat tabs into this or going to turn them off or both??

[mafiasam]

I suppose whichever is the simplest route to go.

what do you suggest?

[kobra]

Cat tabs are great for auto generating the cats & sub-cats and can be styled via css but are not drop down...
Depending on your product volume & mix, and if static or highly changing I think this would drive my decision, Unless there is a client with wishes...

There was a drop down mod for the previous series that needs upgrading and I was using the son-of-suckerfish and trying to do the php thing but I am too weak in php to get it right. As I see you are weak in php we make a great, php disabled pair...

The suckerfish or son-of-suckerfish works great and is fairly browser compliant...

[mafiasam]

The menus should be fairly static.

So would it be best to turn off the cat tabs and replace them with the previously suggested method?

is there a zen cart site out there that has a working example of the suckerfish implementation?

[mafiasam]

okay so I basically used the son of suckerfish example and placed it on my site by placing the javascript and html code in the #tagline div in the tpl_header.php and adding the css code to my current stylesheet.

I basically viewed the source of the son of suckerfish and just did a little copying and pasting.

Hopefully you can tell me if this looks like it's in the right place and if I'm on the right track.

Sam

[mafiasam]

alright, so I've got the "son of suckerfish" code in there and I have basically got the links working but now I have other problems.

General

1. Making each of the menu dropdowns less wide.
2. Centering the entire code snippet so it stays centered below the header_bg.jpg above it. (without having to center the text inside the menus - keeping the text left aligned in the menus is important)

In IE

1. The code wants to float all over the header when resizing the window. In Firefox I can add a couple paragraph code lines and push it below the header_bg.jpg and it will stay there even if I resize the window.
2. How do I get rid of that "missing picture/red x" that sits above the header_bg.jpg?

Thanks
Sam

[kobra]

I only breifly looked at the site, but in the original code from the site the css defined the width...did you merge this with your css or create an additional css for it? and is the width statement present.

There were also several css settings to mitigate the IE troubles, go back and read what they are and insure that you have them.,

[mafiasam]

Here is what I ended up doing...
I got rid of the header_bg.jpg image and put the code and the header image in a table and placed it in the #tagline div. I had to add some paragraph returns in the tpl_main_page.php to push the center store down far enough to be out of the way of the table I inserted. It actually looks pretty dang good in firefox. However in IE I the paragraph returns pushed the center store too far down and the menu dropdowns ended up getting centered. Is there any way to protect those from inheriting that centering from the block above it in IE?