How do I apply CSS Transition to my responsive menu?


Tags: css,responsive-design,css-transitions

Problem :

I created a small responsive menu

http://jsfiddle.net/8gApb/1/

It works exactly like I want it too.

However, I would like the menu to actually transition out instead of just happening immediately.

Ive tried adding

    #nav:target > ul
    {
        display: block;
        transition: display 2s linear;

    }

and that didnt work. I also tried

    #nav:not( :target ) > a:first-of-type,
    #nav:target > a:last-of-type
    {
        display: inline-block;
        transition: display 2s linear;
    }

And once again I was unsuccessful.

How would I achieve this?



Solution :

Here you go:

http://jsfiddle.net/ahallicks/8gApb/2/

changed the display property to opacity and set it to 0

#nav > ul {
    opacity: 0;
}

And then added transition to that too:

transition: opacity 1s linear;

And for the target:

#nav:target > ul {
    opacity: 1;
}

    CSS Howto..

    How to have different transistions for background-image and text in a div using CSS

    JS/CSS. How do I force a child div to the bottom of it's parent div

    How to combine 2 SASS functions as they do almost the same thing just using a different calculation?

    How to test browser performance of specific CSS property?

    CSS HTML How to align image within div to bottom right

    how i can fit text to an image with css

    jQueryUI show/hide animation issue with child nodes

    how to flip the div using css?

    How do I to adjust the identation [closed]

    How to use CSS transition for existing list items to make room for new ones?

    How do I remove Bootstrap from asp.net project?

    How can I position two divs on the same line and have them act responsive?

    How to align the menu to center after certain width media query fires for RWD

    how to change css of n number of div element using jquery

    HTML/CSS - How do I make divs to size according to their contents?

    How to stretch segment of image in html/css

    IE8 only shows css content after event fired

    How can I write the javascript script to modify this css file?

    How to make device width-height based html & css via PhoneGap

    How do I trigger successive CSS transforms with transitions using jQuery's .css()?

    How to Centralize a Float on the Screen (such horizontally as vertically) Using CSS

    How to do CSS nth-child in span tags?

    How to overlay a dynamically selected image over a dynamically populated div

    How to achieve CSS transitions with delay timers but without any easing function?

    How to make this layout more responsive in CSS?

    How to have different size images fluidly respond CSS?

    How to make a floated div 100% height of its parent?

    How to vertically align text to the right of some text using css? [closed]

    CSS selector problem. Any ideas how to select this?

    CSS: How to change font-size of something that already has “font-size: 0.9em !important” on it [duplicate]