用jquery寫的菜單從左往右滑動出現(xiàn)
更新時間：2014年04月11日 15:03:34 作者：
這篇文章主要介紹了用jquery寫的菜單從左往右滑動出現(xiàn)的效果,需要的朋友可以參考下
最近，剛好在研究微網站的制作，查閱了大量的資料都是關于微信3平臺開發(fā)教程，幾乎沒有這類的介紹，不過都是第三方平臺提供模板制作微站而已，后來很感謝柳峰博客最后寫的微網站的解惑，
“什么是微網站？
微網站是新瓶裝老酒，被一些搞營銷的人給神化了，以至于很多開發(fā)者都在問什么是微網站，如何開發(fā)微網站。微網站本質上就是以微信瀏覽器為入口的手機網站（Web APP），能夠兼容Android、iOS、WP等操作系統(tǒng)。開發(fā)微網站用到的技術與開發(fā)普通網站一樣，都是基于HTML（HTML5）、CSS、Javascript等，所以有普通網站開發(fā)經驗的開發(fā)者，完全有能力開發(fā)微網站。
PS：初學者以后再看到什么以“微”開頭的新名詞，例如：微商城、微客服、微統(tǒng)計，直接把“微”字去掉或者把“微”當作是“基于微信的”就不難理解了?！?，
大部分都涉及html5的寫法，這樣就好理解了。。。還有就是參考了“微信生意寶”中的案例，里面的導航自己寫了下demo，感覺還是很好理解的，下面上界面效果圖
因為是用jq所寫，需要引用庫文件，這邊使用的是在線的cdn地址：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
然后編寫html導航結構
<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>
這部分沒有什么技術性，純粹就是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部分，這些絕大部分都是使用絕對定位實現(xiàn)的，因為我們要讓導航從右側平滑的飛入*/
.masklayer{
display:none;
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
background:#000;
opacity:0.6;
z-index:2;
}
把css都寫好了，也就完成一大半了，剩下就是使用jq處理動畫部分，如下代碼
window.QuickPanel = { //定義全局函數
'isOpened': false,
'opened': function(){ //定義面板打開的方法，打開的同時如果點擊了背景層和快捷按鈕層，執(zhí)行關閉面板
$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(); //等動畫結束了吧菜單隱藏，不至于有滾動條
});
}
};
這部分是最重要的，我封裝了個quickpanel的函數，里面有open和closed倆方法，，供我們其他dom元素點擊調用會比較方便，最終實現(xiàn)就是圖上的下效果，
ps：這邊有個問題，在滑動過程會出現(xiàn)滾動條，這樣其實是非常不美觀的，請問大牛們有辦法解決嗎？？我把附件放資源那邊了，麻煩下載運行看看，如果有什么地方不對勁請留言提出來哦~~非常感謝
“什么是微網站？
微網站是新瓶裝老酒，被一些搞營銷的人給神化了，以至于很多開發(fā)者都在問什么是微網站，如何開發(fā)微網站。微網站本質上就是以微信瀏覽器為入口的手機網站（Web APP），能夠兼容Android、iOS、WP等操作系統(tǒng)。開發(fā)微網站用到的技術與開發(fā)普通網站一樣，都是基于HTML（HTML5）、CSS、Javascript等，所以有普通網站開發(fā)經驗的開發(fā)者，完全有能力開發(fā)微網站。
PS：初學者以后再看到什么以“微”開頭的新名詞，例如：微商城、微客服、微統(tǒng)計，直接把“微”字去掉或者把“微”當作是“基于微信的”就不難理解了?！?，
大部分都涉及html5的寫法，這樣就好理解了。。。還有就是參考了“微信生意寶”中的案例，里面的導航自己寫了下demo，感覺還是很好理解的，下面上界面效果圖
因為是用jq所寫，需要引用庫文件，這邊使用的是在線的cdn地址：
復制代碼 代碼如下:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
然后編寫html導航結構
復制代碼 代碼如下:
<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>
這部分沒有什么技術性，純粹就是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部分，這些絕大部分都是使用絕對定位實現(xiàn)的，因為我們要讓導航從右側平滑的飛入*/
.masklayer{
display:none;
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
background:#000;
opacity:0.6;
z-index:2;
}
把css都寫好了，也就完成一大半了，剩下就是使用jq處理動畫部分，如下代碼
復制代碼 代碼如下:
window.QuickPanel = { //定義全局函數
'isOpened': false,
'opened': function(){ //定義面板打開的方法，打開的同時如果點擊了背景層和快捷按鈕層，執(zhí)行關閉面板
$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(); //等動畫結束了吧菜單隱藏，不至于有滾動條
});
}
};
這部分是最重要的，我封裝了個quickpanel的函數，里面有open和closed倆方法，，供我們其他dom元素點擊調用會比較方便，最終實現(xiàn)就是圖上的下效果，
ps：這邊有個問題，在滑動過程會出現(xiàn)滾動條，這樣其實是非常不美觀的，請問大牛們有辦法解決嗎？？我把附件放資源那邊了，麻煩下載運行看看，如果有什么地方不對勁請留言提出來哦~~非常感謝
相關文章
jQuery實現(xiàn)的省市聯(lián)動菜單功能示例【測試可用】
這篇文章主要介紹了jQuery實現(xiàn)的省市聯(lián)動菜單功能,結合完整實例形式分析了jQuery實現(xiàn)級聯(lián)菜單的具體流程與操作方法,涉及jQuery表單及數組元素的遍歷及事件響應處理技巧.非常簡單實用,需要的朋友可以參考下2017-01-01
jquery層級選擇器的實現(xiàn)(匹配后代元素div)
下面小編就為大家?guī)硪黄猨query層級選擇器的實現(xiàn)(匹配后代元素div)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
解決 PHP 拼數據這方面的問題而有了 Smarty 這些模版，JavaScript 也可以利用模版來解決這些問題，比如基于 jQuery 的 jquery.tmpl2014-08-08
本文給大家分享的是一則javascript滾動條插件的源碼，十分的細致實用，有需要的小伙伴可以參考下。2015-03-03
下面小編就為大家?guī)硪黄獙ο蟛恢С謎ndexOf屬性或方法的解決方法(必看)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
jquery實現(xiàn)彈出div,始終顯示在屏幕正中間的簡單實例
本篇文章主要是對jquery實現(xiàn)彈出div,始終顯示在屏幕正中間的簡單實例進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
jQuery插件FusionWidgets實現(xiàn)的Cylinder圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionWidgets實現(xiàn)的Cylinder圖效果,結合實例形式分析了jQuery使用FusionWidgets結合swf文件讀取xml數據并采用Cylinder圖展示的相關實現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
jQuery輕松實現(xiàn)表格的隔行變色和點擊行變色的實例代碼
下面小編就為大家?guī)硪黄猨Query輕松實現(xiàn)表格的隔行變色和點擊行變色的實例代碼。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考，一起跟隨小編過來看看吧2016-05-05
在用jquery加ajax寫的時候，發(fā)現(xiàn)如果傳進去的數據包含&則無法獲取數據而+號的話就會被判定為空，解決辦法就是使用encodeURIComponent()函數對要發(fā)送的數據進行編碼,需要的朋友可以參考下2017-01-01
這篇文章主要介紹了jQuery模擬select實現(xiàn)下拉菜單功能,比較實用,需要的朋友可以參考下。2016-06-06