SitePoint Sponsor |
|
User Tag List
Results 1 to 13 of 13
-
Oct 12, 2004, 22:04 #1
- Join Date
- Jun 2004
- Location
- New Bedford, MA
- Posts
- 70
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Vertical suckerfish and 3column layout help
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
-
Oct 12, 2004, 22:11 #2
- Join Date
- Jun 2004
- Location
- New Bedford, MA
- Posts
- 70
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.Last edited by mike7896; Oct 14, 2004 at 09:01.
-
Oct 13, 2004, 12:38 #3
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
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 problemOr 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
-
Oct 13, 2004, 13:15 #4
- Join Date
- Jun 2004
- Location
- New Bedford, MA
- Posts
- 70
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by Paul O'B
Originally Posted by Paul O'B
I appreciate the encouragement to do it myself, but I could really use some hand-holding here.
-
Oct 13, 2004, 19:07 #5
- Join Date
- Jun 2004
- Location
- New Bedford, MA
- Posts
- 70
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
Oct 14, 2004, 06:55 #6
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi Mike,
There are other examples of drop downs here:
http://www.htmldog.com/articles/suckerfish/dropdowns/
One of these may suitIf 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
Code:<li class="menutitle">Information <ul> <li><a href="content/information/forms/forms.shtml">Forms</a></li>
Code:<li class="menutitle"><a href="#">Information</a> <ul> <li><a href="content/information/forms/forms.shtml">Forms</a></li>
Paul
-
Oct 14, 2004, 08:34 #7
- Join Date
- Jun 2004
- Location
- New Bedford, MA
- Posts
- 70
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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 changeCode:li ul li a { padding: 2px 5px; margin-bottom:5px; width:125px;} /* Sub Menu Styles */
Code:li ul li a { padding: 2px 5px; width:125px;} /* Sub Menu Styles */
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
-
Oct 14, 2004, 08:57 #8
- Join Date
- Jun 2004
- Location
- New Bedford, MA
- Posts
- 70
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Got the red main menu border to work on hover, but now the padding is screwed up on the sub-menus on hover.
-
Oct 14, 2004, 11:22 #9
- Join Date
- Jun 2004
- Location
- New Bedford, MA
- Posts
- 70
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Oct 14, 2004, 12:21 #10
- Join Date
- Jun 2004
- Location
- New Bedford, MA
- Posts
- 70
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.Code:li a { background: #fff; }
-
Oct 14, 2004, 13:35 #11
- Join Date
- Jun 2004
- Location
- New Bedford, MA
- Posts
- 70
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
Oct 14, 2004, 14:42 #12
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
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.
Code: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.
Code:UL { list-style: none; margin-left: 5px; background :url(images/fake.gif); }
It doesn't seem to cause any problems.
Paul
-
Oct 14, 2004, 17:31 #13
- Join Date
- Jun 2004
- Location
- New Bedford, MA
- Posts
- 70
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
Bookmarks