Even after Dan pointed me to the suckerfish dropdown, I still kept looking for pure css drop-downs. One big problem I have is that the menu is massive- 4 levels deep (so I have a hidden link for people with screen-readers to skip past the menu). I think it would be a Good Thing if my menu could be navigated with the keyboard OR mouse and don't need click events to show sub-menus. I don't know what I need for this (focus? And IE doesn't recognise focus?) Empty anchors for the parent uls should ensure that IE will honour link:hover on everything. (or is that a bad idea?) I'm looking at trying Stu Nicholl's menu here, which so far here at the office works on FF1.5 and 2, IE 6 and 7, Opera 9.23 (I'll test Konqueror at home and that'll have to work for Safari). It has no keyboard option, not sure how to ensure that. I'd like to know, though, if Nicholl's code here has any problems which are obvious to long-time website developers I should be aware of. I'm already playing with this menu but I won't notice something's up unless it's incredibly obvious, because I'm still too new to CSS (I even had a sentence wrap when the text colour was blue, and unwrap when the colour was white-- NO other changes!!! I don't know enough to figure out why).
Stu's code uses conditional comments to hide tables that fake the dropdown menu. I hate to say it though, but you're not going to be able to get a pure CSS dropdown menu that's 100% keyboard accessible out of the box due to two browsers not properly implementing :active and :focus - Internet Explorer and Opera (though Opera's far better than IE in that regard, and while it implements it, it does so differently). The best you can do is to create an index page for each dropdown section on your site (which you should be doing anyway) if each section points to a separate directory on your site, then instead of using the Suckerfish script (the JavaScript file) use the csshover.htc file (I'm not at home so I can't get you the link directly) and add :active and :focus to your stylesheet (where the :hover psuedo-property goes), then test in the browsers. Though I will toss in this disclaimer. :focus should work properly for Opera in cases like this.
Peterned http://www.xs4all.nl/~peterned/csshover.html I suggest using csshover2.htc http://www.xs4all.nl/~peterned/htc/csshover2.htc because it implements :focus in addition to :hover and :active... and while larger than suckerfish it lets you use it on any elements EXACTLY as if you were in a browser that actually supported it (instead of wasting an extra class) Another reason I love it is you just tack this into your screen/projection CSS * html body { behavior:url(csshover2.htc); } and you're done. 99.9% of the time it gets you the same mouseover and keyboard functionality as RoW. Now if just :active and :focus cascaded down to child elements properly like :hover does... because right now li ul { display:none; } li:active ul, li:focus ul { display:block; } does exactly two things in all browsers - and Jack left town.
This was confusing to me, an index for each section? The situation here is that I'm redoing an existing page that's limping along-- and right now it's built in Perl-- the header and navbar etc are loaded once into the browser and all the page links that actually go somewhere (except HOME) are sent to a perl script that retrieves only the body/text part of the page. HOME goes directly to the parent url. However if I can't get :focus and :active to continue down through the menu, then it doesn't do any good anyway, if I understod correctly. (Unless what deathshadow says simply means I have to re-add the css code for each sub-level for focus and active.) The boss has decided that customers are all going to go to different parts of the website to find things, and everyone uses a different method, so he wants every way they choose to be right. That is, this is an insurance site, and if someone wants a quick quote they can either click the button saying "quote" or they can navigate through this big menu towards the THING they want insured, which of course has several sub-parts including terms&conditions pages for each SUB-THING. This is why my menu has 4 levels, so if I'm going to get keyboard navigation working in CSS, it needs to keep going. Of course, if CSS is off then keyboard automatically works. I also wanted this to still end up as simple as possible (ha) because litte things that shouldn't cause problems do and I don't see why, not in books or on tips sites.
By section I mean just that, section. Take CNN.com for example. You have various sections, like top stories, world news, entertainment, sports, politics, and so on. If you were to use that kind of structure and then build a dropdown menu around that, each section would have its own group of pages, and thus should have its own index (or landing) page. Of course, I'm speaking generally here so that others can learn from this in the future.
Oh oh, okay, we do have that. You mean that if for some reason someone can't or doesn't want to follow the drop-down, they can still just click the topmost tab on the menu bar and get to a page with further links to the sub-sections. And yeah I have run into Pete's site a few times, I will indeed use it. If/When I get Stu's menu fully working as my version, I will post it here (in the forum, not the thread), with his permission. And thank youse very much, this was needed.
^ Heh, that's who I was talking about, Nine. : ) I've got it working for everyone but IE6 and that's the fvcking tables which I need to be more careful with as I have one menu layer further than Stu. So far I haven't used any scripts, as I've rejiggered the menu so that everything that should change on :hover is actually a link anyway. IE obeys. I know it doesn't see the brat sign > that Stu uses, but that's still not a problem either. And, as far as I could tell, the main problem with focus with IE is that it treats it like active. So for every :hover, I also gave an identical :focus and :active. I didn't know if IE could do that without anything being stated for :active. focus, hover and active are identical in my version. I'm not using his IE5 hacks, and we have a link to IE6, FF2 and Opera upgrades at the bottom of the page. The .05% of customers (according to our stats) who use Windows 95 are just outta luck. Guess they get to upgrade OSes.