夏日博客

A-A+

jQuery Mobile实现侧边栏滑动菜单效果代码

2016年01月09日 前端设计 暂无评论 阅读 9 views 次

jQuery Mobile是一个手机端的专用jquery插件了，我们可以使用它来做滑动效果了，下面来看看利用jQuery Mobile实现侧边栏滑动菜单效果代码吧．

话说使用jQuery已经有好几年了，从最开始的1.4到现在的2.1，越用越觉得方便，jQuery有一个移动开发的插件，那就是jQuery Mobile，一直有没有使用过这个插件，今天兴致好就试着制作一个侧边栏滑动菜单，效果还不错，现在分享给大家。

准备工作

我们需要jQuery.min.js和jQuery.mobile.min.js文件，还有jQuery.mobile.min.css文件，将他们添加到我们的网页中。

  1. <link rel="stylesheet" href="css/jquery.mobile-1.0rc2.min.css" />  
  2. <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>  
  3. <script type="text/javascript" src="js/jquery.mobile-1.0rc2.min.js"></script>  

HTML代码

我们先添加菜单的HTML代码，默认状态下不显示在页面上。

  1. <div id="menu" style="display:none;">  
  2.     <h3>Menu</h3>  
  3.     <ul>  
  4.         <li class="active"><a href="#home" class="contentLink">Home </a></li>  
  5.         <li><a href="#home" class="contentLink">About </a></li>  
  6.         <li><a href="#home" class="contentLink">Portfolio </a></li>  
  7.         <li><a href="#home" class="contentLink">Contact </a></li>  
  8.     </ul>  
  9. </div>  

编写内容的HTML，我们需要一个按钮来让菜单显示。

  1. <div data-role="page" class="pages" id="home">  
  2.     <div data-role="header">  
  3.     <a href="#" class="showMenu">Menu</a>  
  4.         <h1>FB Style Menu</h1>  
  5.     </div><!-- /header -->  
  6.     <div data-role="content">  
  7.         <p><strong>Note: You can swipe right/left to show/close menu.</strong></p>  
  8.     </div><!-- /content -->  
  9. </div><!-- /page -->  

CSS代码

  1. body {  
  2.     -webkit-text-size-adjust: none;  
  3.     background: #5a5959 url(../images/menuBg.gif) top left repeat-y;  
  4. }  
  5. .pages h3 {  
  6.     font-size: 20px;  
  7.     margin: 0;  
  8. }  
  9. #menu {  
  10.     background-color: #5a5959;  
  11.     float: left;  
  12.     height: 100%;  
  13.     width: 165px;  
  14. }  
  15. #menu h3 {  
  16.     font-family: arial;  
  17.     font-size: 12px;  
  18.     color: #fff;  
  19.     margin: 0;  
  20.     padding: 4px 0 4px 10px;  
  21.     background: -webkit-gradient(linear,left top,left bottombottom,color-stop(5%,rgba(90,89,89,1)),color-stop(85%,rgba(66,65,65,1)));  
  22.     border-top: solid #6b6b6b 1px;  
  23.     border-bottom: solid #3d3d3d 1px;  
  24.     text-shadow: 0 -1px 1px #333;  
  25. }  
  26. #menu ul {  
  27.     margin: 0;  
  28.     padding: 0;  
  29.     width: inherit;  
  30. }  
  31. #menu ul li a:link,  
  32. #menu ul li a:visited {  
  33.     border-bottom: solid #333 1px;  
  34.     box-shadow: 0 1px 0 #727272;  
  35.     color: #fff;  
  36.     display: block;  
  37.     font-family: arial;  
  38.     font-size: 14px;  
  39.     padding: 10px 0 10px 10px;  
  40.     text-decoration: none;  
  41.     text-shadow: 0 1px 1px #000;  
  42.     width: 165px;  
  43. }  
  44. #menu ul li a:hover,  
  45. #menu ul li a:active {  
  46.     background-color: #716f6f;  
  47. }  
  48. .ui-body-c {  
  49.     background-color: #fff;  
  50.     line-height: 18px;  
  51. }  
  52. .active {  
  53.     background: -webkit-gradient(linear,left top,left bottombottom,color-stop(0%,rgba(30,29,29,1)),color-stop(21%,rgba(56,55,55,1)));  
  54.     color: #fff;  
  55.     text-shadow: 0 1px 1px #000;  
  56. }  

JavaScript代码

  1. $(document).bind("mobileinit", function () {  
  2.     $.mobile.pushStateEnabled = true;  
  3. });  
  4. $(function () {  
  5.     var menuStatus;  
  6.     var show = function() {  
  7.         if(menuStatus) {  
  8.             return;  
  9.         }  
  10.         $('#menu').show();  
  11.         $.mobile.activePage.animate({  
  12.             marginLeft: "165px",  
  13.         }, 300, function () {  
  14.             menuStatus = true  
  15.         });  
  16.     };  
  17.     var hide = function() {  
  18.         if(!menuStatus) {  
  19.             return;  
  20.         }  
  21.         $.mobile.activePage.animate({  
  22.             marginLeft: "0px",  
  23.         }, 300, function () {  
  24.             menuStatus = false  
  25.             $('#menu').hide();  
  26.         });  
  27.     };  
  28.     var toggle = function() {  
  29.         if (!menuStatus) {  
  30.             show();  
  31.         } else {  
  32.             hide();  
  33.         }  
  34.         return false;  
  35.     };  
  36.     // Show/hide the menu  
  37.     $("a.showMenu").click(toggle);  
  38.     $('#menu, .pages').live("swipeleft", hide);  
  39.     $('.pages').live("swiperight", show);  
  40.     $('div[data-role="page"]').live('pagebeforeshow', function (event, ui) {  
  41.         menuStatus = false;  
  42.         $(".pages").css("margin-left", "0");  
  43.     });  
  44.     // Menu behaviour  
  45.     $("#menu li a").click(function () {  
  46.         var p = $(this).parent();  
  47.         p.siblings().removeClass('active');  
  48.         p.addClass('active');  
  49.     });  
  50. });  

好了，以上就是这个效果的全部代码。　

标签：

给我留言