<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<div class="quick"></div>

<div class="slideLeftMenu">
<div class="quick-toolbar">
<p class="toolbar-title">QUICK MENU</p>
<span class="toolbar-icon-delete"></span>
</div>
<div class="menuList">
<a class="list-item">
<p class="list-item-title">Home</p>
<span class="list-item-icon"></span>
</a>

<a class="list-item">
<p class="list-item-title">About Us</p>
<span class="list-item-icon"></span>
</a>

<a class="list-item">
<p class="list-item-title">Products</p>
<span class="list-item-icon"></span>
</a>

<a class="list-item">
<p class="list-item-title">News</p>
<span class="list-item-icon"></span>
</a>

<a class="list-item">
<p class="list-item-title">Contact Us</p>
<span class="list-item-icon"></span>
</a>
</div>

</div>

<div class="masklayer"></div>

<span style="white-space:pre"> </span>*{ margin:0; padding:0;}
body{
font-size:1em;
height:100%;
margin:0;
padding:0;
}

/*這邊是快捷按鈕的樣式，使用了css3屬性寫法，沒考慮ie8-*/
.quick{
position:relative;
left:0;
top:0;
width:100%;
height:32px;
background:-webkit-gradient(linear, left top, left bottom, from(#99f), to(#96f));
background:-webkit-linear-gradient(#99f, #96f);
background: -moz-linear-gradient(#99f, #96f);
background: -ms-linear-gradient(#99f, #9f);
background: -o-linear-gradient(#99f, #96f);
background: linear-gradient(#99f, #96f);
}/*這邊就是導航的css了，*/
<span style="white-space:pre"> </span>.slideLeftMenu{
display:none;
width:272px;
min-height:100%;
background:#3d3d3d;
position:absolute;
right:0;
top:0;
z-index:3;
}
.slideLeftMenu .quick-toolbar,
.slideLeftMenu .list-item{
display:block;
width:100%;
float:left;
height:42px;
line-height:42px;
background:-webkit-gradient(linear, left top, left bottom, from(#444), to(#222));
background:-webkit-linear-gradient(#444, #222);
background: -moz-linear-gradient(#444, #222);
background: -ms-linear-gradient(#444, #222);
background: -o-linear-gradient(#444, #222);
background: linear-gradient(#444, #222);
}
.quick-toolbar .toolbar-title{
float:right;
color:#fff;
margin-right:10px;
}
.quick-toolbar .toolbar-icon-delete{
float:left;
width:18px;
height:18px;
margin:11px 0 0 10px;
background:url(images/icons-18-white.png) -73px -1px #212121;
border-radius:9px;
}
.menuList .list-item-title{
float:left;
font:blod 1.125em Arial, Helvetica, sans-serif;
color:#fff;
text-indent:0.75em;
text-align:left;
border:solid 0px red;
}
.menuList .list-item-icon{
float:right;
width:18px;
height:18px;
margin:11px 10px 0 0;
background:url(images/icons-18-white.png) -108px -1px #212121;
border-radius:9px;
}/*遮罩的css部分，這些絕大部分都是使用絕對定位實現的，因為我們要讓導航從右側平滑的飛入*/
.masklayer{
display:none;
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
background:#000;
opacity:0.6;
z-index:2;
}

window.QuickPanel = { //定義全局函數
'isOpened': false,
'opened': function(){ //定義面板打開的方法，打開的同時如果點擊了背景層和快捷按鈕層，執行關閉面板
$masklayer.fadeIn().on("click" ,function(){
window.QuickPanel.closed();
});
$quickpanel_toolbar.on("click" ,function(){
window.QuickPanel.closed();
});
$panel.css({ //從右邊飛入，使用絕對定位來操作
"width":"272px",
"top":"-6px",
"right":"-272px"
}).show().animate({"right":"0"},function(){
window.QuickPanel.isOpened = true;
});
},
'closed': function(){ //定義關閉面板方法
$panel.css({"right":"0"}).show().animate({
"right":"-272px"
},function(){
$masklayer.fadeOut(); //這邊才淡出的遮罩，我點擊快的時候就會出問題。。。
window.QuickPanel.isOpened = false;
$panel.hide(); //等動畫結束了吧菜單隱藏，不至于有滾動條
});
}
};