GOOD dropdown menu!! (Full Version)

All Forums >> [Web Development] >> General Web Development



Message


Tailslide -> GOOD dropdown menu!! (9/16/2009 2:21:58)

Up to now dropdown menus have been a bit of a minefield.

Either they're CSS-only and probably don't work in IE6 or they're Javascripted and won't work properly without scripting on.

Problems with both of these methods also include inaccessibility - i.e. you often can't get at the sub-menus unless you're using a mouse which is no good at all.

There are a couple of exceptions to this rule which use JS to enhance a CSS menu and are accessible (but they still only act as top level menus in IE6(.

BUT... Ta da....! Now there's a CSS menu that works without hacks or scripting, works in IE6 and is accessible without a mouse.

Here you go: http://www.cssplay.co.uk/menus/new-dropdown.html




ou812 -> RE: GOOD dropdown menu!! (9/16/2009 9:47:11)

I was excited to read this, having just gone through trying to obtain one that would work all around. I quickly took a look at it, in FireFox 2.x, and it didn't display correctly for that? [&o]Weird. Checked in IE and it did though.




Tailslide -> RE: GOOD dropdown menu!! (9/16/2009 9:49:05)

Hmmm - it's fine in FF 3.

FF2 was a bit buggy actually. I typically get clearance problems with it. What's wrong with the menu in FF 2 - it'd be worth contacting them about - might be a simple way around it.




womble -> RE: GOOD dropdown menu!! (9/16/2009 10:29:51)

Oooooh! That's nice Tail! [:)] Well, demo #1 is anyway. On the second demo though, "Method Two - Using click to open sub menus" although a click did indeed open the sub-menu list, moving the mouse off the main menu item resulted in the sub-menu closing on Chrome, though Firefox and Opera were playing nicely.




treetopsranch -> RE: GOOD dropdown menu!! (9/16/2009 10:53:18)

Seems to be limited to one drop down level only but it works good in FF3 and IE8




ou812 -> RE: GOOD dropdown menu!! (9/16/2009 10:53:54)

Still haven't moved to FF3 since the first time I did many of my extensions didn't work and then it was a pain to go back to 2. I like how 2 is working and will go to 3.x, but need to make time to make sure my extensions are happy.

Here's a look at what I'm seeing:

[image]local://upfiles/4310/8CBC1B0A78EA455F91998879A33E9E64.jpg[/image]




treetopsranch -> RE: GOOD dropdown menu!! (9/16/2009 16:36:41)

OUCH! [sm=yikes.gif]




Donkey -> RE: GOOD dropdown menu!! (9/17/2009 7:01:15)

I'm just using a vertical version of this one:
GRC drop down Menu
Which has been around for over a year.

The developer has put it in the public domain, and although the css and html on the above site don't validate, it was relatively painless to work through the code and make it valid.

With a bit of tweaking I've got it to work OK in FF3.5, Safari, Chrome, Opera, IE8(without conditional style sheet), IE7 and IE6 ( with conditional style sheets). It works after a fashion in IE5.5 but looks awful. As I don't get many visitors using IE5.5 or less I haven't bothered with that awful excuse for a browser but I'm sure another conditional style sheet and a few tweaks would make it look more respectable.




Tailslide -> RE: GOOD dropdown menu!! (9/17/2009 7:41:19)

Only problem with that one Donkey is the keyboard accessibility thing.




Donkey -> RE: GOOD dropdown menu!! (9/17/2009 9:37:37)

You have to add "focus" and "active".

I thought Access Keys were frowned on nowadays because they can cause more problems than they solve. e.g. if someone has already assigned a particular key combination on their computer to another function.




Tailslide -> RE: GOOD dropdown menu!! (9/17/2009 13:29:29)

Yes access keys are no good at all really - but you should ideally be able to navigate to all links including sub-menus using tab (on PCs).




smcfarland -> RE: GOOD dropdown menu!! (9/20/2009 13:24:48)

I was revamping a site and redid the JS drop down with CSS in EW. This is an awesome tutorial, and it works fine in all browsers, thus far.
http://expression.microsoft.com/en-us/dd279540.aspx




treetopsranch -> RE: GOOD dropdown menu!! (9/20/2009 17:34:03)

smcfarland...keep in mind that that menu you like does not work with IE6. But I like it and will probably be using it when the usage of IE6 drops to less than 10%.




smcfarland -> RE: GOOD dropdown menu!! (9/20/2009 19:22:35)

Very valid argument. While the latest stats say it is at about 14% for IE6, the site I used it for gets about 1%, so it was an ok move for me. However, I do not solely rely on the drop downs, they are there for quick reference.

As an aside, this is also helpful to have, if you are using EW:
http://expression.microsoft.com/en-us/dd565874.aspx




treetopsranch -> RE: GOOD dropdown menu!! (9/20/2009 20:07:31)

Yes that is the "Super Preview" that lets you see your web in many browsers. However, it also has it's limitations as it will not run scripts.




Tailslide -> RE: GOOD dropdown menu!! (9/21/2009 1:51:07)

Also - does it work for keyboard users?




Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
6.445313E-02