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

2024-11-29 16:00:04

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

先看下运行效果：

一、准备资料

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

https://github.com/Mango/slideout/blob/master/dist/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这么多细节呀，出来效果不就行了么。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

JS实现的左侧竖向滑动菜单效果代码

本文实例讲述了JS实现的左侧竖向滑动菜单效果代码.分享给大家供大家参考,具体如下: 这是一款经过改造的左侧竖向滑动菜单,基于JavaScript+CSS,没有过多的修饰,主要想实现菜单的动画效果,想用的朋友,自己美化吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-left-scroll-style-menu-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)

当一个页面内容很长的时候,侧边栏栏目可能显得太短,当窗口滑动到靠下的位置,则侧边即失去了展示内容的机会.很多新闻资讯类网站如新浪.网易.CSDN等,会在边栏的右下角以固定的小弹窗形式,以提供更多的内容展示方式,但这并不适合博客和web2.0风格的网站. 现在很多的独立博客和网站如人人网等,都使用了让侧边栏模块随滚动条滑动而位置固定的效果.就是当一个页面很长的时候,设定侧栏内容会跟随滚动条,这种效果适用于评论较多.内容较长的网站.志文工作室调研了几种类似功能的实现方法,摘录之以供参考. 参考一.提
js实现左侧网页tab滑动门效果代码

本文实例讲述了js实现左侧网页tab滑动门效果代码.分享给大家供大家参考.具体如下: 这是一款开口靠左的网页滑动门,网页滑动门,TAB滑动门,竖排滑动门菜单,竖排TAB选项卡,兼容IE6/IE7/FF/opera浏览器.其实竖排和横排的代码基本一样,只不过稍加修改就可以了.只要学会了一种滑动门,就能举一返三了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-left-tab-cha-style-codes/ 具体代码如下: <!DOCTY
js+html5实现侧滑页面效果

本文实例为大家分享了html5实现侧滑页面效果展示的具体代码,供大家参考,具体内容如下 before: after: 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maxim
JS+CSS实现经典的左侧竖向滑动菜单效果

本文实例讲述了JS+CSS实现经典的左侧竖向滑动菜单效果.分享给大家供大家参考.具体如下: 这是一款经过改造的左侧竖向滑动菜单,基于JavaScript+CSS,没有过多的修饰,主要想实现菜单的动画效果,想用的朋友,自己美化吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-jd-left-v-hd-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XH
基于slideout.js实现移动端侧边栏滑动特效

HTML5现在本领太大了,PC端已经无法满足它的胃口了,它将强势攻入移动端,所以移动端中各种特效也得基于HTML5实现,看看我们将要介绍的slideout.js,能帮我们实现怎么样的侧边栏滑动特效呢先看下运行效果: 一.准备资料只需要准备slideout.js库即可: https://github.com/Mango/slideout/blob/master/dist/slideout.js 小图标: 二.实现代码 HTML代码: <!doctype html> <html lang
基于VUE.JS的移动端框架Mint UI的使用

Mint UI GitHub:github.com/ElemeFE/mint 项目主页:mint-ui.github.io/# Demo:elemefe.github.io/mint- 文档:mint-ui.github.io/docs/# 由饿了么前端团队推出的 Mint UI 是一个基于 Vue.js 的移动端组件库.自 6 月初开源以来,根据社区和团队内部的反馈,修复了一些 bug 并新增了部分组件,于本周发布了 0.2.0 版本.本文介绍如何从零开始构建一个使用 Mint UI 的 Vu
详解Vue基于 Nuxt.js 实现服务端渲染（SSR）

直接使用 Vue 构建前端单页面应用,页面源码时只有简单的几行 html,这并不利于网站的 SEO,这时候就需要服务端渲染 2016 年 10 月 25 日,zeit.co 背后的团队对外发布了一个 React 的服务端渲染应用框架 Next.js 几小时后,一个基于 Vue.js 的服务端渲染应用框架应运而生,与 Next.js 异曲同工,这就是Nuxt.js 一.快速模板在已经安装了 vue-cli 的前提下,可以快速创建一个 nuxt 的项目模板 vue init nuxt-commun
JS实现移动端整屏滑动的实例代码

基本思路: 1)检测手指滑动方向:获取手指抬起时的位置,减去手指按下时的位置,得正即为向下滑动了 2)手指抬起后,向对应反向操作改变当前页的位置具体代码如下: html <div id="wrap"> <div id="page01" class="pages">第一屏</div> <div id="page02" class="pages">第二屏<
js实现移动端简易滑动表格

本文实例为大家分享了js实现移动端简易滑动表格的具体代码,供大家参考,具体内容如下上js文件代码 <template> <view> <scroll-view scroll-x="true" class="scroll-table"> <view class="scroll-tr"> <view class="cus-tr cus-th&qu
JS实现移动端上下滑动一次一屏

本文实例为大家分享了JS实现移动端上下滑动一次一屏的具体代码,供大家参考,具体内容如下功能如下: 头部: 附近.关注.推荐选项卡的切换左右滑动功能.头部选项卡跟随动画上下滑动划动一屏,滑动超过头部刷新双击选项卡回到顶部上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport&
微信小程序侧边栏滑动特效(左右滑动)

侧边栏滑动是很常见的功能,但是小程序出来不久,很多特效还没有成熟案例,只能原生重写,所以今天为大家带来4个漂亮的侧边栏特效~~ 侧边栏特效一先看效果: wxml:  <view class="page"> <view class="page-bottom"> <view class="page-content"> <view class=&
Mint UI 基于 Vue.js 移动端组件库

官网地址 http://mint-ui.github.io/ Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率. 真正意义上的按需加载组件.可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大. 考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的重绘和重排,从而使用户获得流畅顺滑的体验. 依托 Vue.js 高效的组件化方案,Mint UI 做到了轻量化.即使全部引
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)

nuxt.js 是一个基于 Vue.js 的服务端渲染应用框架,使用nuxt.js在做同构项目开发时,需要考虑的一些点总结如下: 一.node服务端性能优化(提高node应用程序处理高流量的能力) 基于nuxt.js的服务端渲染项目我们能做的服务端性能优化有以下几点(需要注意的是持久化缓存不应该在本地开发环境去做,这样在缓存期间不会暴露本地开发中代码的问题) 优化点参考文档及思路优化场景/条件特别说明检测方法 1. 页面缓存 vue官方文档页面内容不是用户特定(即对于相同的 URL,总
基于JS实现移动端向左滑动出现删除按钮功能

最近在做移动端项目时,需要实现一个列表页面的每一项item向左滑动时出现相应的删除按钮,本来想着直接使用zepto的touch.js插件,因为之前实现相同的功能时用过这个插件,当时还挺好用的,直接使用它的swipeLeft和swipeRight方法即可,可是今天又开始做这个功能时,却发现这两个方法在使用时毫无效果,一点反应都没有.上网查资料,又下载了最新版本的zepto和touch.js,都没有用,也不知为什么?所以就弃用了这个插件. 下面是我后来实现后的代码,其实就是用了原生js的touch事

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

相关推荐

随机推荐