js 点击侧边栏展示内容_Sideout.JS 轻量级侧边栏jQuery插件

Sideout.JS 轻量级侧边栏jQuery插件

三月 9, 2015

评论

Sponsor

在兼容移动手机的网站中，它的导航设计一般使用了侧边栏方式，就像某些APP应用一样，导航从侧边滑出。其实之前我们也分享过《好用的侧边栏菜单/面板jQuery插件》以及《15个响应式设计的导航菜单jQuery插件》，里面有不少的相关菜单插件。

今天和大家分享的是一个轻量的侧边栏jQuery插件：Sideout.JS，该插件支持桌面平台、平台以及手机端。并用插件大小仅4KB。

该插件在移动设备下，还要以用触摸方式来展开导航，体验不错。

浏览器兼容

Chrome (IOS, Android, desktop)

Firefox (Android, desktop)

Safari (IOS, Android, desktop)

Opera (desktop)

IE 10+ (desktop)

使用教程

STEP 1: HTML 代码

Menu

Panel

STEP 2: CSS 样式

html,

body {

width: 100%;

height: 100%;

}

.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;

}

.slideout-panel {

position:relative;

z-index: 1;

}

.slideout-open,

.slideout-open body {

overflow: hidden;

}

.slideout-open .slideout-menu {

display: block;

}

html,

body {

width: 100%;

height: 100%;

}

.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;

}

.slideout-panel {

position:relative;

z-index: 1;

}

.slideout-open,

.slideout-open body {

overflow: hidden;

}

.slideout-open .slideout-menu {

display: block;

}

STEP 3: 引入jQuery插件以及加上定义脚本

var slideout = new Slideout({

'panel': document.getElementById('panel'),

'menu': document.getElementById('menu'),

'padding': 256,

'tolerance': 70

});

推荐：查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com

交流：结交更多有才华的设计师？请加入UI设计QQ群，与50000名设计师交流设计。

赞助商链接

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。

版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。

{ 发表评论 }

姓 名 (必填)

邮 件 (必填)

网 站