一、 插件官网

bigSlide.js

二、 基本代码

侧边栏控制开关

用一个 标签来控制侧边栏的开关。# menu 用来指向 id 为 menu 的侧边栏，menu-link 为这个 标签的类名。

☰

侧边栏代码实例

侧边栏代码如下，由于需要实现的效果各不相同，所以各个 1. 标签中设置的 style 并不一样，这样的代码看起来很乱，其实还是应该写在css中，并根据效果进行分类。

1. 第3节课 / 共4节课：

2. 上一节课
   |
   下一节课

引入 JS 文件

文件中还需引入所需的 jQuery 库以及 bigSlide 插件。

插件初始化

最后则需要在 标签尾部加上初始化插件的代码。

$(document).ready(function() {
$('.menu-link').bigSlide();
});

三、 样式自定义

侧边栏定位设置

作为侧边栏的 标签类名为 panel，因为初始状态下需要让该标签隐藏在页面视口之外，所以需要作如下设置。另外侧边栏并不需要随着页面的上下滚动始终显示在视口中，所以默认的 position: fixed; 这个语句并不需要。

.panel {
left: -20em; /left or right and the width of your navigation panel/
width: 20em; /should match the above value/
}

行内元素等宽分布

最后一个 标签中的 标签设置为了 even 这个类，是为了让 标签中的多个 元素等宽分布，代码如下：

/ http://stackoverflow.com/questions/7245018/how-to-evenly-distribute-elements-in-a-div-next-to-each-other
将需要均匀分布的元素的外部 div 设置为 table，
table-layout 设置为 fixed，可让各元素占据相同宽度 /
div.even {
display: table;
width: 100%;
table-layout: fixed; / 各子元素宽度相同 /
}
div.even span {
display: table-cell;
text-align: center;
}

关键字：html, css, JavaScript, 侧边栏

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！