A CSS flyout menu that works in Firefox AND IE
Published April 3rd, 2007 in Design.I thought it would be easy to find. All I needed was some CSS that would generate a nice vertical flyout menu for a site I’m developing. Turns out that’s not such an easy request. I googled around and found several different menu systems that looked great in Firefox, and didn’t work at all in IE. I was about to give up (which I hate to do) when I found the ADxMenu via a post in Veerle’s blog. Not only does Aleksandar provide the CSS for 4 different menu layouts, but he also includes some really thorough documentation. There is a small script that’s required as well, to address the gaps in IE, but the end result is a menu with complete cross-browser functionality.
[sigh of relief…]
Thanks for your comments on the previous post Char and David.
Start with the building blocks of educationg with kids learning games. Making education fun is a great way to help your child work towards and eventual college education. Everyone could use a little bit of math help early on and there are lots of online activities available.
You might also like:
Did you like this post? How about subscribing in a reader or via e-mail.
12 Responses to “A CSS flyout menu that works in Firefox AND IE”
- 1 Pingback on Sep 5th, 2007 at 11:02 pm
I can’t wait to see it! It is going to be awesome, I just know it.
Thanks for sharing this one Randa. I have been using an add-in for Dreamweaver but this looks good.
Wow thanks for sharing, I’ve been looking for that for a long time. I found a danish site that had something like that. Works in the same way.
If you ever wanted to go nuts with menus, or just about any other kind of “effect” linking, you HAVE to check out Stu Nicholls’ CSSPlay at http://www.cssplay.co.uk/menus/
Thanks for sharing! This might be quiet amazing considering the lack of my artistic skills
Have gotten tired of FF and IE differences. Thanks for sharing this one!
Stu Nichols’ CSS flyouts get my vote too. The implementation of these pure CSS menus and the IE fix are sheer genius.
I’m also a great fan of Slidy and S5 both pure HTML/CSS multi-media presentations .
Stu Nicholls site is a fantastic resource. CSS is such a nice way to implement a menu system, but with the inconsistencies of browsers (particularly IE) it’s such a headache.
Thanks for pointing out this solution, it saves us web designers a lot of migraines!
So true Rob.
I get a migraine just thinking about the migraines IE-6 gives me! :-()
But, I’ve learned that after a while of dealing with IE-6 that one can begin to do layouts that take IE-6’s quirks out of the picture.
One simple example, IE-6’s doubling of margins when a margin and float are in the same direction. Instead of using margin, just use padding and the problem goes away.
Of course that doesn’t work all the time but I’ve found that with some planning and understanding of IE-6’s problems, complex layouts can be had without a single “hack”.
But then again, when all else fails, the “hack” I like the best is to put an underscore in front of a property name, which then only IE-6 will see. That I use only for testing though, for the final layout I’ll move all the IE-6 only properties and values to an IE-6 only style sheet and then Conditional Comment it in.
Good thinking Craig.
I try to avoid using too many hacks, but sometimes it’s unavoidable. I use conditional comments to load a transparent PNG image hack for IE6 and IE5.5.
However, another thing I like to do is reset CSS files. I wrote a quick tutorial about it on my site. You might find it useful.
Verlee always come up with great things! I wish she wrote more of her awesome tutorials.