Where the F#$K is my div?!

wtfdiv.md

So you're trying to build a nice slide-in menu. Something that shows up from the bottom of your app when a user clicks a menu button. Here are a collection of things I wish I had known a few hours ago.

You can't do this with just CSS (or you shouldn't)

You need to have a bit of JavaScript to change a class on the element you're trying to animate.

You need a position: relative parent, a regular child div, and a position: absolute child with left and bottom set.

If you don't have a position: relative parent, your absolutely positioned div (the one you want to slide on screen) may not show up.

If you don't use position: absolute on the child then you can't get it to sit on top of the other child div.

If you don't have bottom AND left set your div may be sitting off screen somewhere.

.absolute-child {
    position: absolute;
    background: #fff;
    bottom: -300px;
    left: 0px;
    z-index: 2;
    width: 100%;
    height: 300px;
    box-sizing: border-box;
    transition: transform ease 250ms;
}

The above CSS will turn your boring div into a boring white box that lives off screen.

The transition property defines how the animation will behave. You define what the animation is in a second bit of css.

.open {
    transform: translate3d(0, -300px, 0);
}

Here we are sliding the box UP 300px. So when you apply the open class to your div (using JavaScript) that animation will play according to the transition property specified before.

Note: The coordinate systems for position: absolute and translate3d are OPPOSITE. We use -300px in both even though the directions we are moving the div are opposite.

For the JavaScript bit I'm using react so I do something like this

    var Menu = React.createClass({

        propTypes: {
            open: React.PropTypes.bool.isRequired,
            close: React.PropTypes.func.isRequired
        },

        render: function() {

            var containerClasses = {
                "absolute-child": true,
                "open": this.props.open
            }

            return (
                  <div className={classSet(containerClasses)} >
                    <a className="button" href="" onClick={this.props.close}>Close</a>
                  </div>
            );
        }
    });

Here the close method is defined in a parent component and passed in, when clicked the button changes the value of the open prop passed in, and that removes the open class.

I'm using a couple of libraries to make things easier. classSet from React addons and the the className="button" bit is part of Foundation Apps CSS framework to make my links into pretty buttons.