一、 插件官网
二、 基本代码
侧边栏控制开关
用一个 <a>
标签来控制侧边栏的开关。#menu
用来指向 id
为 menu
的侧边栏,menu-link
为这个 <a>
标签的类名。
<a href="#menu" class="menu-link">☰</a>
侧边栏代码实例
侧边栏代码如下,由于需要实现的效果各不相同,所以各个 <li>
标签中设置的 style
并不一样,这样的代码看起来很乱,其实还是应该写在css中,并根据效果进行分类。
<ul id="menu" class="panel" role="navigation" style="height: auto;">
<li style="line-height: 7em; border-bottom: 1px solid #fff;">
<a href="sub2.htm" style="font-size: 16px;"><b>< 所有课程内容</b></a>
</li>
<li style="padding-top: 1em; line-height: 3em;">
<a>第3节课 / 共4节课:</a>
</li>
<li style="padding-top: 1em; padding-bottom: 2em; line-height: 3em;">
<div class="even">
<span><a>上一节课</a></span>
<span>|</span>
<span><a>下一节课</a></span>
</div>
</li>
</ul>
引入 JS 文件
文件中还需引入所需的 jQuery 库以及 bigSlide 插件。
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="slide/bigSlide.js"></script>
插件初始化
最后则需要在 <body>
标签尾部加上初始化插件的代码。
<script>
$(document).ready(function() {
$('.menu-link').bigSlide();
});
</script>
三、 样式自定义
侧边栏定位设置
作为侧边栏的 <ul>
标签类名为 panel
,因为初始状态下需要让该标签隐藏在页面视口之外,所以需要作如下设置。另外侧边栏并不需要随着页面的上下滚动始终显示在视口中,所以默认的 position: fixed;
这个语句并不需要。
.panel {
left: -20em; /*left or right and the width of your navigation panel*/
width: 20em; /*should match the above value*/
}
行内元素等宽分布
最后一个 <li>
标签中的 <div>
标签设置为了 even
这个类,是为了让 <div>
标签中的多个 <span>
元素等宽分布,代码如下:
/* 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;
}