摘要:一插件官网二基本代码侧边栏控制开关用一个标签来控制侧边栏的开关。插件初始化最后则需要在标签尾部加上初始化插件的代码。另外侧边栏并不需要随着页面的上下滚动始终显示在视口中,所以默认的这个语句并不需要。
一、 插件官网
bigSlide.js
二、 基本代码 侧边栏控制开关用一个 标签来控制侧边栏的开关。#menu 用来指向 id 为 menu 的侧边栏,menu-link 为这个 标签的类名。
☰
侧边栏代码实例
侧边栏代码如下,由于需要实现的效果各不相同,所以各个
引入 JS 文件
文件中还需引入所需的 jQuery 库以及 bigSlide 插件。
插件初始化
最后则需要在 标签尾部加上初始化插件的代码。
三、 样式自定义
侧边栏定位设置
作为侧边栏的
.panel {
left: -20em; /*left or right and the width of your navigation panel*/
width: 20em; /*should match the above value*/
}
行内元素等宽分布
最后一个
/* 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;
}
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/79540.html
摘要:一插件官网二基本代码侧边栏控制开关用一个标签来控制侧边栏的开关。插件初始化最后则需要在标签尾部加上初始化插件的代码。另外侧边栏并不需要随着页面的上下滚动始终显示在视口中,所以默认的这个语句并不需要。 一、 插件官网 bigSlide.js 二、 基本代码 侧边栏控制开关 用一个 标签来控制侧边栏的开关。#menu 用来指向 id 为 menu 的侧边栏,menu-link 为这个 ...
摘要:一插件官网二基本代码侧边栏控制开关用一个标签来控制侧边栏的开关。插件初始化最后则需要在标签尾部加上初始化插件的代码。另外侧边栏并不需要随着页面的上下滚动始终显示在视口中,所以默认的这个语句并不需要。 一、 插件官网 bigSlide.js 二、 基本代码 侧边栏控制开关 用一个 标签来控制侧边栏的开关。#menu 用来指向 id 为 menu 的侧边栏,menu-link 为这个 ...
摘要:设置侧边栏定位有了中间内容区域顶部与页面最上方的距离,以及页面顶部导航栏的高度,侧边栏需要向下移动的距离很容易就算出来了。 用 bigSlide 生成的可滑动侧边栏需要更改其定位和高度属性,更改定位令其与中间内容区域的顶部对齐,更改高度令其与中间内容区域的底部对齐。这个问题可以拆分为下面几个需求来依次实现: 更改侧边栏定位 获取中间内容区域顶部与页面最上方的距离 通过结合 CSS 选择...
阅读 1604·2021-11-24 10:17
阅读 1123·2021-09-29 09:43
阅读 2336·2021-09-23 11:21
阅读 2374·2019-08-30 14:13
阅读 1377·2019-08-29 13:58
阅读 3319·2019-08-28 17:51
阅读 1968·2019-08-26 13:29
阅读 3063·2019-08-26 10:13