快捷導(dǎo)航

用jquery寫的菜單從左往右滑動出現(xiàn)

更新時間：2014年04月11日 15:03:34 作者：

這篇文章主要介紹了用jquery寫的菜單從左往右滑動出現(xiàn)的效果,需要的朋友可以參考下

最近，剛好在研究微網(wǎng)站的制作，查閱了大量的資料都是關(guān)于微信3平臺開發(fā)教程，幾乎沒有這類的介紹，不過都是第三方平臺提供模板制作微站而已，后來很感謝柳峰博客最后寫的微網(wǎng)站的解惑，

“什么是微網(wǎng)站？

微網(wǎng)站是新瓶裝老酒，被一些搞營銷的人給神化了，以至于很多開發(fā)者都在問什么是微網(wǎng)站，如何開發(fā)微網(wǎng)站。微網(wǎng)站本質(zhì)上就是以微信瀏覽器為入口的手機網(wǎng)站（Web APP），能夠兼容Android、iOS、WP等操作系統(tǒng)。開發(fā)微網(wǎng)站用到的技術(shù)與開發(fā)普通網(wǎng)站一樣，都是基于HTML（HTML5）、CSS、Javascript等，所以有普通網(wǎng)站開發(fā)經(jīng)驗的開發(fā)者，完全有能力開發(fā)微網(wǎng)站。

PS：初學(xué)者以后再看到什么以“微”開頭的新名詞，例如：微商城、微客服、微統(tǒng)計，直接把“微”字去掉或者把“微”當(dāng)作是“基于微信的”就不難理解了?！?，

大部分都涉及html5的寫法，這樣就好理解了。。。還有就是參考了“微信生意寶”中的案例，里面的導(dǎo)航自己寫了下demo，感覺還是很好理解的，下面上界面效果圖

因為是用jq所寫，需要引用庫文件，這邊使用的是在線的cdn地址：

復(fù)制代碼代碼如下:

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

然后編寫html導(dǎo)航結(jié)構(gòu)

復(fù)制代碼代碼如下:

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

這部分沒有什么技術(shù)性，純粹就是div結(jié)構(gòu)

復(fù)制代碼代碼如下:

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

復(fù)制代碼代碼如下:

 
/*這邊是快捷按鈕的樣式，使用了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); 
}/*這邊就是導(dǎo)航的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部分，這些絕大部分都是使用絕對定位實現(xiàn)的，因為我們要讓導(dǎo)航從右側(cè)平滑的飛入*/ 
.masklayer{ 
display:none; 
width:100%; 
height:100%; 
position:absolute; 
left:0; 
top:0; 
background:#000; 
opacity:0.6; 
z-index:2; 
} 

把css都寫好了，也就完成一大半了，剩下就是使用jq處理動畫部分，如下代碼

復(fù)制代碼代碼如下:

 
window.QuickPanel = { //定義全局函數(shù) 
'isOpened': false, 
'opened': function(){ //定義面板打開的方法，打開的同時如果點擊了背景層和快捷按鈕層，執(zhí)行關(guān)閉面板 
$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(){ //定義關(guān)閉面板方法 
$panel.css({"right":"0"}).show().animate({ 
"right":"-272px" 
},function(){ 
$masklayer.fadeOut(); //這邊才淡出的遮罩，我點擊快的時候就會出問題。。。 
window.QuickPanel.isOpened = false; 
$panel.hide(); //等動畫結(jié)束了吧菜單隱藏，不至于有滾動條 
}); 
} 
}; 

這部分是最重要的，我封裝了個quickpanel的函數(shù)，里面有open和closed倆方法，，供我們其他dom元素點擊調(diào)用會比較方便，最終實現(xiàn)就是圖上的下效果，

ps：這邊有個問題，在滑動過程會出現(xiàn)滾動條，這樣其實是非常不美觀的，請問大牛們有辦法解決嗎？？我把附件放資源那邊了，麻煩下載運行看看，如果有什么地方不對勁請留言提出來哦~~非常感謝

您可能感興趣的文章: