如何制作动画sidein导航栏？

Question

How to make the following slidein navigation bar? Is it possible without using any plugins and just stick with CSS3?

http://middle-earth.thehobbit.com/map

Answer 1

No plugins, very simple markup, css transitions, and a few lines of javascript

http://jsfiddle.net/7A5T6/6/

#menu{
height:100%;
transition:1s;
width:200px;
margin-left:-200px;
}

button{
position:absolute;
right:-30px;    
}

Javascript:

var open = document.getElementById('open')
var menu = document.getElementById('menu')

open.addEventListener('click',openit,false);

var i = 0;

function openit(){
    if(i==0){
        menu.style.marginLeft= "0px"
        i=1
    }
    else{
        menu.style.marginLeft= "-200px"
        i=0
    }
}