The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS dropdown menu and transitioning with css3

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #38753

    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?


    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…


    Have you considered transitioning heights instead?


    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.


    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)
  • The forum ‘CSS’ is closed to new topics and replies.