HTML5现在本领太大了，PC端已经无法满足它的胃口了，它将强势攻入移动端，所以移动端中各种特效也得基于HTML5实现，看看我们将要介绍的slideout.js，能帮我们实现怎么样的侧边栏滑动特效呢~~

先看下运行效果：

一、准备资料

只需要准备slideout.js库即可：

https://github.com/Mango/slideout/blob/master/dist/slideout.js

小图标：

1）menu.png


2）happy.png

二、实现代码

HTML代码：

  1. <!doctype html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>适合移动手机的侧边栏滑动代码 - 站长素材</title>
  8. <link rel="stylesheet" href="css/styles.css">
  9. </head>
  10. <body>
  11. <nav id="menu" class="menu">
  12.   <a href="#" target="_blank">
  13.     <header class="menu-header">
  14.       <span class="menu-header-title">主题</span>
  15.     </header>
  16.   </a>
  18.   <section class="menu-section">
  19.     <h3 class="menu-section-title">脚本代码</h3>
  20.     <ul class="menu-section-list">
  21.       <li><a href="#" target="_blank">jQuery</a></li>
  22.       <li><a href="#" target="_blank">CSS3</a></li>
  23.       <li><a href="#" target="_blank">HTML5</a></li>
  24.       <li><a href="#" target="_blank">动画效果</a></li>
  25.     </ul>
  26.   </section>
  28.   <section class="menu-section">
  29.     <h3 class="menu-section-title">flash动画</h3>
  30.     <ul class="menu-section-list">
  31.       <li><a href="#" target="_blank">节日动画</a></li>
  32.       <li><a href="#" target="_blank">flash植物</a></li>
  33.       <li><a href="#">flash动物</a></li>
  34.     </ul>
  35.   </section>
  37.   <section class="menu-section">
  38.     <h3 class="menu-section-title">音效下载</h3>
  39.     <ul class="menu-section-list">
  40.       <li><a href="#" target="_blank">鸟叫声</a></li>
  41.       <li><a href="#" target="_blank">狗叫声</a></li>
  42.     </ul>
  43.   </section>
  44. </nav>
  45. <main id="main" class="panel">
  46.     <button class="btn-hamburger js-slideout-toggle">
  47.       <span class="tooltip">点击打开</span>
  48.     </button>
  49. </main>
  51. <script type="text/javascript" src="js/slideout.min.js"></script>
  52. <script type="text/javascript">
  53.     var slideout = new Slideout({
  54.         'panel': document.getElementById('main'),
  55.         'menu': document.getElementById('menu'),
  56.         'padding': 256,
  57.         'tolerance': 70
  58.      });
  60.      document.querySelector('.js-slideout-toggle').addEventListener('click', function() {
  61.         slideout.toggle();
  62.      });
  64.      document.querySelector('.menu').addEventListener('click', function(eve) {
  65.         if (eve.target.nodeName === 'A') { slideout.close(); }
  66.      });
  68. </script>
  70. </body>
  71. </html>

结构代码一项简单，主要注意一下slideout的用法，它传的几个参数：

panel：是指主要面板，指整个内容展示区域

menu：是指被隐藏的左侧菜单栏区域

padding：指点击按钮后，向右滑动的距离

CSS代码：

  1. html,
  2. body {
  3.   width: 100%;
  4.   height: 100%;
  5.   font: 100%/1.4em 'Calibre Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  6.   margin: 0 auto;
  7.   color: #222;
  8.   -webkit-text-size-adjust: none;
  9.   -webkit-font-smoothing: antialiased;
  10. }
  12. pre {
  13.   margin: 0;
  14.   font-size: 14px;
  15. }
  17. body,
  18. .panel {
  19.   background-color: #fff;
  20. }
  22. .menu {
  23.   background-color: #1D1F20;
  24.   background-image: linear-gradient(145deg, #1D1F20, #404348);
  25. }
  27. a {
  28.   color: #4B5;
  29.   text-decoration: none;
  30. }
  32. .menu a {
  33.   color: #fff;
  34. }
  36. .menu a:hover {
  37.   text-decoration: underline;
  38. }
  40. .menu-header {
  41.   border-bottom: 1px solid #2a2d2f;
  42.   padding: 20px 0 20px 60px;
  43.   background: url('../images/github.png') no-repeat 15px 15px;
  44.   background-size: 32px;
  45. }
  47. .menu-header-title {
  48.   font-weight: 400;
  49.   letter-spacing: 0.5px;
  50.   margin: 0;
  51. }
  53. .menu-section {
  54.   margin: 25px 0;
  55. }
  57. .menu-section-title {
  58.   text-transform: uppercase;
  59.   color: #85888d;
  60.   font-weight: 200;
  61.   font-size: 13px;
  62.   letter-spacing: 1px;
  63.   padding: 0 20px;
  64.   margin:0;
  65. }
  67. .menu-section-list {
  68.   padding:0;
  69.   margin: 10px 0;
  70.   list-style:none;
  71. }
  73. .menu-section-list a {
  74.   display: block;
  75.   padding: 10px 20px;
  76. }
  78. .menu-section-list a:hover {
  79.   background-color: rgba(255, 255, 255, 0.1);
  80.   text-decoration: none;
  81. }
  83. .panel {
  84.   text-align: center;
  85.   padding-top: 5px;
  86.   min-height: 100%;
  87. }
  89. /**
  90.  * hamburger
  91.  */
  92. .btn-hamburger {
  93.   border: none;
  94.   position: absolute;
  95.   top: 12px;
  96.   left: 12px;
  97.   outline:none;
  98.   background: url('../images/menu.png') no-repeat left center;
  99. }
  101. .tooltip {
  102.   font-size: 20px;
  103.   line-height: 19px;
  104.   display: inline-block;
  105.   background: #4B5 url('../images/happy.png') no-repeat 135px 15px;
  106.   color: #fff;
  107.   padding: 10px 45px 10px 20px;
  108.   border-radius: 4px;
  109.   position: relative;
  110.   left: 50px;
  111. }
  113. /**
  114.  * Medium Screens
  115.  */
  116. @media all and (min-width:40em) {
  118.   .btn-hamburger {
  119.     top: 20px;
  120.     left: 30px;
  121.   }
  123.   .panel-header {
  124.     margin-top: 40px;
  125.     width: 455px;
  126.   }
  128.   .title {
  129.     font-size: 4.2em;
  130.   }
  132.   .subtitle {
  133.     font-size: 1.8em;
  134.   }
  136.   .btn-download {
  137.     margin-right: 20px;
  138.   }
  140.   .btn-fork {
  141.     margin-left: 20px;
  142.   }
  144. }
  146. .menu,
  147. .slideout-menu {
  148.   position: fixed;
  149.   left: 0;
  150.   top: 0;
  151.   bottom: 0;
  152.   right: 0;
  153.   z-index: 0;
  154.   width: 256px;
  155.   overflow-y: scroll;
  156.   -webkit-overflow-scrolling: touch;
  157.   display: none;
  158. }
  160. .panel,
  161. .slideout-panel {
  162.   position: relative;
  163.   z-index: 1;
  164. }
  166. .slideout-open,
  167. .slideout-open body {
  168.   overflow: hidden;
  169. }
  171. .slideout-open .slideout-menu {
  172.   display: block;
  173. }

上面css代码可能有些有点多余，但是我们没必要care这么多细节呀，出来效果不就行了么~~

前端

基于slideout.js实现的移动端侧边栏滑动特效的更多相关文章

  1. Pomelo：网易开源基于 Node.js 的游戏服务端框架

    Pomelo:网易开源基于 Node.js 的游戏服务端框架 https://github.com/NetEase/pomelo/wiki/Home-in-Chinese

  2. 基于three.js实现特定Div容器的粒子特效封装

    本文基于three.js实现特定容器的粒子特效效果,支持用户传入特定的dom对象以及粒子颜色. 效果图 移入库 <script src="jquery-1.11.3.min.js&qu ...

  3. 微信小程序侧边栏滑动特效(左右滑动)

    侧边栏滑动是很常见的功能,但是小程序出来不久,很多特效还没有成熟案例,只能原生重写,所以今天为大家带来4个漂亮的侧边栏特效~~ 侧边栏特效一 先看效果: wxml: <!--page/one/i ...

  4. 基于React.js网页版弹窗|react pc端自定义对话框组件RLayer

    基于React.js实现PC桌面端自定义弹窗组件RLayer. 前几天有分享一个Vue网页版弹框组件,今天分享一个最新开发的React PC桌面端自定义对话框组件. RLayer 一款基于react. ...

  5. Vue 爬坑之路（十一）—— 基于 Nuxt.js 实现服务端渲染（SSR）

    直接使用 Vue 构建前端单页面应用,页面源码时只有简单的几行 html,这并不利于网站的 SEO,这时候就需要服务端渲染 2016 年 10 月 25 日,zeit.co 背后的团队对外发布了一个 ...

  6. 基于VUE.JS的移动端框架Mint UI

    Mint UI GitHub:github.com/ElemeFE/mint 项目主页:mint-ui.github.io/# Demo:elemefe.github.io/mint- 文档:mint ...

  7. 基于node.js 的 websocket的移动端H5直播开发

    这一篇介绍一下基于node.js 的 websocket的移动端H5直播开发, 下载文章底部的源码,我是用vscode打开, 首先在第一个终端运行 npm run http-server 这个指令是运 ...

  8. 基于Vue.js PC桌面端弹出框组件|vue自定义弹层组件|vue模态框

    vue.js构建的轻量级PC网页端交互式弹层组件VLayer. 前段时间有分享过一个vue移动端弹窗组件,今天给大家分享一个最近开发的vue pc端弹出层组件. VLayer 一款集Alert.Dia ...

  9. [译]基于Vue.js的10个最佳UI框架，用于构建移动应用程序

    原文查看10 Best Vue.js based UI Frameworks for Building Mobile Apps 如果您期待使用Vue.js构建移动应用程序,那么您可以选择许多可用的UI ...

随机推荐

  1. Debussy与modelsim联仿时 do 文件脚本

    quit -sim set PATH1 D:/Program/modelsim/vivado_lib set PATH2 D:/Program/Vivado/Vivado/2014.4/data/ve ...

  2. ASP.NET ZERO Core Application 学习笔记

    地址:https://www.aspnetzero.com/Documents/Development-Guide-Core 1.恢复数据库 MIGRATOR CONSOLE APPLICATION ...

  3. adb通信原理分析

    关于这个问题,自己研究了一下,没有研究出来 在网络上搜罗了一下,基本上关于ADB的原理用了两张图表示:        我表示没有看懂这两个图, 又开始查阅一些一些资料: 首先知道adb的通信有Sock ...

  4. zabbix网络发现

    zabbix的网络自动发现是一个非常强大的功能,该功能可以完成以下工作 •快速发现并添加主机. •简单的管理. •随着环境的改变而快速搭建监控系统. 网络发现基于以下信息 •ip地址段 •基于服务的F ...

  5. cocos2d-x源码分析（1）

    class CC_DLL CCCopying { public: virtual CCObject* copyWithZone(CCZone* pZone); }; class CC_DLL CCZo ...

  6. 重载new和delete

    当我们创建一个new表达式时,会发生两件事.首先使用operator new()分配内存,然后调用构造函数.在delete表达式里,调用了析构函数,然后使用operator delete()释放内存. ...

  7. ooad单例模式-Singleton

                                                单例模式Singleton 主要作用是保证在Java应用程序中,一个类Class只有一个实例存在. 比如建立目录 ...

  8. SQL语言和DML相关操作以及相应的运算符

    SQL 1.结构化查询语言 2.特点 a.第四代编程语言,更接近自然语言 b必须有数据库系统解释执行 c.对象名,关键字不区分大小写 d.字符串必须要用单引号引起来,不能用双引号 e.每条语句最后用分 ...

  9. Qt 5.7 版本+2013VS环境配置

    原本是使用MSVC5.5.1的版本,碍于习惯,之前一直使用creator,后面才转向VS,因为它的调试实在是太棒了,小程序还是creator调试(比如抽出大程序中的小模块之类的) 不知道是版本问题还是 ...

  10. IE9 不F12打开控制台，代码不执行。打开后正常

    对每个前端er来说,提起来ie就是头大,各种兼容性的问题,让人头大.前两天就在ie9下遇到一个比较少见的问题. 具体情况是这样的: ie9下,js不执行,各种绑定事件不起作用.其他浏览器都6得飞起.当 ...