Vertical suckerfish and 3column layout help

[mike7896]

I am attempting to use a vertical "suckerfish" based menu with a 3column layout. I had the 3column layout working well and it validated as xhtml 1.0 transitional, which I am happy with. The only thing that didn't validate was my menu code.

I did some searching on the forums and came accross this post. This is the first time I've heard of the "suckerfish" menu. I messed around with it and got it to work vertical, but my center column content overlaps the menu's second level flyout. I hope someone can help.

The page can be viewed here: http://www.troop46.net/index2.htm.

My style and positioning CSS is a bit messy, I plan to clean it up later. I apologize. I stripped out most of the page's content to hopefully make it easier to decipher. I am a neophyte so please bear with me.

Thanks!

-Mike

[mike7896]

Nevermind... That link works the way it should. Hmmm... *scratching head* I swear it wasn't working a minute ago.

Anyway, now I would like some help styling the menu the way I want. When I hover over the main menu I would like the same effect as when you hover over the flyout, but I only want borders on the main menu when you hover. The flyout looks exactly the way I want it for now. I just would like to match the main menu to it.

Hope someone can help.

-Mike

I went back to edit this post. If anyone wants to know what fixed the the problem it was setting z-index:10; for #LEFTCOLUMN in 3column.css.

[Paul O'B]

Hi Mike,

I'm don't see why you can't do this yourself if you've styled the flyout then the main menu should be no problem Or am I missing something here.

Just make the main list items into anchors (as they should be anyway for users with js disabled ) and then style the anchors accordingly. If you want borders to show on hover then make sure that you allow space for the border on hover so that the menu doesn't jump up and down by 2px. You can just set a 1px padding as default and then on hover take the padding off and the border. That way the element remains the same height at all times.

Paul

[mike7896]

I'm don't see why you can't do this yourself if you've styled the flyout then the main menu should be no problem Or am I missing something here.

That's just the thing, I didn't do it myself. I took what deronsizemore had going in the post I linked to, and modified it by trial and error. Reverse engineering stuff and getting it to work the way I want is sort of a talent of mine, but it makes me look smarter than I really am. I don't quite understand what everything in his style sheet is doing. I messed around with this thing for several hours last night and I got the main menu to change colors on hover like the flyout, but I couldn't get the hover color to span the whole width. It would only span the width of the text.

Just make the main list items into anchors (as they should be anyway for users with js disabled ) and then style the anchors accordingly.

I have no idea what you mean by making them into anchors. However, getting it to work with users who have js disabled was another concern of mine.

I appreciate the encouragement to do it myself, but I could really use some hand-holding here.

[mike7896]

Well, I just found out the menu looks totally messed up in Firefox and Safari. So, I gotta find a new one unless someone can tell me how to make this one work. But, I think it's back to the drawing board. Can anyone recommend a cross-browser, standards compliant vertical menu that works similar to this?

-Mike

[Paul O'B]

Hi Mike,

There are other examples of drop downs here:

http://www.htmldog.com/articles/suckerfish/dropdowns/

One of these may suit If you can't find anything then shout and I'll see if I can fix yours for you. I've been rushing around today and haven't had the time to spend on it although its probably just a few little things you've changed as the suckerfish menus should work on firefox without much problem.

Regarding the question:

I have no idea what you mean by making them into anchors

I mean changing this:

	 <li class="menutitle">Information
	 <ul>
		<li><a href="content/information/forms/forms.shtml">Forms</a></li>

Into this:

	 <li class="menutitle"><a href="#">Information</a>
	 <ul>
		<li><a href="content/information/forms/forms.shtml">Forms</a></li>

Now you can style the item on hover because its now an anchor and also anyone with js disabled will now be able to click the link and go to the appropriate page. In your example there would be nothing to click as it wasn't an anchor just a link item.

Paul

[mike7896]

Thanks for getting back to me.

Last night a friend mine pointed me over to an artcle at alistapart:
http://www.alistapart.com/articles/horizdropdowns/

I was able to get it to look and act EXACTLY the way I want, with 2 exceptions:

I would like a 1px red border around the main menu but only on hover.

The Photo Gallery submenu won't let you mouse-over all of the items, you only get so far down and the whole submenu disappears. This happens in IE 6 which is what I am using, I don't know if it happens in other browsers. This issue goes away if I change

li ul li a { padding: 2px 5px; margin-bottom:5px; width:125px;} /* Sub Menu Styles */

to

li ul li a { padding: 2px 5px; width:125px;} /* Sub Menu Styles */

But I like they way it looks with the space between the items.

As of last night, it rendered OK in Safari and Firefox, but this morning I made some changes, so hopefully it still does. The Photo Gallery issue is one of the things I changed this morning which is why I don't know if it is only an IE 6 issue.

I think tonight I may try the menu in the article you posted, since they say it will work in Opera and Safari without hacks and supports multiple levels. I think I would want the multiple level option for the future as my site grows.

If you think I could easily apply the fixes for the above issues to the menu in the article you mentioned, then by all means get back to me. I don't want to waste your time, though. So, if you would prefer to wait until I've modifed the "Son of Suckerfish" menu before you look into those issues, I understand.

Thanks a bunch!

You can see what I have so far at:
http://www.troop46.net/menu.htm

[mike7896]

Got the red main menu border to work on hover, but now the padding is screwed up on the sub-menus on hover.

[mike7896]

Ok, I had some time to look at that "Son of Suckerfish" link, and played around with it a little, but it seems to be a lot different from the "A List Apart" menu. I have already spent a lot of time on this, and I think I'm just going to stick with what I have. The old, "If it ain't broke, don't fix it". I already know the "A List Apart" menu is working well, so I'm going to stick with it as long as I can clean up those minor issues.

[mike7896]

Was able to resolve thos padding issues , now I just need a fix for the submenu disappearing. I know it has something to do with a bug that was mentioned in A List Apart's article:

Mystery IE6 Bug:
During the development of this article, I uncovered a strange bug that I believe is only apparent in IE6. A background must be declared on the li a, else when a sub-menu stretches further (vertically) than the main menu itself, the links start to disappear before you have time to click them. Strange! Try it to see for yourself.

I tried fixing it the way they said, but it didn't work so I must have been doing something wrong. This is what I had:

li a {
background: #fff;
}

The only way I could fix it was by adding some main menu items that don't go anywhere to increase the lenght of the list, but obviously that would just look silly.

[mike7896]

Well, Paul, looks like I was able to fix those problems on my own after all. I solved the disappearing sub-menu problem by wrapping the whole list in a <div> with a height greater than the longest sub-menu. I haven't tested it on browsers other than IE yet.

Now I have a new problem. Because I set a margin-bottom:5px on the sub-menu items, whenever you run your mouse down the list and there is an <a href on the content page behind a submenu flyout, it steals the focus of the mouse and the sub-menu disappears. If I have to sacrifice the margin-bottom, then sobeit, but I really like how it looks that way. Is there anyway to fix this?

Go to http://www.troop46.net/index3.htm to see what I am talking about.

-Mike

[Paul O'B]

Hi,

It seems that firefox doesn't mind the gap but ie does. The only solution I can think of is to give the ul a background colour so that the focus is kept on the list.

UL {
list-style: none;
margin-left: 5px;background:#fff;
}

Edit:


I've just found out that if you specify a a background image then the focus remains on the list. The image doesn't even have to exist.

UL {
list-style: none;
margin-left: 5px;
background :url(images/fake.gif);
}

It doesn't seem to cause any problems.

Paul

[mike7896]

AH! Nice! You ROCK, Paul!

So that's what they meant about the IE bug and how to fix it. I don't need to specify a height in that div anymore now.

Thanks a bunch! I'm gonna have my Mac guy look at it now to make sure it renders OK for him, but I think we're done here.