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. cocos2d-x 坐标系

    OPenGL坐标系:原点为屏幕左下角 屏幕坐标系:原点在屏幕左上角

  2. okhttp-utils的封装之okhttp的使用

    HTTP是现代应用的网络.这就是我们如何交换数据和媒体.让你的东西做HTTP有效负载的速度和节省带宽. okhttp是HTTP客户端的有效默认: HTTP 2支持允许所有请求相同的主机共享一个插座. ...

  3. TFS与Eclipse、Microsoft Visual Studio等客户端以webservice进行交换。

    TFS与eclipse.Microsoft Visual Studio等客户端以webservice进行交互. 参考地址: http://server_ip:8080/tfs/项目区域/version ...

  4. 解决KDE桌面环境下Eclipse崩溃的问题--让Eclipse使用特定的GTK2主题运行

    最近在Kubuntu14.04上安装Eclipse,由于Ubuntu软件中心中的版本太老(3.8),而且会自动安装OpenJDK,于是到官网下载最新的4.4版.(Luna,代号很有亲切感有木有,女神万 ...

  5. instancetype、id、NSObject的联系和区别

    1.id和instancetype都能省去具体类型,提高代码的通用性.而NSObject *则没有这种功能. 2.instancetype只能用于方法的返回类型,而id用处和NSObject *类似. ...

  6. WPF中ListBox的样式设置

    设置之后的效果为

  7. 简述UICollectionView 使用

    一.介绍 UICollectionView类负责管理数据的有序集合以及以自定义布局的模式来呈现这些数据,它提供了一些常用的表格(table)功能,此外还增加了许多单栏布局.UICollectionVi ...

  8. geohash算法原理及实现方式

    1.geohash特点 2.geohash原理 3.geohash的php .python.java.C#实现代码 4.观点讨论 w微博:http://weibo.com/dxl0321 geohas ...

  9. oracle 多级菜单查询 。start with connect by prior

    select * from S_dept where CODE in(select sd.code from s_dept sd start with sd.code='GDKB' connect b ...

  10. TestNG中用Parameters或DataProvider为测试方法传入参数

    转载于网络   一.设置参数 测试方法是可以带有参数的.每个测试方法都可以带有任意数量的参数,并且可以通过使用TestNG的@Parameters向方法传递正确的参数. 设置方式有两种方法:使用 te ...