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. Keynote of Python III

    [Keynote of Python III] 1.许多大型网站是用Python开发的,例如YouTube.Instagram,还有国内的豆瓣.很多大公司,包括Google.Yahoo等,甚至NASA ...

  2. SQLServer2008R2 mdf文件还原数据库

    偶然遇到要用mdf文件restore数据库,试了2个小时才弄出来,百度查出来的我试了都不太好用,或者是我没理解. 下面把我用的记录一下,以防忘记. 工具:SQLServer 2008R2 步骤: 1. ...

  3. Tomcat启动过程中找不到JAVA_HOME解决方法

    在XP上明明已经安装了JDK1.5并设置好了JAVA_HOME,可偏偏Tomcat在启动过程中找不到. 报错信息如下:Neither the JAVA_HOME nor the JRE_HOME en ...

  4. C#语法灵活运用之排列组合算法

    今天群里有朋友求一个排列组合算法,题目是给定长度,输出所有指定字母的组合. 如指定字母a.b.c.d.e.f,长度为2,则结果应为:aa.ab.ac ... ef.ff. 有朋友给出算法,很有特色: ...

  5. POJ1201 区间

    题目大意: 给定n个整数区间[ai,bi]和n个整数ci,求一个最小集合Z,满足|Z∩[ai,bi]|>=ci(Z里边在闭区间[ai,bi]的个数不小于ci). 多组数据: n(1<=n& ...

  6. SharedPreferences的基本数据写入和读取

    1.布局 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android ...

  7. easyul获取各种属性ID 和赋值

    //span赋值 $('#state1').text("审核通过"); //textarea赋值 $("#memo").val('');  //隐藏域 $(&q ...

  8. Python：面向对象

    面向过程:根据业务逻辑从上到下写垒代码 面向对象:对函数进行分类和封装 函数式:将某功能代码封装到函数中,日后便无需重复编写,仅调用函数即可 类:用来描述具有相同属性和方法的对象的集合,定义了该集合中 ...

  9. js点击按钮倒计时setTimeout和setInterval

    setTimeout() 用于在指定的毫秒数后调用函数或计算表达式,只执行 code 一次. setInterval() 可按照指定的周期(以毫秒计)来调用函数或计算表达式,不停地调用函数,直到 cl ...

  10. gawk快速入门

    基本定义: gawk 的主要功能是针对文本的每一行执行被指定的 actions. 命令格式: gawk option program file option: -F 指定的分隔符,默认的分隔符是空格, ...