Grow your CSS skills. Land your dream job.

dropdown menu and transitioning with css3

  • # July 3, 2012 at 11:07 am

    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?

    # July 3, 2012 at 2:29 pm

    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…

    # July 3, 2012 at 3:22 pm

    Have you considered transitioning heights instead?

    # July 3, 2012 at 3:25 pm

    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.

    # July 3, 2012 at 3:39 pm

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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".