移动端重构——侧边栏导航
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <!-- 开启对web app程序的支持 --> <meta name="apple-mobile-web-app-capable" content="yes"> <!-- 全屏模式浏览 --> <meta name="apple-touch-fullscreen" content="yes"> <!-- 改变Safari状态栏的外观 --> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!-- 禁止自动识别5位以上数字为电话 --> <meta name="format-detection" content="telephone=no"> <!-- UC应用模式 --> <meta name="browsermode" content="application"> <!-- QQ应用模式 --> <meta name="x5-page-mode" content="app"> <title>移动端侧导航demo</title> <script src="http://www.w3cplus.com/mcommon/zepto.1.1.3.js"></script> <link rel="stylesheet" href="http://www.w3cplus.com/mcommon/reset.css" media="all"> <style> .header,.footer,.wrap-page{ position:absolute; left:0; right:0; } .header,.footer{ height:44px; background-color: #fff; text-align: center; z-index:900; line-height:44px; } .header{ top: 0; border-bottom: 1px solid #f00; } .footer{ bottom: 0; border-top: 1px solid #f00; } .page-title{ line-height:44px; } .fl{ float:left; } .fr{ float: right; } .btn-list{ width: 44px; height: 44px; text-align: center; cursor: pointer; } .btn-list:before{ content:""; width:20px; height: 2px; background-color: #ccc; display:inline-block; box-shadow: 0 7px 0 #ccc, 0 -7px 0 #ccc; } .wrap-page{ top: 44px; bottom: 44px; overflow-y:auto; -webkit-overflow-scrolling: touch; } .page{ position: relative; padding: 10px; } .page p{ margin-bottom: 10px; } /* panel */ .panel { position: absolute; top: -1px; bottom: -1px; left: 0; z-index: 980; width: 120px; background-color: #333; -webkit-transform: translate3d(-120px, 0, 0); transform: translate3d(-120px, 0, 0); } body.has-panel { -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; } body.panel-active{ -webkit-transform: translate3d(120px, 0, 0); transform: translate3d(120px, 0, 0); overflow-x:hidden; } .nav-aside { line-height: 40px; } .nav-aside li { border-bottom: 1px solid #222; color: #fff; } .nav-aside li a { color: #fff; padding: 0 5px; display: block; } .nav-aside li a:hover, .nav-aside li a:active, .nav-aside li a.active { background-color: #404040; } </style> </head> <body class="has-panel"> <header id="header" class="header"> <span id="panelSwitch" class="btn-list fl"></span> <h1 class="page-title">panel测试</h1> </header> <div id="main" class="wrap-page"> <section class="page" id="wrap"><div class="page-inner"> <p>君子曰：学不可以已。</p> <p>青，取之于蓝，而青于蓝；冰，水为之，而寒于水。木直中绳，輮以为轮，其曲中规。虽有槁暴（pù），不复挺者，輮使之然也。故木受绳则直，金就砺则利，君子博学而日参省乎己，则知明而行无过矣。</p> <p>故不登高山，不知天之高也；不临深溪，不知地之厚也；不闻先王之遗言，不知学问之大也。干、越、夷、貉之子，生而同声，长而异俗，教使之然也。诗曰：“嗟尔君子，无恒安息。靖共尔位，好是正直。神之听之，介尔景福。”神莫大于化道，福莫长于无祸。</p> <p>吾尝终日而思矣，不如须臾之所学也；吾尝跂而望矣，不如登高之博见也。登高而招，臂非加长也，而见者远；顺风而呼，声非加疾也，而闻者彰。假舆马者，非利足也，而致千里；假舟楫者，非能水也，而绝江河。君子生非异也，善假于物也。</p> <p>君子曰：学不可以已。</p> <p>青，取之于蓝，而青于蓝；冰，水为之，而寒于水。木直中绳，輮以为轮，其曲中规。虽有槁暴（pù），不复挺者，輮使之然也。故木受绳则直，金就砺则利，君子博学而日参省乎己，则知明而行无过矣。</p> <p>故不登高山，不知天之高也；不临深溪，不知地之厚也；不闻先王之遗言，不知学问之大也。干、越、夷、貉之子，生而同声，长而异俗，教使之然也。诗曰：“嗟尔君子，无恒安息。靖共尔位，好是正直。神之听之，介尔景福。”神莫大于化道，福莫长于无祸。</p> <p>吾尝终日而思矣，不如须臾之所学也；吾尝跂而望矣，不如登高之博见也。登高而招，臂非加长也，而见者远；顺风而呼，声非加疾也，而闻者彰。假舆马者，非利足也，而致千里；假舟楫者，非能水也，而绝江河。君子生非异也，善假于物也。</p> <p>君子曰：学不可以已。</p> <p>青，取之于蓝，而青于蓝；冰，水为之，而寒于水。木直中绳，輮以为轮，其曲中规。虽有槁暴（pù），不复挺者，輮使之然也。故木受绳则直，金就砺则利，君子博学而日参省乎己，则知明而行无过矣。</p> <p>故不登高山，不知天之高也；不临深溪，不知地之厚也；不闻先王之遗言，不知学问之大也。干、越、夷、貉之子，生而同声，长而异俗，教使之然也。诗曰：“嗟尔君子，无恒安息。靖共尔位，好是正直。神之听之，介尔景福。”神莫大于化道，福莫长于无祸。</p> <p>吾尝终日而思矣，不如须臾之所学也；吾尝跂而望矣，不如登高之博见也。登高而招，臂非加长也，而见者远；顺风而呼，声非加疾也，而闻者彰。假舆马者，非利足也，而致千里；假舟楫者，非能水也，而绝江河。君子生非异也，善假于物也。</p> </div></section> </div> <footer class="footer">footer</footer> <section class="panel" id="panelNav"> <ul class="nav-aside"> <li><a href="#">Home</a></li> <li><a href="#">List</a></li> <li><a href="#">Demo</a></li> <li><a href="#">Download</a></li> </ul> </section> <script> $(function(){ var $body = $('body'); function disableScroll(e) { e.preventDefault(); } $('#panelSwitch').tap(function(){ if($body.hasClass('panel-active')){ $body.removeClass('panel-active'); $body.off('touchmove', disableScroll); }else{ $body.addClass('panel-active'); $body.on('touchmove', disableScroll); } }); }); </script> </body> </html>
demo2-可以滚动的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <!-- 开启对web app程序的支持 --> <meta name="apple-mobile-web-app-capable" content="yes"> <!-- 全屏模式浏览 --> <meta name="apple-touch-fullscreen" content="yes"> <!-- 改变Safari状态栏的外观 --> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!-- 禁止自动识别5位以上数字为电话 --> <meta name="format-detection" content="telephone=no"> <!-- UC应用模式 --> <meta name="browsermode" content="application"> <!-- QQ应用模式 --> <meta name="x5-page-mode" content="app"> <title>移动端侧导航demo</title> <script src="http://www.w3cplus.com/mcommon/zepto.1.1.3.js"></script> <link rel="stylesheet" href="http://www.w3cplus.com/mcommon/reset.css" media="all"> <style> .header,.footer,.wrap-page{ position:absolute; left:0; right:0; } .header,.footer{ height:44px; background-color: #fff; text-align: center; z-index:900; line-height:44px; } .header{ top: 0; border-bottom: 1px solid #f00; } .footer{ bottom: 0; border-top: 1px solid #f00; } .page-title{ line-height:44px; } .fl{ float:left; } .fr{ float: right; } .btn-list{ width: 44px; height: 44px; text-align: center; cursor: pointer; } .btn-list:before{ content:""; width:20px; height: 2px; background-color: #ccc; display:inline-block; box-shadow: 0 7px 0 #ccc, 0 -7px 0 #ccc; } .wrap-page{ top: 44px; bottom: 44px; overflow: hidden; } .page{ position: relative; padding: 10px; } .page p{ margin-bottom: 10px; } /* panel */ .panel { position: absolute; top: -1px; bottom: -1px; left: 0; z-index: 980; width: 120px; background-color: #333; -webkit-transform: translate3d(-120px, 0, 0); transform: translate3d(-120px, 0, 0); -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; } .panel.active { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .nav-aside { line-height: 40px; } .nav-aside li { border-bottom: 1px solid #222; color: #fff; } .nav-aside li a { color: #fff; padding: 0 5px; display: block; } .nav-aside li a:hover, .nav-aside li a:active, .nav-aside li a.active { background-color: #404040; } </style> </head> <body> <header id="header" class="header fixed-top"> <span id="panelSwitch" class="btn-list fr"></span> <h1 class="page-title">panel测试</h1> </header> <div id="main" class="wrap-page"> <section class="page" id="wrap"><div class="page-inner"> <p>君子曰：学不可以已。</p> <p>青，取之于蓝，而青于蓝；冰，水为之，而寒于水。木直中绳，輮以为轮，其曲中规。虽有槁暴（pù），不复挺者，輮使之然也。故木受绳则直，金就砺则利，君子博学而日参省乎己，则知明而行无过矣。</p> <p>故不登高山，不知天之高也；不临深溪，不知地之厚也；不闻先王之遗言，不知学问之大也。干、越、夷、貉之子，生而同声，长而异俗，教使之然也。诗曰：“嗟尔君子，无恒安息。靖共尔位，好是正直。神之听之，介尔景福。”神莫大于化道，福莫长于无祸。</p> <p>吾尝终日而思矣，不如须臾之所学也；吾尝跂而望矣，不如登高之博见也。登高而招，臂非加长也，而见者远；顺风而呼，声非加疾也，而闻者彰。假舆马者，非利足也，而致千里；假舟楫者，非能水也，而绝江河。君子生非异也，善假于物也。</p> <p>君子曰：学不可以已。</p> <p>青，取之于蓝，而青于蓝；冰，水为之，而寒于水。木直中绳，輮以为轮，其曲中规。虽有槁暴（pù），不复挺者，輮使之然也。故木受绳则直，金就砺则利，君子博学而日参省乎己，则知明而行无过矣。</p> <p>故不登高山，不知天之高也；不临深溪，不知地之厚也；不闻先王之遗言，不知学问之大也。干、越、夷、貉之子，生而同声，长而异俗，教使之然也。诗曰：“嗟尔君子，无恒安息。靖共尔位，好是正直。神之听之，介尔景福。”神莫大于化道，福莫长于无祸。</p> <p>吾尝终日而思矣，不如须臾之所学也；吾尝跂而望矣，不如登高之博见也。登高而招，臂非加长也，而见者远；顺风而呼，声非加疾也，而闻者彰。假舆马者，非利足也，而致千里；假舟楫者，非能水也，而绝江河。君子生非异也，善假于物也。</p> <p>君子曰：学不可以已。</p> <p>青，取之于蓝，而青于蓝；冰，水为之，而寒于水。木直中绳，輮以为轮，其曲中规。虽有槁暴（pù），不复挺者，輮使之然也。故木受绳则直，金就砺则利，君子博学而日参省乎己，则知明而行无过矣。</p> <p>故不登高山，不知天之高也；不临深溪，不知地之厚也；不闻先王之遗言，不知学问之大也。干、越、夷、貉之子，生而同声，长而异俗，教使之然也。诗曰：“嗟尔君子，无恒安息。靖共尔位，好是正直。神之听之，介尔景福。”神莫大于化道，福莫长于无祸。</p> <p>吾尝终日而思矣，不如须臾之所学也；吾尝跂而望矣，不如登高之博见也。登高而招，臂非加长也，而见者远；顺风而呼，声非加疾也，而闻者彰。假舆马者，非利足也，而致千里；假舟楫者，非能水也，而绝江河。君子生非异也，善假于物也。</p> </div></section> </div> <footer class="footer">footer</footer> <section class="panel" id="panelNav"> <ul class="nav-aside"> <li><a href="#">Home</a></li> <li><a href="#">List</a></li> <li><a href="#">Demo</a></li> <li><a href="#">Download</a></li> </ul> </section> <script> $(function(){ var $panelNav = $('#panelNav'); $('#panelSwitch').tap(function(){ if($panelNav.hasClass('active')){ $panelNav.removeClass('active'); }else{ $panelNav.addClass('active'); } }); }); </script> </body> </html>
原链接：http://www.w3cplus.com/mobile/mobile-terminal-refactoring-sidebar-menu.html
