基于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 相关文章推荐
经典的解除许多网站无法复制文字的绝招
Dec 31 Javascript
JQuery 学习笔记 element属性控制
Jul 23 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
Nov 08 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
Nov 26 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
Mar 26 Javascript
JS查找英文文章中出现频率最高的单词
Mar 20 Javascript
JS请求servlet功能示例
Jun 01 Javascript
老生常谈js数据类型
Aug 03 Javascript
vue父组件异步获取数据传给子组件的方法
Jul 26 Javascript
Vue 实现从文件中获取文本信息的方法详解
Oct 16 Javascript
多个Vue项目部署到服务器的步骤记录
Oct 22 Javascript
SpringBoot在yml配置文件中配置druid的操作
Nov 16 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 上传文件的方法(类)
2009/07/30 PHP
php根据年月获取季度的方法
2014/03/31 PHP
Laravel 连接(Join)示例
2019/10/16 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
2007/02/05 Javascript
ExtJS 2.0实用简明教程之应用ExtJS
2009/04/29 Javascript
理解JavaScript中的对象 推荐
2011/01/09 Javascript
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
2011/11/30 Javascript
网站接入QQ登录的两种方法
2014/07/22 Javascript
jqueryMobile使用示例分享
2016/01/12 Javascript
避免jQuery名字冲突 noConflict()方法
2016/07/30 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
2017/04/05 Javascript
Vue中JS动画与Velocity.js的结合使用
2019/02/13 Javascript
jQuery中each和js中forEach的区别分析
2019/02/27 jQuery
记一次用vue做的活动页的方法步骤
2019/04/11 Javascript
基于VUE的v-charts的曲线显示功能
2019/10/01 Javascript
在Express中提供静态文件的实现方法
2019/10/17 Javascript
[50:29]2014 DOTA2华西杯精英邀请赛 5 24 DK VS iG
2014/05/26 DOTA
python解析模块(ConfigParser)使用方法
2013/12/10 Python
Cpy和Python的效率对比
2015/03/20 Python
Python字符串切片操作知识详解
2016/03/28 Python
python 截取 取出一部分的字符串方法
2017/03/01 Python
python WindowsError的错误代码详解
2017/07/23 Python
python对list中的每个元素进行某种操作的方法
2018/06/29 Python
Python Web框架之Django框架Form组件用法详解
2019/08/16 Python
python中有帮助函数吗
2020/06/19 Python
最新PyCharm 2020.2.3永久激活码(亲测有效)
2020/11/26 Python
英国家庭和商业健身器材购物网站:Fitness Options
2018/07/05 全球购物
Farnell德国:电子元器件供应商
2018/07/10 全球购物
商务英语专业应届毕业生求职信
2013/10/28 职场文书
计算机应用专业毕业生求职信
2014/06/03 职场文书
市政工程技术专业自荐书
2014/07/06 职场文书
旅游活动总结
2014/08/27 职场文书
新员工实习期个人工作总结
2015/10/15 职场文书
python编写五子棋游戏
2021/05/25 Python
Android Rxjava3 使用场景详解
2022/04/07 Java/Android