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. 深入理解js——继承

    JavaScript中继承是通过原型链来体现的. function Foo(){} var f1=new Foo(); f1.a=10; Foo.prototype.a=100; Foo.protot ...

  2. Linux内核分析第五周学习总结：扒开系统调用的三层皮（下）

    韩玉琪 + 原创作品转载请注明出处 + <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 一.给MenuO ...

  3. cms替换主页的步骤

    cms替换主页的步骤 .先做好静态页面: .在D:\wamp\www\phpcms\install_package\phpcms\templates文件夹下建新的文件夹tianqiwangluo(项目 ...

  4. 奔小康赚大钱 hdu 2255( KM )

    http://acm.split.hdu.edu.cn/showproblem.php?pid=2255 带权匹配问题: #include <stdio.h> #include <a ...

  5. Java学习笔记15--引用传递

    范例一 class Demo{ public int temp = 30; } public class T { public static void main(String[] args) { // ...

  6. idhttp的用法

    1)POST function PostMethod(http: TIDhttp; URL: string; Params: TStringList): string;var RespData: TS ...

  7. 浏览器css bug及bug解决方法

    Bugs及解决方案列表(以下实例默认运行环境都为Standard mode): 如何在IE6及更早浏览器中定义小高度的容器? 方法: #test{overflow:hidden;height:1px; ...

  8. 关于Plupload结合上传插件jquery.plupload.queue的使用

    之前使用过很多的上传组件,但对各种浏览器的兼容性太差,不得不放弃!! plupload 是款很强大的上传组件,不得不推荐.plupload 前端根据浏览器不同选择使用Html5. Gears, Sil ...

  9. 子元素的div不继承父元素的透明度

    问题一: 如何让logo部变成这样: 步骤一:先收一个大的div,上面logo+nav再一个div,下面是三个div横排着: 步骤二:最主要的是如何让上面的部分变暗,而logo的颜色不变暗? 答案:在 ...

  10. N皇后

    #include <stdio.h> #include <math.h> ], a[]; /*int place(int k) { for(int i = 1; i < ...