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. HTML速查列表

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  2. Ajax做分页

    Ajax做分页 用这种ajax做分页的方法比较简单,把代码直接复制就可以,然后根据实际更改一下里面的参数. .设置分页显示显示的样式,显示效果如下. 复制代码 <style type=" ...

  3. Ubuntu 编译安装 Linux 4.0.5 内核，并修复 vmware 网络内核模块编译错误

    . . . . . 今天把 Ubuntu 14.04 升级到了最新的 4.0.5 的内核版本,本来不打算记录下来的,但是升级的过程中确实遇到了一些问题,所以还是记录下来,分享给遇到同样问题的猿友. 先 ...

  4. Ubuntu 针对 SSD 的优化方案

    . . . . . 首先看下 LZ 的分区情况: >$ sudo fdisk -l Disk /dev/sda: bytes heads, sectors/track, cylinders, t ...

  5. MCS-51系列特殊功能寄存器（摘录）

    MCS-51系列特殊功能寄存器(80H~FFH) 1． P0 (80H) P0.7 P0.6 P0.5 P0.4 P0.3 P0.2 P0.1 P0.0 2．SP 栈指针(81H) 3．DPTR 数据 ...

  6. gdal编译C#开发版本

    gdal的编译比较麻烦,情况有很多种,今天我编译的gdal遇到的问题就和以前的有点不一样,仅供参考借鉴. 1.下载gdal源码 gdal源码下载地址:https://trac.osgeo.org/gd ...

  7. Ubuntu 14.04 (32位)上搭建Hadoop 2.5.1单机和伪分布式环境

    引言 一直用的Ubuntu 32位系统(准备下次用Fedora,Ubuntu越来越不适合学习了),今天准备学习一下Hadoop,结果下载Apache官网上发布的最新的封装好的2.5.1版,配置完了根本 ...

  8. [转] 在Linux平台使用mhVTL虚拟化磁带库

    原文来自:LIUBINGLIN ---- http://blog.itpub.net/23135684/viewspace-1307626/ <在Linux平台安装mhVTL虚拟化磁带库> ...

  9. eclipse插件egit安装使用

    转载http://blog.csdn.net/zhangdaiscott/article/details/16939165 安装问题解决: 1 Cannot complete the install ...

  10. css3浏览器前缀 -mos/-webkit/-o/-ms

    1.css3浏览器前缀的意思 -moz为firefox的前缀: -webkit为safari和chrome的前缀: -o为opera浏览器的前缀: -ms为ie浏览器的前缀: 2.常见的需要使用浏览器 ...