Web端触摸式导航菜单插件—Slideout.js
前端笔记 2016-09-21 14:05:19 JS插件   

git地址：

https://github.com/WenryXu/slideout(中文)

https://github.com/Mango/slideout

 

JS大小：6K

 68747470733a2f2f692e696d6775722e636f6d2f415767776c56572e6769

完整demo：

XML/HTML Code复制内容到剪贴板
  1. <!doctype html>  
  2. <html lang="en">  
  3.   <head>  
  4.     <meta charset="utf-8">  
  5.     <title>Slideout Demo</title>  
  6.     <meta http-equiv="cleartype" content="on">  
  7.     <meta name="MobileOptimized" content="320">  
  8.     <meta name="HandheldFriendly" content="True">  
  9.     <meta name="apple-mobile-web-app-capable" content="yes">  
  10.     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">  
  11.     <style>  
  12.       body {  
  13.         width: 100%;  
  14.         height: 100%;  
  15.       }  
  16.   
  17.       .slideout-menu {  
  18.         position: fixed;  
  19.         left: 0;  
  20.         top: 0;  
  21.         bottom: 0;  
  22.         right: 0;  
  23.         z-index: 0;  
  24.         width: 256px;  
  25.         overflow-y: auto;  
  26.         -webkit-overflow-scrolling: touch;  
  27.         display: none;  
  28.       }  
  29.   
  30.       .slideout-panel {  
  31.         position:relative;  
  32.         z-index: 1;  
  33.       }  
  34.   
  35.       .slideout-open,  
  36.       .slideout-open body,  
  37.       .slideout-open .slideout-panel {  
  38.         overflow: hidden;  
  39.       }  
  40.   
  41.       .slideout-open .slideout-menu {  
  42.         display: block;  
  43.       }  
  44.     </style>  
  45.   </head>  
  46.   <body>  
  47.   
  48.     <nav id="menu">  
  49.       <h2>Menu</h2>  
  50.     </nav>  
  51.   
  52.     <main id="panel">  
  53.       <header>  
  54.         <button class="toggle-button">☰</button>  
  55.         <h2>Panel</h2>  
  56.       </header>  
  57.     </main>  
  58.   
  59.     <script src="dist/slideout.min.js"></script>  
  60.     <script>  
  61.       var slideout = new Slideout({  
  62.         'panel': document.getElementById('panel'),  
  63.         'menu': document.getElementById('menu'),  
  64.         'padding': 256,  
  65.         'tolerance': 70  
  66.       });  
  67.   
  68.       // Toggle button  
  69.       document.querySelector('.toggle-button').addEventListener('click', function() {  
  70.         slideout.toggle();  
  71.       });  
  72.     </script>  
  73.   
  74.   </body>  
  75. </html>  

 

 

 

本文来自于：http://www.yoyo88.cn/note/frontend/37.html

上一篇 JQ插件开发demo
下一篇 Sublime Text添加插入带当前时间说明
相关的文章
Powered by yoyo苏ICP备15045725号