基于slideout.js实现移动端侧边栏滑动特效


Posted in Javascript onNovember 28, 2016

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

先看下运行效果:

基于slideout.js实现移动端侧边栏滑动特效

一、准备资料

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

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

小图标:

基于slideout.js实现移动端侧边栏滑动特效

二、实现代码

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这么多细节呀,出来效果不就行了么。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
firefox下frameset取不到值的解决方法
Sep 06 Javascript
js转化毫秒为时间格式代码
Apr 10 Javascript
js 数组去重的四种实用方法
Sep 09 Javascript
有效提高JavaScript执行效率的几点知识
Jan 31 Javascript
微信小程序 教程之注册页面
Oct 17 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
Nov 03 Javascript
JS实现的二叉树算法完整实例
Apr 06 Javascript
使用JS获取SessionStorage的值
Jan 12 Javascript
react-redux中connect的装饰器用法@connect详解
Jan 13 Javascript
详解angular如何调用HTML字符串的方法
Jun 30 Javascript
QRCode.js二维码生成并能长按识别
Oct 16 Javascript
微信小程序实现简单表格
Feb 14 Javascript
js实现右键菜单功能
Nov 28 #Javascript
Javascript 判断两个IP是否在同一网段实例代码
Nov 28 #Javascript
详解JS-- 浮点数运算处理
Nov 28 #Javascript
实现隔行换色效果的两种方式【实用】
Nov 27 #Javascript
javascript实现无法关闭的弹框
Nov 27 #Javascript
js格式化时间的简单实例
Nov 27 #Javascript
浅谈jquery页面初始化的4种方式
Nov 27 #Javascript
You might like
一步一步学习PHP(6) 面向对象
2010/02/16 PHP
php英文单词统计器
2016/06/23 PHP
laravel按天、按小时,查询数据的实例
2019/10/09 PHP
php如何实现数据库的备份和恢复
2020/11/30 PHP
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
2009/10/24 Javascript
js写一个弹出层并锁屏效果实现代码
2012/12/07 Javascript
javascript随机将第一个dom中的图片添加到第二个div中示例
2013/10/08 Javascript
JavaScript对内存分配及管理机制详细解析
2013/11/11 Javascript
JS中实现replaceAll的方法(实例代码)
2013/11/12 Javascript
jquery跟js初始化加载的多种方法及区别介绍
2014/04/02 Javascript
jquery删除数据记录时的弹出提示效果
2014/05/06 Javascript
JS动态改变表格边框宽度的方法
2015/03/31 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
2015/12/09 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
2015/12/14 Javascript
jquery Deferred 快速解决异步回调的问题
2016/04/05 Javascript
关于cookie的初识和运用(js和jq)
2016/04/07 Javascript
初探nodeJS
2017/01/24 NodeJs
微信小程序选择图片和放大预览图片功能
2017/11/02 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
2017/11/11 jQuery
使用Vue中 v-for循环列表控制按钮隐藏显示功能
2019/04/23 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
2020/04/21 Javascript
初步讲解Python中的元组概念
2015/05/21 Python
python3 pandas 读取MySQL数据和插入的实例
2018/04/20 Python
使用 Python 实现文件递归遍历的三种方式
2018/07/18 Python
pandas.DataFrame删除/选取含有特定数值的行或列实例
2018/11/07 Python
Python编程深度学习绘图库之matplotlib
2018/12/28 Python
python+selenium 点击单选框-radio的实现方法
2019/09/03 Python
Matplotlib使用Cursor实现UI定位的示例代码
2020/03/12 Python
用canvas画心电图的示例代码
2018/09/10 HTML / CSS
wordpress添加Html5的表单验证required方法小结
2020/08/18 HTML / CSS
经典的班主任推荐信
2013/10/28 职场文书
地球一小时倡议书
2014/04/15 职场文书
借款协议书范本
2014/04/22 职场文书
高三霸气励志标语
2014/06/24 职场文书
2014年实验室工作总结
2014/12/03 职场文书
Django数据库(SQlite)基本入门使用教程
2022/07/07 Python