javascript - 如何制作动画侧边导航栏？

Question

如何制作下面的slidein导航栏？是否可以不使用任何插件而只坚持使用 CSS3？

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

Answer 1

没有插件，非常简单的标记、css 转换和几行 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
    }
}