Hi everyone, I have made a little script here: http://jsfiddle.net/fortninja/pB62j/43/ If you can't see what the error is, this demonstrates it: http://www.screencast.com/t/hlZ7nVvrg8n Besides some smoothness issues (easy fix), it works in firefox--menuOut() is only called when I hover over the div, not the elements within it. Here is a silent video explaining that (videos make everything easier): http://screencast.com/t/KxI7Xzvj5w IE does the same thing as chrome (I expected it to totally break ): http://screencast.com/t/3mzj2Eomeh4 So why aren't chrome and IE working? How does this work differently for firefox, and how can I make it work the same in chrome and IE? Code here: http://jsfiddle.net/fortninja/pB62j/44/ Thanks, -Tony
The works in the original post will only work until 6/20/13, so I haven't got all year to wait Anyone? Thanks, -Tony
Uhm, I'm stuck wondering why the blue blazes you'd be using javascript to do CSS' job. For some garbage animation that's either annoying, or CSS transition's job? You're likely not getting an answer because you're doing it all wrong. For what you have there, Javascript shouldn't even be INVOLVED unless you REALLY need that IE6 support or the goofy animation in IE8/lower. ... and ease up on all the browser specific garbage. Really I'd just axe the "broken in every browser" animation and just make it a normal CSS drop-down; actually, that's not true. I don't DO dropdowns anymore since I went responsive, as they usually take a dump all over accessibility. (Always have really...) - but if I WERE to have one, just make it an instant-on CSS only menu or at the most have it fade in via opacity and that's it. Anything more is just code bloat that gets in the way of people using the page. I'd probably also NOT bold on hover since it makes the layout jump around in an annoying manner, and the shrink-to-fit dropdown is a bit... broken. I'll take a stab at a rewrite though -- be interesting to do something I wouldn't do on a website.
I didn't know it was actually possible to make a pure css dropdown. I'm going to look into that. Thanks for the thorough answer! -Tony
Ok, retaining the animations and making some wild guesses about what you were trying to do, and taking a few stylistic liberties as well... http://www.cutcodedown.com/for_others/tonyBrar/template.html As with all my examples the directory: http://www.cutcodedown.com/for_others/tonyBrar/ ... is wide open for easy access to the gooey bits and pieces. (feel free to look around) Works perfect IE 10 and all modern browsers, in IE9 it lacks the transitions but still works. in IE 7 and 8 it loses the rounded corners but is still functional. IE6 support is a bit wonky, I did as much as I felt was worth the effort. Notice I plugged in all the anchors -- it helps to have full/proper markup BEFORE you start applying style. Something like the anchors in the dropdown may feel unnecessary before you start, but getting it to work properly without all the markup is most always a disaster. Likewise I made the parent element a sibling to the UL as an anchor, so you can have a "there's no such thing as hover on mobile" fallback link... also handy since you can't :active or :focus a DIV, meaning keyboard navigators also only get that topmost anchor! One suck-asstastic part though is the height slide on the dropdown. For some goofy reason you can't do a CSS3 transition to height:auto, so you have to set the height to a fixed size on the hover state. That can be a deal-breaker in a lot of cases which is why I would just do the opacity fade in/out and forget any positioning or height tricks -- but if you are CERTAIN there's only going to be a certain number of elements in the dropdown, you can do it. Also not wild about having to use PX fonts, but with FF being a retard about adding up EM's the same way twice in a row, and the avatar image being a px height, %/em just isn't practical -- but again, that's why I stopped doing stuff like this on websites years ago. -- edit -- side note -- not surprising you didn't know about pureCSS dropdowns; SO MANY dive for the javascript to do the simplest of things these days, it's become standard practice or assumed you need scripting to do it. See 80%+ of what people do with jQuery which these days is obsolete/pointless code bloat.
Thank you so much! I'll try to learn some more and make my own menu, but for now, I suppose it's good manners to ask if I can use yours. So can I use yours temporarily? Thanks for going to the effort of rewriting my ugly, messy script. Really helpful and an eye-opener! Thanks, -Tony