PDA

View Full Version : Best pure CSS, no image dropdown menus that also work in IE6?



Nyk
Sep 16th, 2010, 04:33 PM
Preferably ones that don't use javascript, either.

Thank you!

Doctor_Varney
Sep 16th, 2010, 04:36 PM
http://www.cssplay.co.uk/menus/snowstorm.html

Dr. V

Pepineros
Sep 16th, 2010, 04:39 PM
To the best of my knowledge, for dropdown menus you'll need a :hover tag on something other than an anchor element, which is impossible in IE6. Whether you make the dropdown using display:none or using margin:-1000px, you will need to put a :hover attr on a list item, which is not supported by IE6. A tiny bit of Javascript (into the head of your page) can accommodate for this though.

SB65
Sep 16th, 2010, 04:52 PM
IE6 is a problem as Pepineros says. Someone posted a non javascript solution for IE6 in this thread (http://codingforums.com/showthread.php?t=204073) a week or so ago, but it relies on a bit too much additional markup for my liking.

For the IE6 :hover issue I like the whatever:hover (http://www.xs4all.nl/~peterned/csshover.html) script (which uses javascript via IE "behavior").

For a simple horizontal drop down menu try son of suckerfish (http://htmldog.com/articles/suckerfish/dropdowns/) or here's a very simple menu with explanation (http://www.simonbattersby.com/blog/css-horizontal-menu-with-dropdowns/)

Nyk
Sep 16th, 2010, 05:02 PM
Thank you for all of the links so far!

I love the Snowstorm menu, but it appears it's not free to use? A donation is required? It's pretty much exactly what I'm looking for if it were free.

The very simple menu you posted, SB65, is also nice. Do they have a multi-level version?

I suppose I don't mind using an IE6 fix. The important part is that the menu functions well and doesn't close too quickly if the person accidentally hovers 1mm too far.

Any additional examples? Something like Snowstorm perhaps that is free?

Nyk
Sep 17th, 2010, 03:20 AM
Sorry to seem impatient, but I am in a bit of a hurry with this.

Thank you!

DrDOS
Sep 17th, 2010, 04:00 AM
I've been writing and testing drop down menus and I have yet to find one that uses hover and works in IE 6.

But here's one that uses straightforward javascript and is easy to code, and it works all the way from IE 5.5 on win95 to IE 8 on XP, haven't tested it on IE 7 or 9, and has no problems with any of the -moz browsers. The style can be a little tricky on IE, but what's to expect!

http://ronbeau.50webs.com/Latest/

Welcome to my testing site.

Nyk
Sep 17th, 2010, 05:04 AM
Thanks, but after seeing that I think I need to use hover and then a fix for IE6. I want the entire background to be selected and not just the text.

Can anyone confirm whether or not that Snowstorm menu costs money? Am I reading it wrong?

Thank you.

Pepineros
Sep 17th, 2010, 12:16 PM
You're right, the Snowstorm menu requires a donation, both when getting it on a personal and a commercial site. If this is work for a client though, you might consider just donating if this menu is exactly what you're looking for. cssplay.com is a pretty well-known website and Stu Nicholls seems a pretty good coder, and like he says in the description of the Snowstorm menu, it's pretty easy to blow up the whole menu with a tiny mistake.

Doctor_Varney
Sep 17th, 2010, 07:34 PM
Thank you for all of the links so far!

I love the Snowstorm menu, but it appears it's not free to use? A donation is required? It's pretty much exactly what I'm looking for if it were free.

Any additional examples? Something like Snowstorm perhaps that is free?

I would be inclined to read the Nicholls code for now and just learn from it. Donation isn't the same as 'paying for', it's a voluntary gesture. Drop him whatever you can afford, or wait until you can afford something more generous. Unless you're making money out of web designing, in which case, we should be generous to each other.

Dr. V

Nyk
Sep 18th, 2010, 10:11 AM
Well, it says donations are required, so I don't know if I would call it voluntary.

I tried out the menu anyway and it appears that it doesn't stay above other elements on the page.

Are there any similar flyout menus w/out the hassle of donations/asking for permission/etc.?

SB65
Sep 18th, 2010, 10:19 AM
I think the son of suckerfish menu will do what you want. The demo doesn't look as nice as the cssplay example but it does the trick - down to four levels if you need it.

EDIT: Or have a look at this (http://simonbattersby.com/test/test_horizmenu.htm) if you only need three levels.

Nyk
Sep 18th, 2010, 11:09 AM
Neither of those can be navigated w/ the keyboard, though, which I would prefer if at all possible. :(

Hmm, I don't know. It's so hard to find what I want. It gets tiring after awhile.

Nyk
Sep 18th, 2010, 11:32 AM
Are there any nice customized versions of suckerfish that I can use?

effpeetee
Sep 18th, 2010, 01:45 PM
There are some useful sites here (http://www.exitfegs.co.uk/Sources.html).
Use the search facility. Single words ae often best.
Frank.

Nyk
Sep 19th, 2010, 07:23 AM
SB65:

I am trying to use that orange dropdown menu you linked to, but for some reason the dropdown always opens in an inline menu when hovering over something. Like the entire thing is limited in height, so even when the dropdown is activated it tries staying within those boundaries.

Strange.

And w/ the Suckerfish menu, the dropdown doesn't go over the top of everything else on the page; it goes behind one of my images.

DrDOS
Sep 19th, 2010, 08:02 AM
SB65]

And w/ the Suckerfish menu, the dropdown doesn't go over the top of everything else on the page; it goes behind one of my images.
That's most probably a conflict of z-indexes. Make sure that the menu has a higher index than anything near it.

SB65
Sep 19th, 2010, 09:41 AM
SB65:

I am trying to use that orange dropdown menu you linked to, but for some reason the dropdown always opens in an inline menu when hovering over something. Like the entire thing is limited in height, so even when the dropdown is activated it tries staying within those boundaries.


Do you mean on the page linked to, or on your own page? If the former, in what browser? I cannot recreate the problem in IE6/7/8, FF, Chrome or Opera. If the latter, can you give a link to your page or post the code?

Nyk
Sep 20th, 2010, 11:22 AM
Alright, I got everything sorted out.

I would like to find a tabbable dropdown menu (i.e. able to be navigated through the keyboard) similar to Snowstorm.

Or even better, a dropdown menu that can be navigated w/ the keyboard's arrow keys.

Are there any free ones out there?