dropdown menu and transitioning with css3

[shamai]

hello people!
haven’t been here in a while… i left the world of html to work on something else and now i have to remember what a p tag is….EEEK!

So I have a drop down menu and I wanted to use css to transition it in and out nicely when it pops down.
i learned that transitions don’t work on the display property. It must be block.
So instead I used opacity as the transition property and I made it have a position of absolute and moved it way off screen when it is not hovered on. (left: -9999px;)

Now it transitions in nicely because it moves back into place via left:0; and then i use transition: opacity 10s; and the opacity looks good on hover.

But transitioning out does not have the transition because before the opacity has a chance to change back to 0. it moves back to -9999px before you can see the change.

what can I do?
i guess i could use jquery and test to see if opacity is 0 and if it is I could move it back to -9999px…..would that work?

[shamai]

nobody?
no answers?

is it bad if I set the div to visibility:hidden; instead of moving it off screen 9000 pixels? you still won’t see it either way…

[Paulie_D]

Have you considered transitioning heights instead?

[shamai]

no i want it to fade in. so opacity was what wanted to transition. but the absolute positioning moves to the left too fast for you to see the transition.
and i can’t use visibility instead of moving it to the left because its really still there and if you hover on where it is, it shows.

[shamai]

i think i got it i used visibility and opacity and set them to have transitions and that seems to work nicely.

[Author]

Posts