如何在导航栏中制作动画侧边栏？

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
    }
}