基于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 相关文章推荐
Javascript注入技巧
Jun 22 Javascript
angularjs客户端实现压缩图片文件并上传实例
Jul 06 Javascript
jQuery 常用代码集锦(必看篇)
May 16 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
Aug 27 Javascript
Ajax基础知识详解
Feb 17 Javascript
在node中如何使用 ES6
Apr 22 Javascript
详解Node.js 命令行程序开发教程
Jun 07 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
一文了解vue-router之hash模式和history模式
May 31 Javascript
JavaScript之数组扁平化详解
Jun 03 Javascript
vue项目中将element-ui table表格写成组件的实现代码
Jun 12 Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
Nov 09 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初学者头痛的十四个问题
2006/07/12 PHP
PHP生成静态页
2006/11/25 PHP
php park、unpark、ord 函数使用方法(二进制流接口应用实例)
2010/10/19 PHP
PHP __autoload函数(自动载入类文件)的使用方法
2012/02/04 PHP
数理公式,也可以这么唯美
2021/03/10 无线电
JS日历 推荐
2006/12/03 Javascript
javascript 保存文件到本地实现方法
2012/11/29 Javascript
jQuery的load()方法及其回调函数用法实例
2015/03/25 Javascript
jquery判断密码强度的验证代码
2020/04/22 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
2016/08/04 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
2017/04/07 Javascript
vue.js删除动态绑定的radio的指定项
2017/06/02 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
2018/12/11 Javascript
JS实现旋转木马轮播图
2020/01/01 Javascript
[52:31]VP vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
用ReactJS和Python的Flask框架编写留言板的代码示例
2015/12/19 Python
Python中fnmatch模块的使用详情
2018/11/30 Python
解决Python中定时任务线程无法自动退出的问题
2019/02/18 Python
浅谈sklearn中predict与predict_proba区别
2020/06/28 Python
解决python pandas读取excel中多个不同sheet表格存在的问题
2020/07/14 Python
html5通过canvas实现刮刮卡效果示例分享
2014/01/27 HTML / CSS
详解如何在登录过期后跳出Ifram框架
2020/09/10 HTML / CSS
个性化皮包、小袋、生活配件:Mon Purse
2019/03/26 全球购物
英国豪华家具和经典家居饰品购物网站:OKA
2020/06/05 全球购物
局域网标准
2016/09/10 面试题
总经理助理职责
2014/02/04 职场文书
学习2014年全国两会心得体会
2014/03/12 职场文书
关于青春的演讲稿500字
2014/08/22 职场文书
领导班子党的群众路线对照检查材料
2014/09/25 职场文书
公司领导班子民主生活会对照检查材料
2014/10/02 职场文书
感谢信怎么写
2015/01/21 职场文书
2015年学校减负工作总结
2015/05/19 职场文书
民间借贷借条如何写
2015/05/26 职场文书
nginx从安装到配置详细说明(安装,安全配置,防盗链,动静分离,配置 HTTPS,性能优化)
2022/02/12 Servers
Golang ort 中的sortInts 方法
2022/04/24 Golang
详解OpenCV获取高动态范围(HDR)成像
2022/04/29 Python