Son of Suckerfish Dropdowns

Comment 1

So what does "chucking a wobbly" mean?

So said will on Tuesday 18 May, 2004 at 10:17PM GMT.

Comment 2

So what does "chucking a wobbly" mean?" Having a tantrem.

What was the problem with Opera btw? Are these problems fixed in the latest release? I noticed that Opera doesn't render the popups as smoothly as Firefox.

So said Hemebond on Tuesday 18 May, 2004 at 10:55PM GMT.

Comment 3

If only it worked on mac 9.2 with IE ... Brilliant piece of work.

So said on Tuesday 18 May, 2004 at 10:58PM GMT.

Comment 4

I love it! Beautiful.
It didn't work in Konqueror on Linux KDE but that was the only browser my windows and linux machines which did not work.

So said Peter on Tuesday 18 May, 2004 at 11:15PM GMT.

Comment 5

I almost thought "How dare you make it not work with Opera"!!

Seriously though, Opera has won me over. Now if would maybe overtake IE in DOM support that would be sweet.

So said Dante on Wednesday 19 May, 2004 at 2:41AM GMT.

Comment 6

Oh, it causes horizontal scrollbars in Opera 7.23.

I'm working on a "reasons why I love Opera list" (maybe even a "Why Opera makes Mozilla look like it's a sux0r" list).

So said Dante on Wednesday 19 May, 2004 at 2:45AM GMT.

Comment 7

In the javascript you write to use

replace(new RegExp(" sfhover\b"), "")

when it should be

replace(new RegExp(" sfhover\\b"), "")

I'm gueesing its a typo since your demo works fine. Took me ages to work out why the menus didn't disappear in IE on the pc.

Otherwise its all very cool

So said Ben on Wednesday 19 May, 2004 at 8:19PM GMT.

Comment 8

Safari 1 no likey.

So said k on Wednesday 19 May, 2004 at 11:30PM GMT.

Comment 9

Yes, sorry Ben, don't know how that slash got lost there. It was in the original code.

k, what happens on Safari one? We've only got minimal access to Macs.

So said Dan Webb on Thursday 20 May, 2004 at 9:35AM GMT.

Comment 10

I only wish the parent menu items could be closer together. No matter what I try, it seems I have to specify a width. The menu I want to use it on is too big to specify a width. I'd rather leave out a width and add padding.

Other than that, it looks great.

So said Kim Siever on Thursday 20 May, 2004 at 3:58PM GMT.

Comment 11

Yup - no workie in Safari 1.0.2 -- particularly the "prettied-up" version.

So said Jason Ely on Thursday 20 May, 2004 at 9:24PM GMT.

Comment 12

Looks like PPK really hates this:

http://www.digital-web.com/articles/separating_behavior_and_presentation/

Once again PPK writes an excellent article that are my thoughts exactly.

So said Dante on Friday 21 May, 2004 at 12:13AM GMT.

Comment 13

Safari 1 seems to cope fine with the horizontal menus, but not your vertical one, where the submenus appear at the top of the window. (I'm using OmniWeb 5 beta as a way of testing Safari 1.0, since it uses that earlier web engine.) A fix to this would be brilliant. (Along with one for IE 5 Mac?)

So said Hugh Todd on Friday 21 May, 2004 at 7:50AM GMT.

Comment 14

Some brief tests of
http://www.htmldog.com/articles/suckerfish/dropdowns/example/vertical.html

Win IE 4 - only the 1st level menu items display and theyre very widely spaced

Win IE 5.01 - on mouseover the menu jumps all over the place

Win IE 5.5 - Works fine

Win IE 6 - works fine

Still a laudable piece of work but the individual decision to not have a working menu for IE 4/5 and design for the future must be made.

So said Neerav on Friday 21 May, 2004 at 8:04AM GMT.

Comment 15

Thanks very much for the comments so far.

Neerav - I can't replicate the problem in IE5.0 - it works fine for me. I'm not sure about IE4, but I'm not sure it needs to be a serious practical consideration any more (besides, regarding the wideness, this can obviously be controlled with CSS and if the only the top-level list displays then at least there should be a viable navigation option).

From what I understand, this works in Safari 1.2, but clearly not in Safari 1.0. I can't figure out why the problem of menus appearing at the top of the window should occur, but I'll attempt to look in to it (how would someonw without a Mac, let alone Safari 1.0 go about doing that...? If someone can figure out this problem, let me know).

As for IE Mac, does anyone use that? Exactly what's the problem? (If you come across browser compatibility niggles, please be as detailed in your explanation as possible so that we can try to work it out).

As for the PPK article that Dante points out - it's interesting. I haven't read it before. I could take up a lot of the criticisms laid out there, but the bottom line is that Suckerfish Dropdowns are CSS driven with a pinch of JavaScript to simply mimic the :hover pseudo-class. It's a good practical option. The best as far as I'm (and others are) concerned.

So said Patrick on Friday 21 May, 2004 at 8:46AM GMT.

Comment 16

Neerav, yes, I can replicate the IE 5.01 error and it is fixable with a little bit of box model hackage and minor CSS changes but really I'd like to make the point that the really meat of the article is the actual technique rather than our specific CSS implementations. In practice people are going to have to write their own CSS implementations on a per project basis. We are only giving you a clue as to how you might go about writing the CSS really. We did however spend a fair amount of time getting the main horizontal menu CSS to work because we though it would be valuable. The vertical menu really was just a quick example though.

On PPK's article, he has got some interesting points (about IE no-script accessiblity) but really, I wouldn't call it complicated at all essentially it's just a tiny little patch to help IE until it can support :hover properly. No, it isn't seperating behaviour from presentation in the way PPK is decided is a good idea but practically Im not sure that this really matters. Yes, he could write a menu that worked with JavaScript and had some kind of backup for no script browsers but fact is that it would end up more compilcated and much bigger in file size.

What Suckerfish is is a valid, extremely compact and practical method of implementing something that has traditionally been a pain to implement and while it would be nice to seperate out everything very neatly in practice Suckerfish is a nice little solution.

So said Dan Webb on Friday 21 May, 2004 at 10:48AM GMT.

Comment 17

To address the IE 5 Mac problem - if you want to make it work in IE 5 Mac you need to switch over from using window.attachEvent() to using the old window.onload method so you would change:

if (window.attachEvent) window.attachEvent("onload", sfHover);

to:

if (document.all&&document.getElementById) window.onload=sfHover;

That should get it going again...there are a few obvious disadvantages to this though so I'd advise against it unless you REALLY care about IE 5 Mac.

So said Dan Webb on Friday 21 May, 2004 at 11:59AM GMT.

Comment 18

The next challenge? Slippery Suckerpup Sliding Menus.

http://www.youngpup.net/2001/ypslideoutmenus/examples

And after that? Speedy Suckerpup Sliding Pre-load-less Rollover!

http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/

That work in IE 3. Ha!!

So said David on Friday 21 May, 2004 at 12:44PM GMT.

Comment 19

Mac IE 5.2.2 OS 10.3 doesn't work

They are just text, the hand shows up but *nothing* happens.

So said Suzanne Wright on Sunday 23 May, 2004 at 6:40PM GMT.

Comment 20

Suzanne - please see Comment 17.

So said Patrick on Sunday 23 May, 2004 at 7:07PM GMT.

Comment 21

For Safari, you could try wrapping the first levels in a relatively positioned div. I had a problem with a similar setup which uses dynamically generated unordered lists up to five (! don't ask) levels deep and solved it by doing that. And, if I remember, I had to set the style in the tag, not the stylesheet for some reason. Now just have to get rid of the white space for IE. Anyone have a script for that?

NIce solution.

So said Tim on Monday 24 May, 2004 at 8:11PM GMT.

Comment 22

Why do you use w\idth:
Is this a shorthand message to yourself that you are trying out some different sizes or is this a browser hack?
I was getting ready to remove some of them but I thought I'd ask first.
I am putting together an intranet site as a test bed for launching a new all-css site for my new job. I was looking at the brainjar dropdowns but this is a much cleaner approach. Thanks for the work you've done.

So said Ted on Monday 24 May, 2004 at 8:32PM GMT.

Comment 23

Ted - Usually w\idth is used as a Simplified Box model Hack for IEWin 5.x. See here: http://css-discuss.incutio.com/?page=BoxModelHack

So said Mike on Monday 24 May, 2004 at 8:40PM GMT.

Comment 24

How might I deal with putting each navigation item in a table cell? The moment I break the list and try to make 3 lists (3 primary navigation links) instead of the one ul, IE chokes and only displays the first dropdown. My design requires that each navigation menu live inside a table cell, but lists cannot span multiple table cells. Any suggestions?

So said Adam on Monday 24 May, 2004 at 11:13PM GMT.

Comment 25

SuckerFish dropdown examples did not work at all in IE5.2.2 for the mac. The page held together and looked good but no dropdown function.
Netscape 7 and Safari 1 on the mac worked great!

So said marshn on Tuesday 25 May, 2004 at 5:49PM GMT.

Comment 26

Dropdowns don't appear to work on Netscape 6.1 on windows.

So said John on Tuesday 25 May, 2004 at 11:18PM GMT.

Comment 27

hi,

I am trying to align submenus into horizontal but I cant do it because of the left positioning in #nav li:hover ul, #nav li.sfhover ul {.
I can get left aligned relatively to first menu item. I can ofcourse do it with absolute position but does any CSS expert know if I can do this in relative positin to first node in list?

Something like this:
Home Products News
Product1 Product2

So said JP on Wednesday 26 May, 2004 at 9:35AM GMT.

Comment 28

The one thing I like about this approach is that Google likes it. I don't think Google is going to grok just any old JavaScript DHTML dropdown menu implementation. And if those menus are the only way to view content on your site (yeah, that's ANOTHER can of worms), then big chunks of your site could be invisible to search engine indexing. Suckerfish menus don't have that problem.

So said Jeffrey Schrab on Wednesday 26 May, 2004 at 7:55PM GMT.

Comment 29

Does anyone have a fix for the use of the suckerfish dd over an iframe in Mozilla? They do not work with the current implementation.

So said andrew maddox on Tuesday 1 June, 2004 at 2:33PM GMT.

Comment 30

Ok the original article saved me a lot of stress...to know how to achieve the effect without extensive scripting or markup.
Now using CSS it comes easy, but my stress is coming back as i needed to make a menu ( similar to macromedia's but with CSS ) for a project.
So i fired up the old suckerfish and in 5 minutes, i was working the way i wanted..........in firefox.
20 minutes i had it working in IE 5+......not Opera.
after almost an hour i decided to try the new suckefish tech, to slide out the second-level items ( left: -999em ) and
i have ' my-almost-macromedia-without -the -flash -suckerfish -menus '.
I feel that Browser support is really determined for what you & you're client's target audience is. In my cae the target audience is people with a dsl or faster connection. So naturally i design for modern browsers .

The suckerfish is trully are unique tech, but as Dan has said-
" We are only giving you a clue as to how you might go about writing the CSS " ,you really have to find you're own solutions for what you're working on.

-peace

So said Steven on Wednesday 2 June, 2004 at 6:09AM GMT.

Comment 31

How do you handle the menu overlaying select boxes?

So said Stevie Lee on Friday 4 June, 2004 at 4:30PM GMT.

Comment 32

Sorry, I should have asked, "How do you handle select boxes that show through a drop menu?"

So said Stevie Lee on Friday 4 June, 2004 at 5:27PM GMT.

Comment 33

What part of the css is making the navigation jump all over the place in IE 5/WIN?

So said Alexis on Friday 4 June, 2004 at 7:38PM GMT.

Comment 34

I am no expert, in fact quite the opposite, but have had pop out menus working solidly with Opera and Mozilla for a few months now at "http://www.mouldingname.info/home.html".

I have no clue about Javascript and would like to know if the 12 line js can be applied to my site. In the 12 lines there is "this.className" three times. I suspect I replace this with something, but EXACTLY what? Also do I need something in the head to enable the javascript?

Sorry to be clueless about Javascript but I've had a look at a book and it just does my head in. I am not the programming type I guess!

So said Peter on Friday 4 June, 2004 at 10:21PM GMT.

Comment 35

I'm trying out these dropdowns on a new site of mine, but I can't get it to work in IE6. It is working fine in Mozilla Firefox 0.9RC, but the dropdowns don't appear in IE6. Any ideas? A test version of the site is available at http://www.cadmium.com.au/clients/sites/CAD046/menu-vertical.htm

So said Alex on Monday 14 June, 2004 at 2:29AM GMT.

Comment 36

Oh, I should also mention, its not working in Opera either - have I done something wrong?

So said Alex on Monday 14 June, 2004 at 2:30AM GMT.

Comment 37

Me again, just ignore posts 36 & 36, the problems were minor typos in the JavaScript. I've sorted it out now. Excellent script by the way! :-)

So said Alex on Monday 14 June, 2004 at 2:46AM GMT.

Comment 38

Has anyone developed a horizontal navigation using images that work with these dropdowns? I have an unordered list that has the parent links replaced with nice images in the CSS but it doesn't display the dropdowns. Any ideas?

So said Gary Moyle on Monday 14 June, 2004 at 12:37PM GMT.

Comment 39

So, it doesn't work in Safari 1.0.2 or in IEMac. Not exactly "cross-compatible" I guess.

So said Brad on Tuesday 15 June, 2004 at 11:15PM GMT.

Comment 40

-------
Jun 15, 2004

How do you make the items that are "dropping down" (ONLY the "dropping down" items - not the top level) appear in a horizontal row rather than a vertical list?

Adding the following style did not do it:

#nav li ul li {
display: inline;
}

Thank you in advance.
-------

So said Ambassador on Wednesday 16 June, 2004 at 3:34AM GMT.

Comment 41

When I input an asian font Mozilla always uses it's default font regardlessly. Puting the character code in meta tags corrupts the whole thing of course! Does anyone know how to fix this?

So said Terry on Sunday 20 June, 2004 at 7:10AM GMT.

Comment 42

Wonderful menuing system but I cannot come up with a way to prevent the dropdown menus from hiding behind an iframe located just beneath. I've tried z-indexing in various ways, thought about automatically resizing the iframe but that's a bit cheesy...the dropdown menus "should" be able to show up on top of the iframe, yes? IE6, Winxp.

So said Steve on Tuesday 22 June, 2004 at 4:54PM GMT.

Comment 43

yeah - no go on IE mac for any of these drop downs. any ideas why?

works great in Safari 1.22, Firefox and Opera though. (Mac)

So said Luke Perman on Wednesday 23 June, 2004 at 9:24AM GMT.

Comment 44

I don't know any js. Could you explain the disadvantage of using the replacement script you propoposed:

if (document.all&&document.getElementById) window.onload=sfHover;

for Mac IE compatibility? I'd like these folks to be able to view the lower level menu but was concerned by your statement above. It seems to work fine in Win IE, NN, Safari, Firefox with this script (no chance to check with my Mac IE users yet).

I'm also bumbing up against a cascade issue with Win IE 6. Styling the top level with {text-align: center;} has resulted in all of the lower level list dropping form the center rather than even with the left edge. Perhaps I screwed something else up. Things work fine in NN, Firefox, Safari 1.2.

Great work! I look forward to the upcoming articles!!

So said Andrew on Thursday 24 June, 2004 at 10:23PM GMT.

Comment 45

The js fix in mac ie adds cursor "?" menu comes up hazardly and then disappears completely.
Look better without it, at least the first level works.

So said maz on Sunday 27 June, 2004 at 8:36AM GMT.

Comment 46

Not working in Mac IE is the only thing that prevents me from using. Any idea why the original suckerfish works in Mac IE (), but this doesn't? Also maddening is the fact that Eric Meyer's CSS-Driven Drop-Down Menus from "More Eric Meyer on CSS" works in every browser I care about covering except Mac IE -- with no mention of the exception. Mac users are probably much quicker to move to good browsers, but I can't ignore Mac IE5.2.

So said Lowell Allen on Sunday 27 June, 2004 at 8:18PM GMT.

Comment 47

replace(new RegExp(" sfhover\b"), "")

when it should be

replace(new RegExp(" sfhover\\b"), "")

So said sron on Tuesday 29 June, 2004 at 10:42AM GMT.

Comment 48

Like #29 is there a fix for the use of the dropdown over an iframe in Firefox (Mozilla) They do appear but won't go away when you step out of the dd. The dd disapears when you leave the iframe.

So said Shinigami on Wednesday 30 June, 2004 at 10:55PM GMT.

Comment 49

I have been fascinated by this topic, and have been keen to get the
vertical menu (
http://www.htmldog.com/articles/suckerfish/dropdowns/example/vertical.html
) working on various Mac browsers. Here are my comments/questions,
and a summary of my findings. WARNING: I really don't have much idea
what I'm talking about - I know little CSS and less Javascript, so
please be gentle, but please do comment!

Javascript

1) Duplication: The sfHover function is triggered even if the CSS
works. I am not sure if this is a problem at the moment, but it
seems to me to be asking for trouble at some stage. It would be
better to test for an IE browser (and hence a browser in which the
CSS does not work) and trigger the javascript only if one is
found. If the browser is not IE, there is no need for the
javascript because (as far as I am aware) the CSS works on
everything else. A good test for IE is to see if the document.all
property is supported.

2) Mac IE5: As mentioned in earlier comments, window.attachEvent does
not work in IE for Mac - it is not implemented at all. The best
(only?) way to deal with this is to use an onLoad event. But this
may cause problems (see comment 17) - any earlier assignment to
window.onLoad will be overwritten, and javascript elsewhere on the
page may be broken. Also, window.onLoad can be very slow (see
http://simon.incutio.com/archive/2004/05/26/addLoadEvent for comments).
The best solution therefore is (a) test for IE; (b) if not IE, no
need for any more javascript; (c) if IE, use window.attachEvent if
possible, else use window.onLoad, taking care not to clobber any
existing onLoad code.

Here is my suggestion:

if (document.all) { //MS IE
if (window.attachEvent) window.attachEvent("onload", sfHover);
else { //IE 5.2 Mac does not support attachEvent
var old = window.onload;
window.onload = function() { if (old) old(); sfHover(); }
}
}

3) WebKit: Safari 1.2 has no problems rendering the vertical menu
example, but browsers using earlier versions of WebKit such as
Safari 1.0 (used by OS X.2), OmniWeb (after 4.5, I think) and ?
Konqueror do not work. It seems that the problem is caused in the
#nav li selector. If 'position: relative' is removed, everything
seems to work fine. I have absolutely no idea why this is. So
this works in OmniWeb 4.5 and should work in Safari 1.0 and
Konqueror (I think - testers please!). It doesn't seem to break
anything else though:

#nav li { /* all list items */
/*position : relative;*/
float : left;
line-height : 1.25em;
margin-bottom : -1px;
width: 11em;

4) That last comment was a lie. The rendering of second level lists
in Safari 1.2 (used in Mac OSX.3) is thrown out slightly. Some
borders disappear, and some remain when the menu has gone. Adding
some right and bottom padding as follows cures the problem (and
this time really doesn't seem to break anything else):

#nav li ul { /* second-level lists */
position : absolute;
left: -999em;
margin-left : 11.05em;
margin-top : -1.35em;
width: 11.05em;
padding-right: 0.5em;
padding-bottom: 0.5em;
}

5) I can't see what the point of the #nav li ul ul selector is, so I
deleted it. Am I missing something?

6) Er, that's it.

Here's the whole <head> tag from the vertical menu page (assuming that my post doesn't get mangled).

<head><title>Suckerfish Dropdowns - Vertical</title>

<style type="text/css">

body {
font-family: arial, helvetica, serif;
}

#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
float : left;
width : 11em;

}

#nav li { /* all list items */
/*position : relative;*/
float : left;
line-height : 1.25em;
margin-bottom : -1px;
width: 11em;

}

#nav li ul { /* second-level lists */
position : absolute;
left: -999em;
margin-left : 11.05em;
margin-top : -1.35em;
width: 11.05em;
padding-right: 0.5em;
padding-bottom: 0.5em;
}

#nav li a {
width: 11em;
w\idth : 10em;
display : block;
color : black;
font-weight : bold;
text-decoration : none;
background-color : white;
border : 1px solid black;
padding : 0 0.5em;
}

#nav li a:hover {
color : white;
background-color : black;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}

#content {
margin-left : 12em;
}
</style>

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i</script></head>

Please let me know if it works for you (or doesn't).

So said Lawrence Akka on Thursday 1 July, 2004 at 11:15PM GMT.

Comment 50

Oops - seems to have got mangled slightly [Howabout a preview button?]. Should have ended like this (from just after the </style> tag:

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (document.all) { //MS IE
if (window.attachEvent) window.attachEvent("onload", sfHover);
else { //IE 5.2 Mac does not support attachEvent
var old = window.onload;
window.onload = function() { if (old) old(); sfHover(); }
}
}

//--><!]]></script></head>

So said Lawrence Akka on Thursday 1 July, 2004 at 11:19PM GMT.

Comment 51

iframes and select menus...

As far as I know there are two ways to get around these showing through everything.

1. Hide them with javascript when you need to show something over the top.

2. You cover the iframe / select with another iframe behind the content you want to show... so in this case i guess you would have a around your then you have two layers positioned on top of each other within the . The top layer is the and the layer underneath is an iframe that covers whatever is beneath it. (I found the idea on a website done in black and red and really hard to read can't rememeber the url.)

I used the iframe method in a prototype of a web app - and it did work perfectly - even though its a bit of nasty work around... I just created iframes on the fly whenever i needed them and then got rid of them. I haven't got the complete code anymore, but i managed to find this bit...

var xiframe
var oiframe = ""
function show_div(xdiv)
{
if(oiframe != "")
{
hide_div(oiframe);
}
xiframe = document.createElement("iframe");
xiframe.setAttribute("id", "xifone");
xiframe.setAttribute("frameborder", "0");
document.getElementById(xdiv).appendChild(xiframe);

show_menu(xdiv); // function to show and position parent layer
xiframe.style.width = "100%";
xiframe.style.zIndex = 2;

xiframe.style.height = "100%";
xiframe.style.postion = "absolute";
oiframe = xdiv;
}

function hide_div(xdiv)
{
// hide the div and move it and delete the iframe
document.getElementById(xdiv).removeChild(document.getElementById("xifone"));
//document.getElementById(xdiv).removeChild(xiframe);

hide_menu(xdiv); // function to hide parent layer
oiframe = ""
}

So said John Elliott on Friday 2 July, 2004 at 1:36PM GMT.

Comment 52

Hi Lawrence (#49 / #50)!
I am currently working on implementing your solution, but it doesn't seem to work under Mac 5.2. Unfortunately I am not able to test it myself (no macs around here), but what I hear from external testers, it doesn't seem to work on thei mac-boxes.

Linux: Galeaon and Mozilla works like a charm...

For those of you curious:
www.daszeichen.ch/client/s/navD_suckerfish.html

I would be thankful, if one of you mac users could have a look at it... (there is a drop-down menu under 'Auf einen Blick...')

cheers bernard

So said bernard on Friday 2 July, 2004 at 2:50PM GMT.

Comment 53

Bernard (#52)

You're right. It doesn't work on Mac IE5.2. There is a different problem on Omniweb 5, which means there is probably also a problem on Safari 1.0 (ie OSX.2) and Konqueror. It works fine on Safari 1.2

Well, I really don't know what I'm doing, but trial and error suggests the following:

1) The IE problem is caused by the div#s-header .invisible selector. If you remove it completely, or replace the display:none with something else, it all works fine. I don't know why.

2) The Omniweb problem is caused by the float:left in the #s-dropdown li selector. If you remove the float:left, it works.

Lawrence

So said Lawrence Akka on Friday 2 July, 2004 at 11:44PM GMT.

Comment 54

Hello, first, thank you, thank you, thank you for making such a great menu, am actually making it work. I'm sure the questions I have are in the stupid range, but I don't know and can't figure them out either due to age (older than dirt) or brain function (effects of multiple strokes). I am trying to redo a site I did for a non-profit organization as my contribution to their effort. The original site (my first attempt at doing this) is a mess, and is done in frames, etc. am trying to redo it in css, etc. and make it as great as I can. I have uploaded the page to the url listed below in case anyone has time or the inclination to assist me.

My problems are:
1. there is too much space between the logo area and the nav. bar, am sure it is something simple, but don't see it.

2. problems with the nav bar -
. if I resize the text thru the browser to larger or largest - it goes off the screen, is there a way to keep it the same size regardless of the text size used?
. is there a way to center it?

3. under the "body-font" I have no idea what the "78%/1.5 means - help.

4. There are several style items I don't think I need, but am afraid to remove them as I am just learning all this, and right now it works - lol.
p#smurf
#smurf strong
h1
#scaffolding
#scoffolding a
#scaffolding a: hover

5) Is there a way to make the logo section and navigation bar "static" have read a lot and tried several things, but none of them seem to work correctly.

6) Could the styles be put on a separate page and use the @import statement?

I realize there is still a long way to go before I have this right, am going to remove the "Mission Statement" and put it on an intro page for one thing. Just thought it would be best to get one page correct, before adding all the rest.

Thank you in advance for any assistance, am sorry am not at the competence level most of you are, but am trying hard and learning as fast as I can. Marilynn

So said Marilynn on Saturday 3 July, 2004 at 6:21AM GMT.

Comment 55

Well, when I walked away from it for awhile, I figured out the answers to #1 and #4, duh!
Thanks again, this is great.

So said Marilynn on Sunday 4 July, 2004 at 8:54AM GMT.

Comment 56

I have a possible solution for allowing the top level items of horizontal menus to be as wide as they want. I need to do this because my the text and links for my menus are generated from a database. Hope this is useful for others.

I found that if I removed the widths then the top level items would only use the space they needed IN NETSCAPE but would use the entire page in IE. However if the width is set to 1px for all top level LI items then IE will get it right and NETSCAPE will have them all sitting on top of each other. To get around this I added an extra line in the javascript that says, basically, that every top level LI item should have a width of 1px set on it - But only if the browser is IE. Seems to work in IE/pc, NS/pc, IE/mac (not completely briliant but good enough), NS/mac and Safari. Adding the "white-space:nowrap" forces the text to stay on the one line.

My ul list is structured so that every li item has a href that fills the availble space of the LI

First the javascript for setting up the menu needs to be altered:
//--------------------------------------------
sfHover = function() {
var BUA = navigator.userAgent;
var BIE = BUA.indexOf("MSIE");
var BIsIE = BIE>=0;

var sfEls = document.getElementById("mainNav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {this.className+=" sfhover";}
sfEls[i].onmouseout=function() {this.className=this.className.replace(new RegExp(" sfhover\\b"), "");}

//all is normal till here. If we're using IE then this tells any first level item to have a width of 1px
if (sfEls[i].parentNode == document.getElementById("mainNav") && BIsIE) {
sfEls[i].style.width = '1px';
}
}
}
//------------------------------

These changes should occur in the style sheet

#mainNav a {
/* add these */
white-space:nowrap; /* forces the text to stay to one line */
padding-left: 8px; /* some space either side */
padding-right: 8px;
/* width : 10em - remove this*/
}

#mainNav li {
/* width : 10em - remove this*/
/* add this */
white-space:nowrap; /* forces the text to stay to one line */
}

/* beyond here is what i did to suit my requirements.
#mainNav li ul li {
width: 100%; /* so it fills the available space */
}

#mainNav li ul li a {
/* remove the width */
}

hope this helps others and possibly gets included in a future version.
Steven Harrap.

So said Steven Harrap on Friday 9 July, 2004 at 9:01AM GMT.

Comment 57

I was wondering about if you wanted to put a border around the so it would look like the traditional dropdowns such as in best buys websitd. how do you get it so there isn't the extra border from each other touching.

So said Dan Shields on Saturday 10 July, 2004 at 2:34AM GMT.

Comment 58

Hi,

Thank you. This was a huge help! I've tested on Windows with Netscape7, IE6, Opera and all worked great.

I haven't seen anything mentioned about Netscape6 -- when i tested it, everything rendered correctly but the dropdowns didn't function. Is this a known issue? or just me? I would it would have been mentioned by now if others had troubles too.

Thanks,
Mr. Joe

So said Mr. Joe on Sunday 11 July, 2004 at 3:34AM GMT.

Comment 59

Styling the top-level menu: Andrew mentioned above that he was having trouble centering the top-level buttons because it caused IE6 to drop the menus down from the center of their parent buttons instead of aligned to the left.

I had the same problem for several days as well. Among other things, I found that removing the width: specifications for #nav li, and just leaving the with: specified in #nav a, fixed the problem in IE. But, it also caused the menus to break in Opera; the main buttons stacked vertically instead of in a neat row.

I finally found a solution tonight: apply the text-align: center to #nav a, not #nav li. Solves the problem.

Now if I can just figure out why 2/3 of my menus are refusing to disappear on mouse-off in Mozilla and Firefox ...

So said IdahoEv on Sunday 11 July, 2004 at 9:22AM GMT.

Comment 60

When I place the javascript in a separate .js file, the cascading submenus no longer appear in IE 6. Is this just me?

So said Everett Lindsay on Sunday 11 July, 2004 at 7:39PM GMT.

Comment 61

Oh, um, nevermind. Typo.

So said Everett Lindsay on Sunday 11 July, 2004 at 10:57PM GMT.

Comment 62

Hi. I liked this program a lot! The dropdowns are really important for every site! Keep working hard! :-)

So said Anita on Monday 12 July, 2004 at 2:14PM GMT.

Comment 63

here's a potential mac IE 5.2/OS X fix...

from my tinkering, i think that when patrick and dan changed the "display:none" property of the nested ul to "left:-999em" to fix the dropdowns in opera they b0rked mac IE....

i changed it back to "display:none" and "display:block" (instead of "left:auto") on the ul:hover and now it's working for me in IE 5.2.

So said sabih on Tuesday 13 July, 2004 at 4:03PM GMT.

Comment 64

Is there a way to change one of the 's to have different coordinates when you hover over? (different from the other 's, I mean). For instance, I beleive this part determines the relationship of the submenu to it's main menu :

#nav li ul ul {
margin: -.15em 0 0 9em;
}

on one of te 's I want to have the submenu fly out to the left, and not the right, but I am not sure how to do this in CSS/html.

So said Bruce Gilbert on Tuesday 13 July, 2004 at 8:30PM GMT.

Comment 65

I couldn't say how much I appreciate this innovative technique. I am currently implementing this
to accomplish my level 4 drop-down menu system for my Intranet. I had to maintain over 700
training and report documents and used heavy javascripting codes. It was very difficult for
low-level managers to add or subtract from our web site. With this innovative technique, it is
"dumbified" down for them, so much easier to train them to do on their own! Wish IE could
catch up in CSS world as much as any other browser did. If there is any new techniques
much more simplier than this (I seriously doubt it anyway) I would like to know. :)

So said Scott Hamm on Thursday 15 July, 2004 at 6:39PM GMT.

Comment 66

What if you want your top level menu items to be evenly spaced? Because the text is different for each menu item it won't work in a set width box? Do I have to make a class for each top level item in a different sized box dependent upon the text in it?

Thanks

So said Deb on Thursday 15 July, 2004 at 7:09PM GMT.

Comment 67

Please do let me know when/if anyone ever discovers a solution to the Netscape 6 for PC failure.

So said Everett Lindsay on Friday 16 July, 2004 at 5:42AM GMT.

Comment 68

In the example, the submenus always cascade to the right of their parents. Is it possible to modify the CSS such that some top level menus could have their submenus cascade to the left of the parent?

So said Mitch Sacks on Friday 16 July, 2004 at 3:32PM GMT.

Comment 69

Hey, I am having a little bit of trouble with the menu. I am doing a single level menu. I am having problems with the width and the high of the boxes in the drop down menu. Is there any way to specify it to make it independant from the width/heigh of the top menu?

So said andy on Monday 19 July, 2004 at 5:00PM GMT.

Comment 70

Brilliant! I've modified it so that a single-level menu will drop down when hovering over an image.
It works in Mozilla, which lends full support to the hover: pseudoclass. But I can't figure out how to modify the javascript to nudge IE to do the same. Any thoughts?

So said Mark Peal on Tuesday 20 July, 2004 at 12:05AM GMT.

Comment 71

Hey is there any way to specify the menu to open up vertically instead of down? it would help because there are only so many items you can have before you have to scroll. Also no one answered my question about adjusting the width/ height of the hover boxes

So said andy on Tuesday 20 July, 2004 at 2:24PM GMT.

Comment 72

I found an answer to my own question (#70) about a dropdown when hovering over an image. In brief, I made a <div id="nav>, then another inside it, <div id="inside>. A linked image goes there, followed by the menu <ul><li> . . .
The styles refer to #nav, #nav #inside ul, and so on. The javascript is changed to getElementsByTagName("DIV")
The result is at http://www.psquaredtech.com/dropdown.

So said Mark Peal on Tuesday 20 July, 2004 at 10:04PM GMT.

Comment 73

Hey, Dan (#57)~
A solution to parallel borders touching each other is to style three sides in the <ul> and the fourth side in the <li>. Example:
ul {border: 1px solid black; border-bottom-style: none;}
li {border-bottom: 1px solid black;}
The <ul> becomes a shell that draws the top border and extends the left and right as far down as they need to. The <li> draws the bottom border for each menu list item, including the bottom of the shell.

So said Mark Peal on Wednesday 21 July, 2004 at 3:25PM GMT.

Comment 74

Good work,

but it only works with the mouse, not for keyboard navigation. You can navigate thru the first level but thats it, no dropping down of the submenu :-(
=> Not useable for people that can't or don't want to use a mouse. Has anyone an idea how to make it work?

So said Jens on Wednesday 21 July, 2004 at 7:40PM GMT.

Comment 75

Is there an easy way to get a drop down menu to work over an IFRAME? I'm making an intranet and it makes uses of many iframes and this creates a pretty big problem. Thanks in advance.

What is funny, is Safari on Mac it works but not Mozilla or Firefox (PC or MAC).

Is there a way to report this as a bug to Firefox?

So said Marc Pope on Wednesday 21 July, 2004 at 10:25PM GMT.

Comment 76

I have the menu working really nice in IE, however, in Mozilla/Firebird, all levels of the menu stay open. Any thoughts?

So said Michael on Thursday 22 July, 2004 at 12:24AM GMT.

Comment 77

This is a really great technique. I tried my best to convert the CSS to work with several, differing width graphical buttons. I think I pulled it off okay. Take a look.
http://members.cox.net/williamsray/toms/TOMS2.html
In fact, I'd like to see Patrick and Dan write a tutorial on using this technique with graphics of differing sizes like my example. I'm pretty they could find a much better way of implementing it.

Back to my example page, I can't get the rollovers to work in IE. Will someone help me with the JavaScript? Patrick or Dan, care to take a look?

So said Ray Williams on Tuesday 27 July, 2004 at 1:53AM GMT.

Comment 78

Thanks for the article.
I was wondering if there is a way to put the menus in a file external to the HTML files?
With good CSS you can change the look of a whole site by changing just one or two files. With the menu implementation here you would have to edit EVERY HTML file in the site to make a change to the menu.
Also, the entire menu system code is duplicated on every page.
If it could be made external then site wide changes would be easy and HTML files would be smaller.

I have used a Javascript menu system and each HTML file calls up the javascript. I can change the menus on entire sites by editing a couple of files only. Could this be done with the Suckerfist type menu system?

Any comments?
Mark

So said Mark Smith on Tuesday 27 July, 2004 at 5:34AM GMT.

Comment 79

Great work guys! I would also like to second Ray Williams (#77) comment regarding different widths and use of graphics for the first level. It seems Stepen Harrap (#56) has touched upon a method

However, I gather if it was at all possible, Dan and Patrick would have already found a way to get the widths of the dropdowns to shrink and grow depending on the text within them. Something I just haven't be able to do....yet.

So said skube on Thursday 29 July, 2004 at 1:33AM GMT.

Comment 80

Hi has any one been able to resolve the issue for netscape 6.0?
I get no dropdowns in Netscape 6.0.
Any help would be great.
Thanks

So said si on Sunday 1 August, 2004 at 2:25PM GMT.

Comment 81

There is a suggested fix on the alistapart discussion (page 18 I believe). I tried it on that javascript but wasn't able to get it to work. So no luck there but he does explain why the menus don't work in NN6.

"In the CSS dropdowns, s are styled as block elements whose dimensions occupy the entire that contains them. Consequently, there is no background to hover over, and nothing happens in Netscape 6."

I noticed this too since in my version the li is a pixel larger than the image i used so I would see the menu appear but only around the edges.

I'm rubbish at this syntax stuff but shouldn't there be a way to get the to trigger the rollover?

any thoughts?

So said jaseg on Wednesday 4 August, 2004 at 6:42PM GMT.

Comment 82

something else to think about for NN6: When the menu open as I rollover that pixel border it makes the outer bigger (cause the is in the 'natch) shoving the content of the page down. (the menus i'm using go across)

So said jaseg on Wednesday 4 August, 2004 at 7:08PM GMT.

Comment 83

Referring to message #43 or so and onwards - not sure if this has been resolved yet? This was referring to issues with IE and others - as in menu items not "appearing" or disappearing. One solution is to "wrap" the menu code in a "box" like so:

...menu code...

the CSS part looks like so:
div.lix {
position: absolute;
top: 33px;
padding: 0 10px 0 0;
z-index: 120;
}

don't ask on the technicalities - I don't know. Adjust each of the elements in the above CSS block to suit your particular requirements. I've tried this in both horizontal and vertical menus and its done the job. Never had an issue with firefox and this solution fixed up issues I had with IE6. Don't have a MAC so cannot pass comment. Some else could try and then report back here. HTH

So said rc on Sunday 8 August, 2004 at 3:36AM GMT.

Comment 84

Referring to message #83. This "box trick" also helps with "absolute positioning" of the menu anywhere on the page. You could check out my web site - http://www.rogancoles.com/ - to see what's been done there. There's no guarantee as to the permanence of the pages on this site. BTW - the last line in the above message was meant to read, "Someone else could try..."

So said rc on Sunday 8 August, 2004 at 4:27AM GMT.

Comment 85

Referring to posts #83 and #84 - I've ditched the sons of ... vertical menu and have since replaced it with Nick Rigby's vertical menu found back at the alistapart site. The script here works brilliantly if used horizontally. Had too many issues trying to use it as a vertical menu - as in lining up the various elements so that they worked the same across the various browsers I have here at base. Some of the issues were in the CSS others maybe with the js script. Nick Rigby's solution seems slightly more "portable" and stable at this stage. HTH.

So said rc on Wednesday 11 August, 2004 at 7:46AM GMT.

Comment 86

Übrigens, wenn man im normalen suckerfish dropdown die Zeile
li:hover ul, li.over ul{display: block; }
so schreibt:
li:hover > ul, li.over ul{display: block; }
kann man das Menü mit beliebig vielen Ebenen ausstatten.
Allerdings funktioniert das bei mir nur in Mozilla und Opera.
Der IE streikt.
Vielleicht kann mir jemand helfen?

So said baerbel on Wednesday 11 August, 2004 at 4:24PM GMT.

Comment 87

much appreciated chaps

So said NIck on Wednesday 11 August, 2004 at 5:40PM GMT.

Comment 88

I'm using the original Suckerfish Dropdown list. I would like to have a horizontal list later on the same page. How can I do that, please?

(The site I'm talking about here is http://www.geocities.com/wtgdirectory.)

Thanks!

So said Rahel on Wednesday 11 August, 2004 at 5:58PM GMT.

Comment 89

This saved my life. I am not a fan of dropdowns, but I have a client that "needs" them. I've been looking for the best way to do it. Thank you so much!

So said Jina on Thursday 12 August, 2004 at 7:48PM GMT.

Comment 90

Hey
This much sound a bit too controllish or perfectionistic but I was wondering if any of you that have used the vertical
version had any problems with dreamweaver in the design view?

The first <li/> is not align with the others. And there is a spave between the one that have second level lists

If you know what I mean is it a way to make them look aligned vertically like the way they look in the browser.

Thanks

So said Henry on Friday 13 August, 2004 at 4:59AM GMT.

Comment 91

Did anyone have an answer for Bruce Gilbert (#64) or did I miss it? I'm trying to figure out how to make my menu fly out to the left as flying to the right makes it run off the page and adds a horizontal scroll bar to the bottom of the page. I'm using IE.

So said peggy on Tuesday 17 August, 2004 at 12:35AM GMT.

Comment 92

External CSS file not working?

I think this is a great technique, but for some reason I can't seem to make it work when I move the CSS defs into an external file and then pull in the defs through @import or link href=

IE6 acts like it never sees the linked style defs...Anyone else see this problem or is it just me?

Thanks!

So said Terry G on Tuesday 17 August, 2004 at 5:16AM GMT.

Comment 93

Ignore the previous post. (of course!) Turned out that either dreamweaver or IE6 was botching the URL for the stylesheet.

"/s_style.css " fails due to the leading slash, for some reason while "s_style.css" works -- even though the file IS in the site root.

Gotta love the net!

So said Terry on Tuesday 17 August, 2004 at 5:20AM GMT.

Comment 94

Ack! Section 508 (a.k.a. W3C WAI). What about keyboard access - are we doomed to using our mice?

So said Yo Mamma on Wednesday 18 August, 2004 at 11:08PM GMT.

Comment 95

A great script,
though there's still a lot of questions and troubles.
... and I'm gone add one (or two):

My first script didn't work 100%. After that I tried the source code of the example page. It contained the same css but just in another order. So placing something like float: left; before or after another css command can make the difference between the submenu showing up or not!!!! (don't know what my old order was, but the example is good. and don't know if it was only IE -yack spit!- or mozilla firefox as well.)

But by changing the order I can't fix the following:
I'm trying to add this to my second level lists (#nav li ul) for IE6 (yack spit!):
background: white;
border: 1px solid gray;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
The first and second are okay, in IE and firefox.
The alpha filter also works in IE, but all of a sudden the third level doesn't show up anymore.

Off topic: where would I find an overview of 'moz-...' codes?

Thanx, keep up the good works!

So said G.J. Gommer on Sunday 29 August, 2004 at 11:23PM GMT.

Comment 96

Re #95: I whacked in alpha as a quick test too, with the same results. Not crucial so I dropped it again. It'd be pretty spiffy if it worked tho, I'd be most interested if anyone knows whats up with those 3rd level's dissapearing

So said Dan F on Monday 30 August, 2004 at 12:57PM GMT.

Comment 97

I have a client using Netscape Navigator 6 who didn't bother to tell me they were still using NN6. Sure enough, the dropdowns that I put together for them based on this code doesn't work. And of course, the client refuses to upgrade to a newer browser.

Any thoughts as to what I can do for them?

So said Christian Ready on Monday 30 August, 2004 at 6:51PM GMT.

Comment 98

Found it! Or a workaround.
(Thanx Dan, for trying to help me out.)
Instead of trying to stick background and filter to my #nav li ul, i've put those in my #nav li
That worked and didn't eat my 3rd level.

Christian, why do they refuse to upgrade? Upgrading would (or should, but don't tell them that) mean: improved performance and reduced safety risks (sounds like ie -yuck spit-). So suggestion 1: persuade them a bit more to upgrade. If that fails, you could may be do a browsercheck. If browser=NN6 then load styleswithoutnav.css and load oldfashioned-dhtml-menus.js else just load standard.css

So said G.J. Gommer on Monday 30 August, 2004 at 9:38PM GMT.

Comment 99

Nice! Thanks for that GJ. Following your lead, I put it on the #nav li li, as putting it on the #nav li set a background colour for the toplevel elements which screwed the pooch so to speak. The bit of transparency looks pretty swish I reckon. Thanks again!

So said Dan F on Tuesday 31 August, 2004 at 1:51AM GMT.

Comment 100

Any thoughts on how to get this to work when you focus on the <li> (say, browsing with a keyboard)? I have tried a few things, but can't seem to get :focus to be recognized for the <li>. I would be very interested in seeing this work (it would make it more accessible too).

So said Aaron G on Tuesday 31 August, 2004 at 4:40PM GMT.

Comment 101

I don't know if I'm missing something here, but I've been puzzling over as to how the highlighting is retained on the parent menu items in the pretty version with just:
#nav li a:hover, #nav li.sfhover {
background: #eda;
}
I've been trying to achieve the same effect with a vertical menu but cannot retain the highlighting in parent menus. In your vertical menu version, only the hovered over item is highlighted.
Grateful for any explanation on the first point and any advice on the second.

So said Ray Lyne on Wednesday 1 September, 2004 at 9:59AM GMT.

Comment 102

Okay, I am far from an expert and I used this menu and it works great for IE and Mozilla. When I do add a background image and move to each element it flashes, why is that? It is very annoying. Also, I wanted to have another in my list but it is just embedded in the list. I don't want it to be another drop down. is there any way I can get this to work? I hope that was clear. Like this

List 1
List 2
- List 2.1
- List 2.1
- List 2.3
List 3
List 4
List 5

So said Daniel Shea on Saturday 11 September, 2004 at 10:03AM GMT.

Comment 103

Has anyone found a solution for Adam (#24). I'm having the same issue (and I'm so beginner at this, I'm lost to find a solution, so any help would be greatly appreciated.

I've got three verticle menus running out of table cells (one cell for each menu). The drop out from behind a .gif image. Everything works great in FireFox, but no such luck for IE 6. IE 6 only displays the first menu and not the other two. Check here to see what I've got running: http://www.preima.com

Also, regarding Jens's (#74) comment (and a very thoughtful one at that). Has anyone discovered how to make this menu work through tabing? I've discovered that in fact that tabing is active - it's just not visible. What I mean is, if you tab to the menu title - it's shows as being selected. But, if you arrow down, nothing happens, another tab and the selection disapears, but upon hitting enter I'm taken to the following page.

Lots of questions, any feed back would be great!

So said Todd on Sunday 12 September, 2004 at 4:33PM GMT.

Comment 104

Anyone know how to make the sub menus horizontal also? I'm looking to do it but having trouble sussing it out :)

So said James on Thursday 16 September, 2004 at 12:42AM GMT.

Comment 105

Does anyone know how to make the submenus adjust the width according to the text? Imake it work in IE, but in Firefox the text exceeds the backround.

So said Andy on Thursday 16 September, 2004 at 11:43AM GMT.

Comment 106

Anyone come across a problem with the dropdowns when they roll over headings that use some kind of image replacement? In Firefox, because the list sits above the page content in the code, it sits below it in z-index, and so slips under the title. Then when you move down the list, as you get to the horizontal position of the title, the list thinks it's no-longer being hovered over, and dissapears. I've spent hours changing z-index's all over the place and haven't found the solution yet... =/

So said Luc on Thursday 16 September, 2004 at 4:42PM GMT.

Comment 107

Has anyone been able to change the text color for the hover classes. I have tried adding:

color: #fff;

to the final hover style which specifies the hover background color. The background color can be changed but it seems that the font color cannot.

Next I tried:

#nav a:hover {
color: #fff;
}

This changed the font color on the item you were hovering but didn't effect the parent item (if you were in a sub menu)

Does anyone have any suggestions? I realise that this maybe a CSS problem but it seems to me like it is not working as it should.

(tried in IE 6 (xpsp2) and Firefox 0.9.3)

So said Dave W on Thursday 16 September, 2004 at 5:20PM GMT.

Comment 108

Hey I also noticed that now, after I downloaded SP2, and you preview it from DWMX04 you get a message.

"To help protect your security,Internet Explorer has restricted from showing active content that could access your computer. Click here for more options..."

And would someone will like to coment in comment #90

Thanbks

So said Henry on Friday 17 September, 2004 at 2:14AM GMT.

Comment 109

Re: #90

I would take DreamWeaver's design view as a merely a guide not as what is actually displayed. The only way to do this is to test in each different browser.

So said Dave W on Friday 17 September, 2004 at 4:17PM GMT.

Comment 110

I still have problems in ie 5.2 for mac and I can't test it! I tried the soultions above without success. Does anyone know how to do this without buying an old Mac? I tried installing IE 5.01 on my XP, but it refuses. It seems impossible to uninstall IE6 in XP.

So said Andy on Monday 27 September, 2004 at 6:27PM GMT.

Comment 111

I'm having box model issues with this nested menu. For the life of me I can't figure out the spacing issues with all the nested lists. Anyone have an idea what is going on on this page? Can ya help? (there are other problems on the page...but not affecting the menu.)

http://www.badblood.com/esmPortal/tester_v1.html

Thanks!

So said Shelly on Monday 27 September, 2004 at 8:45PM GMT.

Comment 112

I'm having trouble with the "submenus" staying open long enough to click a link using Mozilla. IE is fine. Any remedy for this?
http://www.charlottes-saddlery.com/test.htm

So said Gulfcoast on Monday 27 September, 2004 at 9:00PM GMT.

Comment 113

QUOTE "I tried installing IE 5.01 on my XP, but it refuses. It seems impossible to uninstall IE6 in XP."

A couple of year ago* an Australian developer found a way to strip IE from the OS and then he packed individual installs of various IE browsers that ran as stand-alone apps.very cool. (* about the time Bil Gates was in court saying he couldnt take IE out of the OS as it was an integral part and therefore not anti -competition).
Try Google, if no luck i have stand-alone IE5.0 and IE5.5 saved somewhere and could make them available on my site.

So said David on Tuesday 28 September, 2004 at 12:44AM GMT.

Comment 114

As in comment #101. I've been trying keep the parent menu highlighted as in the pretty version but with the vertical
menu . I have been playing with but havent be able to achieve it.

Could you help please?!

Thank you

So said Henry on Wednesday 29 September, 2004 at 5:40AM GMT.

Comment 115

David!

I found them on http://www.skyzyx.com/downloads/ Thanks for the tip on searching for "standalone". However, it seems to work tolerably in 5.xx for windows, but my Mac contact still complains.

Have anyone had success on IE 5.2 for Mac?

Something elseI've been struggling with:
To get the top level items evenly spaced, and the sub menu fields to expand according to the length of the text, I ended up making a separate css for Opera.

So said Andy on Thursday 30 September, 2004 at 12:50AM GMT.

Comment 116

In my attempt to make these dropdowns work I have run into one problem. Everything works fine in IE and Mozilla with the drop down itself. My problem is with the href's. Everything works fine in Mozilla, but when I try to follow a link within my drop down structure, I get a forbidden error page.

Any help with this would be much appreciated.

Tiger Valley

So said Brad Pilling on Monday 4 October, 2004 at 6:39AM GMT.

Comment 117

Hi,

I'm trying to implement a database driven 3 level horizontal menu using the great examples you've provided, but have a couple of problems.

1. The level 1 list is to big for the display (200+ entries). How do I modify the css so that the level 1 menu is scrollable, but doesn't affect the level 2 or level 3 menus (i.e they still appear outside the scrolling region for the level 1 menu).

2. The process of displaying the level 2 menu is quite slow. Is that a side effect of having such a large level 1 menu?

Any suggestions would be appreciated.

Andrew

So said Andrew Danieli on Tuesday 5 October, 2004 at 4:18PM GMT.

Comment 118

Though this article is getting old, I have a tip for people who might have had troubles like I had. You see, I had a menu in which some of the parent items weren't links, but since the code depends on the "#nav a" rule to display the menu properly, these items' children displayed wrong. Ack! The solution was to wrap those non-linked items in a span and give the span a class (say, "no-link"), and then add that class to the above-mentioned rule so it says "#nav a, #nav span.no-link" instead.

That's a poor description, but I hope those of you who had a problem like mine will be able to get it.

So said Jordan on Thursday 7 October, 2004 at 5:07PM GMT.

Comment 119

How do you set a timeout for the mouseover? Can anyone give me some hints?

How do i use the setTimeout function for this?

So said Angelo on Friday 15 October, 2004 at 9:30AM GMT.

Comment 120

I apologize if this has already been answered, but I did search this discussion first.

My page has a vertical menu, and I put the css in its own file. In IE, with that little piece of JavaScript (which is also in its own file) the second level ul list only displays on hover, just like the ads say. But in Mozilla/Firebird they are always visible.

BTW - I experimented with the code. I made my own local copy of the example page, and I put the css and JavaScript in their own files. Everything worked fine in both browsers. However I wasn't happy about the width, and while trying to change it, I found that the value under #nav li was not needed.

So said Alvin Orzechowski on Saturday 16 October, 2004 at 6:52PM GMT.

Comment 121

Hello everybody, I'm french and i don't speak good english but i solve the problem when the dropdown hovers over an image.
You simply must to add a z-index here:

#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 10em;
w\idth: 10em;
font-weight: normal;
border-width: 0.25em;
margin: 0;
z-index: 10; <---------------------------------------------------
}

and it would be work!
If you want more info on this,please see in french : http://mguessan.free.fr/html/menu.html and section : Résolution du problème des listes de choix
there is a link that explain all!

tcho everybody

So said enleve_ton_boubou on Tuesday 19 October, 2004 at 7:13PM GMT.

Comment 122

Hello,

I am working on this menu and I tried to follow the tutorial, but I just keep having problems IE 6. It doesn't dropdown, but it works in mozilla and in netscape. Can someone help me. Here is a link to my test page: http://www.nepeace.com/menu.html and my stylesheet: http://www.nepeace.com/stylesheet.html (I'm working with a separated stylesheets so I copy pasted it into a html file so that you can view it easier.)

Thanks in advance,
Angelique

So said Angelique on Tuesday 19 October, 2004 at 10:11PM GMT.

Comment 123

I have a form on same page as these great menus (Using vertical style, but I image same issue with horizontal drop downs) . . menus fly out on top of form element (select tags) in all browsers but IE, where it appears behind the form element. Z-index does not work

Anyone know of solutions for this? I've thought about using the horizontal menu to "fake out" IE, but now sure that I'll be able to capture data this way. Any suggestions greatly appreciated.

So said Corrine on Wednesday 20 October, 2004 at 4:06PM GMT.

Comment 124

I've been attempting to implement this drop-down menu on my company's website and have run into some problems with (..not surprisingly..) IE5/Mac. All other browsers were displaying everything just fine, but the IE kept applying all kinds of styling to the drop-down menus on mouseover, causing all kinds of odd effects and general mayhem. After two days of tinkering with the style sheets and the JavaScript code, testing and re-testing, I found the problem and the fix.
It may be because of how I have items styled in the documents, or the fact that I have multiple external style sheets and script files, etc - I don't know for sure. The problem turned out to be in the JavaScirpt code that adds the " sfhover" class to the menu's "li" elements. IE5/Mac does not like elements' classes to start with a space! Once I discovered that, the solution was "simple":

function menuFix() {
var sfEls = document.getElementById("topmenu").getElementsByTagName("li");
for (var i=0; i0? " ": "") + "sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
}
}
}

The important difference in the handling of the className in the mouseover and mouseout functions. In the first case (onmouseover function), a space is added only if the element already has a class. In the second case, the regular expression was modified to account for optional blank space (the " ?" part) or match the beginning of the string otherwise. I'm pretty sure there is a way to simplify this, but I am not gonna worry about that.

I hope this helps to whoever may have had/will have this kind of problem.

So said Anatoly on Tuesday 26 October, 2004 at 8:38PM GMT.

Comment 125

Ack! It looks like the parser ate some of my script from the post above. Here it is in full:

function menuFix() {
var sfEls = document.getElementById("topmenu").getElementsByTagName("li");
for (var i=0; i&ltsfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=(this.className.length&gt0? " ": "") + "sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
}
}
}

So said Anatoly on Tuesday 26 October, 2004 at 8:43PM GMT.

Comment 126

I hope this hasn't been mentioned before - honestly I couldn't be bothered to read throug the entire thing, but as far as my trusty 'find'-button told me, it hasn't...

I found that the suckerfish-menus didn't work properly in konqueror 3.3 (KDE3.3.0) - the positioning was way off...
(to be honest, I can't really think of a reason it would even work at all, the way it was before...)
this was fixed by adding position: relative; to the #nav, #nav ul {} (I suppose it's only really needed in #nav) - as far as I've been able to test, it doesn't break any other browser...

So said Christian Sonne on Wednesday 27 October, 2004 at 3:04PM GMT.

Comment 127

I forgot, I created a test-case that is simply a copy of the original markup, with my one property inserted...
http://geeksbynature.dk/~cers/css/suckerfish/
the addition is marked: /* KONQ3.3 FIX */

(for those of you who can't be bothered to make a test-case yourself, but wouldn't mind testing one :P)

So said Christian Sonne on Wednesday 27 October, 2004 at 3:10PM GMT.

Comment 128

I just noticed one place more that needed positioning...
#nav li {}

my example above has been updated, and similarly marked in the source

So said Christian Sonne on Thursday 28 October, 2004 at 11:35AM GMT.

Comment 129

Anatoly , thank you for the javascript fix. I tired inserting your function in place of the suckerfish function, and it did not work in IE 5.2 for Mac on OS X. I made sure to change the "topmenu" id to "nav." I also left in if (window.attachEvent) window.attachEvent("onload", sfHover); after the function. Is it possible to see a working example of the code you have produced? Thanks.

So said Simeon on Thursday 11 November, 2004 at 8:38PM GMT.

Comment 130

I was able to make these menus work in IE 5.x Mac with some help from Anatoly's code. He did all the leg work, I just cleaned it up. It seems MT really distorted the code when it was posted. It added some html entities that broke the script. I posted a working version for all to use. More detail on the script is located at this page:

http://simeons.net/suckerfish_ie5mac_fix.htm

So said Simeon on Thursday 11 November, 2004 at 11:23PM GMT.

Comment 131

How can I modify this to work with the HTML 4.0 DTD?
The menus tables have too much spacing on them.

So said Patrick on Monday 15 November, 2004 at 10:02PM GMT.

Comment 132

Hi,
first of all this code is wonderful, and I want to thank the authors.
Then, I have a strange problem with the javascript and the with IE.
I'm trying to attach my dropdown menu in an on line forum I've installed on my server. The forum is infopop UBB and is written in perl. The forum Control Panel, allow me to insert html code inside the HEAD tag, so I've inserted here the suckerfish javascript.
When I apply the changes inside the control panel, the system CHANGE this code:
(new RegExp(" sfhover\\b"), "")
with this:
(new RegExp(" sfhover\b"), "")

so, to fix this, I've deleted - \\b - and the dropdown menu function as well, it seems.
What does \\b do?
What do you think of this?
Thank You,

So said Enrico - Mainstreet on Wednesday 17 November, 2004 at 3:32PM GMT.

Comment 133

Is it possible to put like a 500 millisecond of delay before the menu disappears? Right now it takes a lot of coordination to actually navigate using the menu.. if you move your mouse a little off then everything disappears and you gotta start over.

Any ideas?

So said Allan on Friday 19 November, 2004 at 4:05AM GMT.

Comment 134

G'day

one other problem in IE and Mozilla is that when you have a flash movie just below the buttons, the flash movie will order the drop down menu back behind it so you won't see the links on the menu.

So said on Friday 26 November, 2004 at 12:06AM GMT.

Comment 135

G'day

one other problem in IE and Mozilla is that when you have a flash movie just below the buttons, the flash movie will order the drop down menu back behind it so you won't see the links on the menu. Can someone help me please?

So said Matt Woods on Friday 26 November, 2004 at 12:06AM GMT.

Comment 136

I can't get a level 3 menu (li li li) to work in Firefox v1 or Mozilla v1.3 except when called by hover from the first menu item in a level 2 block. Most strange. Any one else had that problem? Works fine at all levels for ie v6. Can't see why it should fail either. On the "pretty" example, if you add another set of lists to level below say Caulolatilus you will see it fails that level only in Firefox.

I really like the code, using CSS for drop down menus seems spot on to me. There are no unusual items on page below to cause it to fail

So said Simon Robinson on Friday 26 November, 2004 at 8:15PM GMT.

Comment 137

Sorry - egg on my face here ref post 137. Embarrrissgly an html error on my behalf. Works fine on all levels in Firefox and Mozilla. It was IE working with my poor code that confused me and I was looking in CSS for fault.

So said Simon Robinson on Saturday 27 November, 2004 at 1:08PM GMT.

Comment 138

I have a glitch in IE6 on Win XP!! I have the exact same code as http://htmldog.com/articles/suckerfish/dropdowns/example/bones2.html yet my second-level menus pop out to the side of my top level menus in IE.

They work fine in Firefox 1.0. http://www.vector-networks.com/sf/ What's going on?!

So said Norm on Tuesday 30 November, 2004 at 11:42AM GMT.

Comment 139

as asked in #s 27 and 104, has anyone gotten the first level dropdown to also be horizontal? i am completely stumped.

So said Lisa on Tuesday 30 November, 2004 at 7:02PM GMT.

Comment 140

I am working on Mac 10.3 and do not have access to a pc at the moment. Could someone with a PC, with IE 5 and/or 6 and tell me if my horizontal menu works. I've heard it works on Firefox and I know it works Mac Safari 1.2.3. Also, I've noticed there are a lot of different javascript code here, could anyone point me to the response number with the best code to use for browser compatablitly. Great menu, by the way. It has been really helpful. Thanks Again
Here's the url: http://www.raw4life.com

So said Julie on Friday 3 December, 2004 at 8:16PM GMT.

Comment 141

In response to #141... Menu works fine in IE6 on XP (SP2) ;o)

So said Norm on Monday 6 December, 2004 at 10:56AM GMT.

Comment 142

Grandchild of Suckerfish?

I've been working on keyboard accessibility for the suckerfish menus, and I think I've got as far as I can. I've extended the javascript to enable propogation of the :focus pseudo-class up the menu (something you can't do in css) and pushed the no-javascript css as hard as i could to get the currently focussed menu item and the sub-menu below it displaying. The no-javascript behaviour is a little odd, but the keyboard accessibility with javascript on works well. Here's the bare bones 2-level example:

http://www.coinet.org.uk/bones2.html

here's the site I've been working on it for:
http://www.coinet.org.uk/

and here's the related thread on css-discuss:
http://archivist.incutio.com/viewlist/css-discuss/48607

I hope that's of help to everyone :-)

So said Matthew Carroll on Wednesday 8 December, 2004 at 6:09PM GMT.

Comment 143

Hi

I am new to CSS and Javascript and was wondering if or what modifications need to be made to use external CSS and Javascript files.

Basically I would like to move the CSS and Javascript out of the htm file and put them in their own files and then link to them in the htm file.

Thank you

So said Steve B on Tuesday 14 December, 2004 at 7:47PM GMT.

Comment 144

Regarding 134 (Time Delay) I would love to have found the answer but after many hours(!) have not. The pinnacle of my achievemnet was this line in the Javascript:
sfEls[i].onmouseout=function(){thisid=this.id;setTimeout('document.all[thisid].className=document.all[thisid].className.replace(new RegExp(" sfhover\\b"), "");',500)};}
It doesn't work.
Basically the big problem I found was that once you have to time delay something, you have to use Javascript's setTimeout() function, which is only executed when the delay expires, by which time the script has lost its scope and doesn't remember what 'this' referred to. My attempted workaround is probably rather feeble, but I thought it might prompt better brains than mine.

So said John D on Tuesday 14 December, 2004 at 9:03PM GMT.

Comment 145

Thanks so much for this walk through. Can't wait to use it for my personal site... though I don't think I'll have enough content to warrant so many levels of drop downs.

A question though. I am using the menu along with a javascript rollover. so I'm calling both. Well I guess in IE it calls the JS you provided automatically, and I'm having it call another script whenever a mouse hovers over the top level image. This works fine in IE6 and Firefox. But in IE5, it doesn't seem to work. When I hover over it, the image changes, and I see the link it is supposed to go to in the status bar. But I can't click on it. However I can click on the links that do end up dropping down. I just can't click on the top menu which is an image.

I know this isn't really a problem with your tutorial, but I'm a total noob and I've been going crazy over this. It's like a tease, it recognizes that the image is a link, but I just can't seem to click on it. Any help would be appreciated. Thanks.

So said DC on Thursday 16 December, 2004 at 9:54PM GMT.

Comment 146

143 Go to this page to figure out what you wanted to do: http://www.netmechanic.com/news/vol5/html_no3.htm

So said dc on Thursday 16 December, 2004 at 9:57PM GMT.

Comment 147

Has anyone gotten this to work with image rollovers as the top menu in IE 5.0? It works in every other browser I tried except IE 5.0. The drop down works, but the images itself are unclickable, though when hovered over, the link shows up in the status bar.

At first I thought it was some problem with the javascript rollover, so I replaced it with a pure CSS rollover: http://www.oreillynet.com/pub/a/javascript/2001/03/23/rollovers.html which works great by the way. However that didn't solve the problem.

After doing a bit of reading, it seems as though it may be a CSS support problem in IE5.0 (non-Mac). From someone in a forum "well, nothing based on CSS2 will ever work on ie5.0 so a different approach might be the only way, like doing it the old fashioned JS way."

However I don't really know what in this code is based on CSS2. The CSS rollover by itself works in IE5, and the drop downs by itself works in IE5. It seems that when putting them together, it'll fail to work in IE5.

So said dc on Friday 17 December, 2004 at 3:44PM GMT.

Comment 148

Some more reading, here's an example of what doesn't work in IE5.0.
http://www.uoguelph.ca/%7Estuartr/articles/cssrollovers.shtml

From what I know, it has something to do with the display: block?!

So said DC on Friday 17 December, 2004 at 3:52PM GMT.

Comment 149

Hi, I want to use this as a simple three level drop down horizontal Nav. menu.
I’m getting the list to show, no problem, is there an external script file I’m missing someplace? Or is the entire script in the header? The JS isn’t working at all.

Please advise, I’m not extremely savvy in the working of JS.

Thanks

So said Hondo on Friday 17 December, 2004 at 6:23PM GMT.

Comment 150

MUAHAHAHAHAHAH! Figured it out! Thought it loses some accessibility for others I suppose. I completely got rid of the images and only used the images in the stylesheet. And instead of putting an image into the a href, I got rid of it and placed a blank space. Now it works in IE5 too! Suhweeeeeet.

So said dc on Friday 17 December, 2004 at 8:06PM GMT.

Comment 151

Hondo, the javascript is only needed for IE browsers. You can either place it into the document's header, or reference it from the header to an external .js file. The javascript is already posted in the tutorial itself. You can see in their example, where to place it if you still don't know: http://www.htmldog.com/articles/suckerfish/dropdowns/example/

So said dc on Friday 17 December, 2004 at 8:08PM GMT.

Comment 152

First of all, this is an amazing solution to a complex situation. Thank you for taking the time to figure this out.

I am using this code on a site I am working on (that can be viewed in a folder on my site at http://www.lizbeidelman.com/ede/html ). I have gotten this to work in Firefox, Netscape, Safari, IE 6.0 and IE 5.0 for Mac (isn't that miraculous?).

I am still pretty much a CSS newbie, and I am having a problem. The "line-height" is set to 1 in to #nav, #nav ul selector, yet the line is still way thicker than the Suckerfish example. I want the line-height to be thin like the example, but it isn't getting that way. Does anyone know what I may be missing?

Thanks in advance if anyone has a solution!

So said Liz on Saturday 18 December, 2004 at 12:30AM GMT.

Comment 153

I have TWO menues on my site. When using IE (6.0) It seems that the JavaScript is only working with the first menu, the second menu shows no dropdowns. How can I modify the JavaScript so that it works with both menues?

Thanks.

So said Zuperfly on Monday 20 December, 2004 at 8:13PM GMT.

Comment 154

Hey, this has been mentioned a couple of times, but as far as i can tell there has been no fix. i am using a 2 column css layout with a header, it works fine so far in everything but IE. When i roll over the top level (the nav is in the header) the 2nd level displays below the content of the 2 columns. does anyone know how to fix this?

Thanks

So said Jen on Tuesday 21 December, 2004 at 4:54PM GMT.

Comment 155

Re 153
I had the same issue and just copied the javascript making hover1 and hover2. Works for me!

Also, I have reversed the order of a list and set the floats to right, so that my entire menu is right justified. So far, everything is wroking except for the ubiquitous Mac IE issues. In my case, the issue is that, since I want a static space between the menu items, I avoid setting a width to the li, and just set padding to left and right. This works great everywhere but Mac IE, where each li is on its own separate line... most irksome and would really like to figure this one out... If anybody else has had any luck with having the width of the li determined by the text within it, I would be most interested in hearing how!!

current test location: www,naturalwebs.com/vast_wip/NEWVAST

Thanks!!!

So said Justin on Tuesday 21 December, 2004 at 9:53PM GMT.

Comment 156

RE 112
If your seeing the same thing I am seeing - a really slow mouse movement at the submenus will cause the submenus to close, the issue is the border. You need to pull the submenus in just a touch so there isn't a gap between the menu and the sub menu.

Provided Example:
#nav li ul ul {
margin: -1.75em 0 0 14em;
}

What I use:
#nav li ul ul {
margin: -1.75em 0 0 13.75em;
}

R154
You need to use a z-index to put the drop downs above your columns.

#nav, #nav ul {
float: left;
[snip]
z-index: 100;
}

So said creuzer on Thursday 23 December, 2004 at 2:44PM GMT.

Comment 157

Answer for Ray Lynne (#101) and Henry (#114)...

The #nav li:hover, #nav li.sfhover for a background colour does work, as long as you don't have any other background colours specified on a:links.

eg if you have:
#nav li a:hover{
background-color:#FFF;
}
then that overrides the
#nav li:hover {
background-color:#FFF;
}
so the trick is to only specify background colours for the menu items in and not apply them to the links. This will make the background colour stay on the item as you use the drop down menu.
:0)

Really good drop-downs - luv em and have used them heaps! Thanks guys.

So said Rachie on Thursday 23 December, 2004 at 8:48PM GMT.

Comment 158

Hello,

I'm having a problem:

I'm working on a new layout, at smartmenu.com I found a menu but it isn't very nice when you change resolution etc. (submenu's appear on the wrong palce) --> http://www.31tigersqn.be/nieuw/index.php

Then I tried your script: http://www.31tigersqn.be/nieuw/index2.php and I wanted to make it more or less like the smartmenu. But now I'm having lots of trouble and I'm looking wozzy by all the css codes I've re-re-re-read.

Thisis what I have now

[code]#nav, #nav ul
{
float: center;
list-style: none;
line-height: 1;
font-weight: bold;
padding: 0;
text-align:center;
}

#nav a
{
display: block;
font-size: 10px;
text-decoration: none;
padding: 2px 5px;
text-align:center;
color:#fff;
}

#nav a:hover
{
background: transparant;
display: block;
font-size: 10px;
color: #ffcc00;
text-decoration: none;
padding: 2px 5px;
}

#nav li
{
float: left;
padding: 0;
background: transparant;
text-align:left;
}

#nav li ul
{
position: absolute;
left: -999em;
height: auto;
width: 20em;
w\idth: 19.9em;
font-weight: normal;
border-width: 1px;
margin: 0;
background: #000;
border:1px solid #ffcc00;
}

#nav li li
{
padding-right: 1em;
width: 19em;
w\idth: 18.9em;
background: transparant;
}

#nav li ul a
{
width: 18em;
w\idth: 17.9em;
text-align:left;
border:0px;
}

#nav li ul ul
{
margin: -1em 0 0 14em;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul
{
left: -999em;
color:#ffcc00;
text-align:left;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul
{
left: auto;
color:#ffcc00;
text-align:left;
border:1px solid #ffcc00;
}

#nav li:hover, #nav li.sfhover
{
background: #000;
color:#ffcc00;
}
[/code]

Here are the problems:

1. it doens't show submenu's in IE no more!

2. the first row of buttons needs to be in a yellow square when hovered (like the smartmenu)

3. the first row isn't centered in Firefox

4. the left and right border of my menu are gone (in IE and FF)

5. A submenu that has a furhter subsubmenu needs to have an arrow ( http://www.31tigersqn.be/nieuw/images/arrow.gif )

6. Also the submenu's are to large in width. I'm having problems with this. E.g. armament --> electronic warfare & countermeasures. When I make the list just a little bit smaller, that line takes 2 rows instead of the 1 now. But still there is a lot of space at the right of that string. Can't I make that smaller but keep it in 1 row??

Please mail me or something at webmaster[at]31tigersqn.be

So said Stefaan Ellebaut on Monday 27 December, 2004 at 1:19PM GMT.

Comment 159

Me again, made some progress, but still NOT WORKING in IE6/WIN, also NOT CENTERED. Further the arrows are inside the text, not to the right of it, and I think I'm using too much css codes and it can be made much easier...

http://www.31tigersqn.be/nieuw/index2.php
http://www.31tigersqn.be/nieuw/default.css

Please can someone help??

So said Stefaan Ellebaut on Monday 27 December, 2004 at 8:47PM GMT.

Comment 160

Brilliant System! Of course, I have a nightmare project that has me fighting all the different browers. Here's the test:

http://www.dropthatsock.com/template1.php

OK - TWO QUESTIONS.

One - I had to make the "nav" into a class instead of an id. So my stylesheet refers to .nav {blah blah blah} instead of #nav {blah blah blah} The reason i did this is that I have more than one which appear and disapear when you roll over certain headers.

So - this seems to muck up the magic javascript for Internet Explorer, my guess is this line:

document.getElementById("nav")

So can that javascript be altered in any way to get this to work in IE?

SECOND question - as much as I want to burn these browsers, my client requires that I get this to work on IE 5.2. It's not working of course! This may or may not be related to the same bug above?

So said Nick on Tuesday 28 December, 2004 at 11:34PM GMT.

Comment 161

For the people looking to slow the menu down a bit, the following javascript slowed it down a bit. It also gives the user a bit more control. Mind you this only works for IE6.0 +. : ( Kudos to my partner on this project who thought of it.

BTW, excellent script. I stumbled across it, and it works beautifuly. It's just what the doctor ordered.

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");

for (var i=0; i<sfEls.length; i++) {
sfEls[i].onclick=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseleave=function() {
for (var x=0; x < 100; x++)
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

So said Dave on Wednesday 29 December, 2004 at 2:48PM GMT.

Comment 162

Is there a way to make the border of the menu an image, rather than a solid line? I'm working on a site that uses dropdowns and we're currently using a bloated, clunky dreamweaver extension to create the dropdowns, and then pasting the code that it generates into the header for the site. I'd like to replace this with a more lightweight solution, and I love this technique but I can't use it unless I can use images for the borders.

Below is the URL of the site I'm working on, so you can see the menu I'm talking about.

So said Erik on Thursday 30 December, 2004 at 9:54PM GMT.

Comment 163

Click my name above to be taken to the site I'm referring to.

So said Erik on Thursday 30 December, 2004 at 9:57PM GMT.

Comment 164

Well, I had this working pretty well with the original Suckerfish dropdown code, but then I decided to be "prudent" and use Son of Suckerfish for greater compatibility. I'm not so great at CSS yet, and I must be braindead at this hour, but I can't figure out how to adjust the width of the parent items.

I'm using a background image in the LI tag of each item, and they're of different widths. The original code let me assign a different class to each (i.e. li#home) so I could assign the widths individually. How do I do that with the Son of Suckerfish code?

I know there must be an easy way, but I'm just blanking.

Thanks for your help!

So said Devon on Sunday 2 January, 2005 at 6:43AM GMT.

Comment 165

I really like the elegance and beauty of the (Sons of) Suckerfish Dropdowns!

Not being an expert, I have tweaked and hammered this menu system to work throughout my site, http://www.culshaw.info. I am quite happy with its performance and I plan on keeping it (as opposed to some DHTML solutions with which I have played).

There is just one thing that I have not been able to figure out on my own -- and I am going insane trying to find a solution. At the moment, each of my pages within my site has the entire menu system "embedded" within it. This means that any change to a single menu item requires me to update all of the pages on my site (so that the menu stays consistent regardless of which page the viewer is currently viewing). Is there anyway to seperate out all of the menu elements of each page into a single file that is referenced by all of the pages that uses the menu? I guess what I am after is a similar behaviour as when you can create one CSS file that all pages can reference. For the Suckerfish, it probably means more javascript to make something like this happen? To ensure that all links are relative to each page linked? I am totally clueless...

Any info as to whether this is possible would be *very* much appreciated. Please e-mail me if you need more explaination as to what I am trying to find a solution.

Thanks,

-john

So said John Culshaw on Tuesday 4 January, 2005 at 10:39AM GMT.

Comment 166

I've got the dropdown menu working nicely in IE now, but it's still messing up in Firefox and Netscape 7. Both of these other browers also have a display issue wherein there's a blank space just above the menu, which is throwing off the rest of the layout. The dropdowns themselves are crunching down into a single line instead of multiple line items. It does this whether or not there's a background image behind the menu items.

You can take a look here (a site I'm working on for a client): www.asampuc.org/workingmenu.html

If any kind soul can help me figure this out, I'd be very grateful!

Cheers,

Devon

BTW... I discovered a couple of answers to vexing issues that I might as well spell out here, for other people who may come later.

1. The dropdowns won't work inside a TABLE (at least, I could never get them to in IE6).

2. To adjust the width of the UL headers, look for this line: #nav li ul a
If you need variable widths for your header items, assign a different class to each, like this:

#nav li.welcome ul a {
width: 96px;
w\idth: 96px;
}

#nav li.region ul a {
width: 149px;
w\idth: 149px;
}

#nav li.leader ul a {
width: 151px;
w\idth: 151px;
}

Then in the HTML, put each class designation in its respective LI tag:

Hope that helps.

So said Devon on Thursday 6 January, 2005 at 1:07AM GMT.

Comment 167

Ack. I gave you the wrong URI in the post above. It should be:

http://www.asampuc.org/workingindex.html

Sorry about that.

So said Devon on Thursday 6 January, 2005 at 1:10AM GMT.

Comment 168

man, this is sweet, I wish it would work in Firefox.

So said tim on Friday 7 January, 2005 at 9:59PM GMT.

Comment 169

Dunno what you mean about firefox tim.

It works fine for me...

PS extremely nice, I was considering building a meny just with the hover on links (ie on hovering the link, not the li, the sub meny would appear.)

this seems fine for my target audience...

I've built a text version CSS file for people with older browser anyway!

So said James Dodd on Wednesday 12 January, 2005 at 2:50AM GMT.

Comment 170

Thank you, thank you, thank you to Lawrence Akka (posts # 49 & 50), Anatoly (posts # 124 & 125) , and Matthew Carroll (post #142). I have been able to combine each of your fixes to come up with a fully functional, and accessable, menu. I have tested the end result on both Windows and Mac boxes (OS 9.2.2 and OS X 10.3.7) and it works great.

In Windows, I tested using IE 6.0 (I haven't been able to find a station with an earlier version), Netscape 7.0, 7.1, 7.2, Mozilla 1.7.2, Firefox 0.9.3, Opera 6.0.6, 7.54. The only browser that did not work was Opera 6.0.6. The mouseover effect works on the root level menu items for both mousing and accessability (control, down arrow), but the drop-downs don't work.

On a Mac (OS 9.2.2) I tested using IE 5.0, 5.1.7, Netscape 6.0.1, 7.0, Opera 6.0.3. It worked in all browsers except Netscape 6.0.1 and Opera 6.0.3. When I mouseover in Netscape, I can see the drop-down text appear, but there is no background color. The accessability feature does not work. In Opera, only the root level mouseover effect works with both mouseovers and accessability features.

On a Mac (OS X 10.3.7) I tested using IE 5.2.3, Netscape 7.2, Safari 1.2.4, Firefox 1.0, and Opera 7.54. It worked in IE, Safari, and Opera. I could not figure out how to use the accessability feature in Netscape or Firefox. I tried several key combinations, but the best I could do in both was toggle between the address bar and the browser window.

I would appreciate it if someone could test with Windows IE5.x, and Mac OS X Netscape and Firefox (or at least tell me how to use accessablility in these browsers). Here is the address for my test page:

http://www.creighton.edu/~pet04785/suckerfish_test/suckerfish-3.html

Thanks again,

Paul

So said Paul Trivilino on Wednesday 12 January, 2005 at 6:14PM GMT.

Comment 171

Good news. By using the 'accesskey' attribute in my links, I am able to get around the link tabbing problem in Netscape 7.2 and Firefox 1.0. Granted, this doesn't change the link tabbing problem in these browsers, but a work around is a work around.

Paul

So said Paul Trivilino on Wednesday 12 January, 2005 at 10:03PM GMT.

Comment 172

Paul (#170), nice one :-), works fine from the keyboard in Firefox1.0+, Safari, Opera 8.0alpha on OSX. For Firefox, you have to add [code]user_pref("accessibility.tabfocus", 7);[/code] to the user,js file

So said Philippe on Thursday 13 January, 2005 at 7:28AM GMT.

Comment 173

Philippe,

I don't know JavaScript, where would I add this additional code to the .js file?

Paul

So said Paul Trivilino on Thursday 13 January, 2005 at 4:39PM GMT.

Comment 174

I saw where someone commented on number 134, and I am experiencing the same problem. Can someone please help or point me to the answer. I'm a novice, but I really need to fix this issue and need assistance.

Number 134 comment says,

one other problem in IE and Mozilla is that when you have a flash movie just below the buttons, the flash movie will order the drop down menu back behind it so you won't see the links on the menu.

So said jeff on Friday 14 January, 2005 at 3:58AM GMT.

Comment 175

Jeff,

I believe your answer can be found in post #121.

Paul

So said Paul Trivilino on Friday 14 January, 2005 at 5:38PM GMT.

Comment 176

I have read your articles with interest and have learned a lot about CSS by working through the examples. I have the example working well with IE 6, Mozilla 1.7 and Firefox 1.0, these being what I have to test with. To see it, go to http://www.RichardLindberg.com/Suckerfish.asp I added a 5th level. I also have the older version at http://www.RichardLindberg.com

So said Richard on Tuesday 18 January, 2005 at 3:14AM GMT.

Comment 177

Hi all, I've been reading through these blog comments quite a bit today trying to implement SF-DDs into my site. I have gotten it to work satisfactorily (though not perfectly)

I'm also pretty new to this stuff but have certainly enjoyed playing around with it (despite a few frustrating moments).

I do have a couple of comments first, in regards to devon's comment in post #166.1 he said that it cant be put in tables in IE6. I got it to work. I didnt do anything special though, I just put it in and made sure I left my tr and td tags in there.

My last item is a request. I've only been able to test in IE6 and Firefox 1.0 seeing as that is all I have available to me. If you have the time and browser capabilities, could you please take a look and see if it looks okay. There is a list in the "content" part that has a brute version of the list.

the address is : http://www.reginarescuemission.org/mattoid/menutest.php

Please email me with any comments at kakerjak@hotmail.com

Thank you kindly!

So said Jon on Tuesday 18 January, 2005 at 10:05PM GMT.

Comment 178

I've got a solution to a problem (as seen in post #134 and #174), and a question of my own. Hopefully by offering this tidbit, I might get a bite to assist with my problem. Not a virgin sacrifice, I know...but it's worth a shot.

The problem with Flash is that, in most any case using DHTML and layers, Flash doesn't recognize that it belongs on the bottom. On the contrary, it believes it's more important than anything ("how conceited of Macromedia," a friend of mine said about this issue once) and sticks itself above all layers.

However, there's a fix to it that has nothing to do with your stylesheets.