CSS 3 Transitions on the display: property

Question

Hey All,

I'm currently designing a kind of css 'mega dropdown' menu - basically a normall css-only dropdown menu but one which contains different types of content. An example can be found at http://www.westore.it/testbed/about/

My question is more of a 'can you think of a way around this problem' sort of thing. At the moment, it appears that CSS3 Transitions don't apply to the 'display' property. i.e. you can't do any sort of transition from display: hidden; to display: block (or any combination).

Can anyone think of a way for the second-tier menu from the above example to 'fade in' when someone hovers over one of the top level menu items? I'm aware that you can use transitions on the visibility: property, but I can't think of a way to utilise that effectively.

I've also tried using height but that just failed miserably.

I'm also aware that it's trivial to achieve this using javascript, but I wanted to challenge myself to use just CSS and I think I'm coming up a little short.

All and any suggestions most welcome.

Answer 1

Instead of using display you could store the element 'off-screen' until you needed it, then set its position to where you want it and transform it at the same time. This brings up a whole host of other design issues though, so ymmv. You probably wouldn't want to use display anyway, as you'd want the content to be accessible to screen readers, which for the most part try to obey rules for visibility - i.e., if it shouldn't be visible to the eye, it won't show up as content to the agent.

Answer 2

Does the CSS transition work if you apply it to the opacity property, rather than display?

Answer 3

I think you should use transition on opacity or height, like thi:

.dropdown {
  transition-property: height, opacity;
  display: none;
}

.dropdown:hover {
  height: 100%;
  opacity: 1.0;
  display: block;
}

I don't know if it works

Answer 4

You need to hide the element by other means in order to get this to work. I had the same issue on this page:

http://endlessfeast.tv/episodes.php

I accomplished the effect by positioning both div's absolutely and setting the hidden one to opacity: 0.

If you even toggle the display element from none to block your transition on other elements will not occur.

To work around this always allow the element to be display block but hide the element by adjusting any of these means:

1. Set the height to 0.
2. Set the opacity to 0.
3. Position the element outside of the frame of another element that has overflow: hidden.

There are likely more solutions but you cannot perform a transition if you toggle the element to display none. For example, you may attempt to try something like this:

div { display: none; -webkit-transition: opacity 1s ease-out; opacity: 0; }
div.active { opacity: 1; display: block; }

But that will NOT work. From my experience, I have found this to do nothing :-(

So you will always need to keep the element display block. But you could get around it by doing something like this:

div { display: block; -webkit-transition: opacity 1s ease-out; opacity: 0; height: 0; overflow: hidden; }
div.active { opacity: 1; height: auto; }