如何制作動畫sidein導航欄？

Question

如何制作以下幻燈片導航欄？ 是否可以不使用任何插件而僅使用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
    }
}