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

先看下运行效果：

一、准备资料

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

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

小图标：

1）menu.png


2）happy.png

二、实现代码

HTML代码：

<!doctype html>

<html lang="zh">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>适合移动手机的侧边栏滑动代码 - 站长素材</title>

<link rel="stylesheet" href="css/styles.css">

</head>

<body>

<nav id="menu" class="menu">

  <a href="#" target="_blank">

    <header class="menu-header">

      <span class="menu-header-title">主题</span>

    </header>

  </a>

  <section class="menu-section">

    <h3 class="menu-section-title">脚本代码</h3>

    <ul class="menu-section-list">

      <li><a href="#" target="_blank">jQuery</a></li>

      <li><a href="#" target="_blank">CSS3</a></li>

      <li><a href="#" target="_blank">HTML5</a></li>

      <li><a href="#" target="_blank">动画效果</a></li>

    </ul>

  </section>

  <section class="menu-section">

    <h3 class="menu-section-title">flash动画</h3>

    <ul class="menu-section-list">

      <li><a href="#" target="_blank">节日动画</a></li>

      <li><a href="#" target="_blank">flash植物</a></li>

      <li><a href="#">flash动物</a></li>

    </ul>

  </section>

  <section class="menu-section">

    <h3 class="menu-section-title">音效下载</h3>

    <ul class="menu-section-list">

      <li><a href="#" target="_blank">鸟叫声</a></li>

      <li><a href="#" target="_blank">狗叫声</a></li>

    </ul>

  </section>

</nav>

<main id="main" class="panel">

    <button class="btn-hamburger js-slideout-toggle">

      <span class="tooltip">点击打开</span>

    </button>

</main>

<script type="text/javascript" src="js/slideout.min.js"></script>

<script type="text/javascript">

    var slideout = new Slideout({

        'panel': document.getElementById('main'),

        'menu': document.getElementById('menu'),

        'padding': 256,

        'tolerance': 70

     });

     document.querySelector('.js-slideout-toggle').addEventListener('click', function() {

        slideout.toggle();

     });

     document.querySelector('.menu').addEventListener('click', function(eve) {

        if (eve.target.nodeName === 'A') { slideout.close(); }

     });

</script>

</body>

</html>

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

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

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

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

CSS代码：

html,

body {

  width: 100%;

  height: 100%;

  font: 100%/1.4em 'Calibre Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  margin: 0 auto;

  color: #222;

  -webkit-text-size-adjust: none;

  -webkit-font-smoothing: antialiased;

}

pre {

  margin: 0;

  font-size: 14px;

}

body,

.panel {

  background-color: #fff;

}

.menu {

  background-color: #1D1F20;

  background-image: linear-gradient(145deg, #1D1F20, #404348);

}

a {

  color: #4B5;

  text-decoration: none;

}

.menu a {

  color: #fff;

}

.menu a:hover {

  text-decoration: underline;

}

.menu-header {

  border-bottom: 1px solid #2a2d2f;

  padding: 20px 0 20px 60px;

  background: url('../images/github.png') no-repeat 15px 15px;

  background-size: 32px;

}

.menu-header-title {

  font-weight: 400;

  letter-spacing: 0.5px;

  margin: 0;

}

.menu-section {

  margin: 25px 0;

}

.menu-section-title {

  text-transform: uppercase;

  color: #85888d;

  font-weight: 200;

  font-size: 13px;

  letter-spacing: 1px;

  padding: 0 20px;

  margin:0;

}

.menu-section-list {

  padding:0;

  margin: 10px 0;

  list-style:none;

}

.menu-section-list a {

  display: block;

  padding: 10px 20px;

}

.menu-section-list a:hover {

  background-color: rgba(255, 255, 255, 0.1);

  text-decoration: none;

}

.panel {

  text-align: center;

  padding-top: 5px;

  min-height: 100%;

}

/**

 * hamburger

 */

.btn-hamburger {

  border: none;

  position: absolute;

  top: 12px;

  left: 12px;

  outline:none;

  background: url('../images/menu.png') no-repeat left center;

}

.tooltip {

  font-size: 20px;

  line-height: 19px;

  display: inline-block;

  background: #4B5 url('../images/happy.png') no-repeat 135px 15px;

  color: #fff;

  padding: 10px 45px 10px 20px;

  border-radius: 4px;

  position: relative;

  left: 50px;

}

/**

 * Medium Screens

 */

@media all and (min-width:40em) {

  .btn-hamburger {

    top: 20px;

    left: 30px;

  }

  .panel-header {

    margin-top: 40px;

    width: 455px;

  }

  .title {

    font-size: 4.2em;

  }

  .subtitle {

    font-size: 1.8em;

  }

  .btn-download {

    margin-right: 20px;

  }

  .btn-fork {

    margin-left: 20px;

  }

}

.menu,

.slideout-menu {

  position: fixed;

  left: 0;

  top: 0;

  bottom: 0;

  right: 0;

  z-index: 0;

  width: 256px;

  overflow-y: scroll;

  -webkit-overflow-scrolling: touch;

  display: none;

}

.panel,

.slideout-panel {

  position: relative;

  z-index: 1;

}

.slideout-open,

.slideout-open body {

  overflow: hidden;

}

.slideout-open .slideout-menu {

  display: block;

}

上面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. Erlang 从入门到精通（一） 下载安装

    我的电脑配置: 系统:win8.1  x64 内存:16G 在官网下载http://www.erlang.org/

  2. RESULT:0x80029C4A (TYPE_E_CANTLOADLIBRARY))

    无法将类型为"Microsoft.Office.Interop.Excel.ApplicationClass"的 COM 对象强制转换为接口类型"Microsoft.Of ...

  3. Jquery Mobile 动态添加元素然后刷新 转

    Jquery Mobile 动态添加元素然后刷新 (2013-05-09 12:39:05) 转载▼ 标签: it 分类: Mobile jquery 表单元素每一个元素都有自己刷新的方法,每当改变它 ...

  4. [转载]Altium规则详解及设置

    在Altium中进行PCB的设计时,经常会使用规则(Rule)来进行限定以确定线宽孔径等参数,此文将简要的介绍规则中的一些标量代表了什么. Electrical——电气规则.安全间距,线网连接等 Ro ...

  5. wpf 任务栏闪烁

    [StructLayout(LayoutKind.Sequential)] public struct FLASHWINFO { public UInt32 cbSize; public IntPtr ...

  6. python 基础理解...

    class obj(object): def __getattribute__(self, *args, **kwargs): # 访问属性就会被调用 print("__getattribu ...

  7. c语言使用zlib实现文本字符的gzip压缩与gzip解压缩

    网络上找到的好多方法在解压缩字符串的时候会丢失字符,这里是解决方法: http://stackoverflow.com/questions/21186535/compressing-decompres ...

  8. XML文件操作（C#）

    XML应用于Web开发的许多方面,常用于简化数据的存储和共享,它的设计宗旨是传输数据,而非显示数据.下面简单介绍一下C#是如何对XML文件进行读取的. 1.首先,建立XML对象并关联XML文件 str ...

  9. 使用 IntraWeb (42) - 测试读取 SqLite (一)

    为通过 FireDAC(XE5开始支持的) 使用 SqLite, 现在已换成 XE6 + IntraWeb v14.0.32 Ultimate. 首先把官方提供的 C:\Users\Public\Do ...

  10. Training Deep Neural Networks

    http://handong1587.github.io/deep_learning/2015/10/09/training-dnn.html  //转载于 Training Deep Neural ...