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

先看下运行效果：

一、准备资料

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

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

小图标：

二、实现代码

超文本标记语言代码：

！doctype html html lang=' zh ' hearta 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适合移动手机的侧边栏滑动代码-站长素材/titlelink rel='样式表href=' CSS/style。CSS/header dynav 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 ' lia href=' # ' target=' _ blank ' jquery/a/Li lia href=' # target=' _ blank ' css3/a/Li lia href=' # ' target=' _ blank ' html 5/a/Li lia href=' # ' target=' _ blank '动画效果/a/Li/ul/section section='菜单-部分='菜单-部分-标题'闪烁动画/H3 ul class=' menu-section-list ' lia href=' # ' target=' _ blank '节日动画/a/Li闪存植物/a/li lia href='# '闪光灯动物/a/Li/ul/section section class=' menu-section ' class=' menu-section-title '音效下载/H3 ul class=' menu-section-list ' lia href=' # ' target=' _ blank '鸟叫声/a/li lia href='#' target='_blank '狗叫声/a/Li/ul/section/nav main id=' main ' class=' panel ' button class=' BTN-汉堡js-滑出-切换' span class='工具提示'点击打开/span/button/mainscript type=' text/JavaScript ' src=' http : js/滑出。 量滴js '/script脚本类型=' text/JavaScript ' var滑出=新滑出({ ' panel ' :文档。getelementbyid(' main ')，' menu ' :文档。getelementbyid(' menu ')，' padding': 256 '容差' : 70 });document.querySelector(' .js-滑出-切换').addEventListener('click ')，function(){滑出。toggle()；});document.querySelector(' .菜单')。添加事件侦听器(“单击”)，函数如果。目标。nodename===' A '){滑出。close()；} });/脚本/正文/html结构代码一项简单，主要注意一下滑出的用法，它传的几个参数：

面板：是指主要面板，指整个内容展示区域

菜单：是指被隐藏的左侧菜单栏区域

填充：指点击按钮后，向右滑动的距离

半铸钢钢性铸铁(铸造半钢)代码：

html，正文{宽度： 100%；高度： 100%;字体： 100%/1.4 em ' Calibre Light '，' Helvetica Neue '，Helvetica，Arial，无衬线；margin : 0 auto color : # 222-web kit-text-size-adjust :无；-网络套件-字体-流畅：抗锯齿；} pre { margin : 0；font-size : 14px}身体，面板{底色： # fff}.菜单{底色： # 1D 1 F20；背景-图像：线性-渐变(145度、#1D1F20、# 404348)；} a { color: # 4B5文本装饰：无；}.菜单a { color: # fff}。菜单a :悬停{文本装饰：下划线；}.菜单-标题{边框-底部： 1px实心# 2a 2d 2fpadding: 20px 0 20px 60px背景： url('./images/github。png ')无重复15px 15px背景尺寸size: 32px}。菜单-标题-标题{ font-weight : 400；字母间距0.5p xmargin : 0；}.菜单-部分{ margin : 25px 0；}.菜单-部分-标题{文本转换：大写；color : # 85888 dfont-weight : 200；font-size : 13px字母间距1 xpadding : 0 20pxmargin :0 }。菜单-部分-列表{ padd :0 margin : 10px 0；列表式：无；}.菜单-部分-列表{ display:块；padding: 10px 20px }。菜单-部分-列表a :悬停{背景色： rgba(255，255，255，0.1)；文本装饰：无；}.面板{ text-align :居中；衬垫-top : 5px；最小高度： 100%;}/** *汉堡*/。BTN汉堡{ border:无绝对位置：top : 12pxleft : 12pxoutline : none背景： url('./图像/菜单。png ')不重复左中；}.工具提示{ font-size : 20px线高： 19px显示器：内联块；background: #4B5 url('./图片/快乐。png ')无重复135 px 15pxcolor : # fffpadding : 10px 45px 10px 20px border-radius : 4px；相对位置：left: 50px}/** *中型屏幕*/@所有媒体和（最小宽度：40em) { .BTN-汉堡{ top : 20pxleft: 30px}。面板-标题{ margin-top : 40px；宽度： 455像素；} .title { font-size : 4.2 em} .字幕{ font-size : 1.8 em} .BTN下载{右边距： 20px} .BTN-福克{页边空白-左侧： 20px}}.菜单，滑出式菜单{位置：固定；左： 0；top : 0；底部： 0；右： 0；z-index : 0；宽度： 256像素；溢出-y:滚动；-WebKit-溢出-滚动3360触摸；显示器：无；}.面板，滑出面板{相对位置：z-index : 1；}.滑出-打开。滑出-打开机身{ overflow:隐藏；}.滑出-打开。滑出菜单{显示：块；}上面钢性铸铁代码可能有些有点多余，但是我们没必要在乎这么多细节呀，出来效果不就行了么。

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