强迫症
发了第一篇翻译文档之后,觉得篇幅较长时不知道目前窗口处在文章的哪个章节,有点不方便,所以考虑加个自定义的导航。
经过搜索,发现之前已经有很多高手都做了自定义目录或者导航,于是我从大牛数据之巅的美化博客教程中扒来了代码。也学习了怎么自定义博客的样式和JS。感谢大牛!
修改
然后根据自己的想法,做了一些修改:
1. 原来代码是向下滚动固定高度后,显示导航。但是右边栏内容是动态的,所以这个固定的高度值不好设定,导航会挡到边栏内容,看起来不太舒服。所以改了一点,加载页面后根据边栏的实际高度设定导航出现的时机。
2. 增加了鼠标悬停的效果。
3. 增加了返回顶部的按钮。
4. 原代码固定显示2级目录,改了一下,当目录不长时,显示H2/H3/H4这3级标题,如果这样目录太长的话,就显示H2/H3。因为自定义的导航容器高度是固定的,太长有一些就不显示了。本来也想把导航内容也做成可以滚动的,但是有点小复杂。我是菜鸟,反正一般文章也不会太长,真要超出导航范围就分成两篇发,凑合着用吧,哈哈哈。
代码不太熟悉,写的不好的地方,大家请多指教!
实际完成之后效果如下:
效果图
修改后的JS代码
1 $(document).ready(function () {
2 toolbar = '<div id="sideToolbar" style="display:none;">\
3 <div class="sideCatalogBg" id="sideCatalog">\
4 <div id="sideCatalog-sidebar">\
5 <div class="sideCatalog-sidebar-top">\
6 </div>\
7 <div class="sideCatalog-sidebar-bottom">\
8 </div>\
9 </div>\
10 <div id="sideCatalog-catalog">\
11 <ul class="nav" style="width:300px;zoom:1">\
12 </ul>\
13 </div>\
14 </div>\
15 <a href="javascript:void(0);" id="sideCatalogBtn" class="sideCatalogBtnDisable"></a>\
16 <a href="javascript:void(0);" id="sideToolbar-up"></a>\
17 </div>',
18 catalog_item = '',
19 l = 1, m = 1, n = 1,
20 s = $('#cnblogs_post_body'); //#cnblogs_post_body是正文内容div
21 if (s.length === 0) {
22 return
23 }
24 ;
25 $('body').append(toolbar);
26 headers = s.find(':header'); //查找正文内所有标题 h1~h6
27 catalog_item += '<li><span style="font-size: 14pt; font-weight: bold;">本文目录</span></li>';
28 headers.each(function () { //遍历所有的header
29 var xheader = $(this), //当前的header的对象
30 v = xheader[0];
31
32 var text = xheader.text();
33
34 xheader.attr('id', 'autoid-' + l + '-' + m + '-' + n)
35
36 if (v.localName === 'h2') {
37 level1 = l + '.';
38 if (text.length > 26) text = text.substr(0, 26) + "...";
39 catalog_item += '<li><a href="#' + xheader.attr('id') + '" title="' + text + '">' + l + ' ' + text + '</a><span class="sideCatalog-dot pointer"></span></li>';
40 l++;
41 } else if (v.localName === 'h3') {
42 level2 = level1 + m + '.';
43 if (text.length > 22) text = text.substr(0, 22) + "...";
44 catalog_item += '<li class="h2Offset"><a href="#' + xheader.attr('id') + '" title="' + text + '">' + level1 + m + ' ' + text + '</a><span class="pointer"></span></li>';
45 m++;
46 } else if (v.localName === 'h4') {
47 if (s.find('h2').length + s.find('h3').length + +s.find('h4').length < 17) {
48 if (text.length > 18) text = text.substr(0, 18) + "...";
49 catalog_item += '<li class="h3Offset"><a href="#' + xheader.attr('id') + '" title="' + text + '">' + level2 + n + ' ' + text + '</a><span class="pointer"></span></li>';
50 n++;
51 }
52 }
53 });
54 $('#sideCatalog-catalog>ul.nav').html(catalog_item);
55 $('body').scrollspy({
56 offset: 50,
57 target: '.sideCatalogBg'
58 });
59
60 $('body').on('activate.bs.scrollspy', function () {
61 $("ul.nav li.active span").toggleClass("highlight")
62 });
63
64 $sideCatelog = $('#sideCatalog');
65 $('#sideCatalogBtn').on('click', function () {
66 if ($(this).hasClass('sideCatalogBtnDisable')) {
67 $sideCatelog.css('visibility', 'hidden')
68 } else {
69 $sideCatelog.css('visibility', 'visible')
70 }
71 $(this).toggleClass('sideCatalogBtnDisable');
72 });
73
74
75 $('#sideToolbar-up').on('click', function () {
76 $("html,body").animate({
77 scrollTop: 0
78 }, 500)
79 });
80
81 //希望在sidebar加载完后,在下方空白的地方才显示目录
82 //博客园的sidebar也是JS加载,测试时发现在其加载完之前,下面的sidebar_height就已经计算了,导致误差。所以加了延迟1秒
83 setTimeout(function () {
84 sidebar_height = $('#sideBarMain').height();
85 $sideToolbar = $('#sideToolbar');
86 $(document).on('scroll', function () {
87 var t = $(document).scrollTop();
88 if (t > sidebar_height + 120) {
89 $sideToolbar.css('display', 'block')
90 } else {
91 $sideToolbar.css('display', 'none')
92 }
93 })
94 }, 1000);
95
96 });
修改后的CSS
1 /*定义整个目录框架的大小*/
2 #sideToolbar {
3 position: fixed;
4 bottom: -10px; /*距离页面底部的距离,不能设置过小,否则按钮看不到无法关闭*/
5 right: 15px;
6 width: 300px;
7 height: 450px
8 }
9
10 #sideCatalog {
11 background-color: #fff;
12 padding-bottom: 10px;
13 border-radius: 5px;
14 }
15
16 #sideCatalog-sidebar {
17 -moz-border-bottom-colors: none;
18 -moz-border-left-colors: none;
19 -moz-border-right-colors: none;
20 -moz-border-top-colors: none;
21 background-color: #eaeaea;
22 /*border-color: -moz-use-text-color #eaeaea;*/
23 border-image: none;
24 border-left: 1px solid #eaeaea;
25 border-right: 1px solid #eaeaea;
26 border-style: none solid;
27 border-width: 0 1px;
28 height: 353px;
29 left: 5px;
30 position: absolute;
31 top: 0;
32 width: 0
33 }
34
35 /*目录形成的范围*/
36 #sideCatalog-catalog {
37 height: 325px;
38 padding-top: 18px;
39 overflow: hidden;
40 padding-left: 23px;
41 position: relative
42 }
43
44 #sideCatalog #sideCatalog-sidebar .sideCatalog-sidebar-top {
45 cursor: pointer;
46 top: 0
47 }
48
49 #sideCatalog #sideCatalog-sidebar .sideCatalog-sidebar-bottom {
50 bottom: 0
51 }
52
53 #sideCatalog #sideCatalog-sidebar .sideCatalog-sidebar-top, #sideCatalog #sideCatalog-sidebar .sideCatalog-sidebar-bottom {
54 /*黑白圆圈*/
55 background: url("sideToolbar.gif") no-repeat scroll 0 -199px transparent;
56 height: 10px;
57 left: -5px;
58 overflow: hidden;
59 position: absolute;
60 width: 10px
61 }
62
63 #sideCatalog li {
64 margin: 0px;
65 padding: 0 7px;
66 text-align: left;
67 position: relative
68 }
69
70 /*#sideCatalog li:hover {*/
71 /*background-color: #f5f5f5*/
72 /*}*/
73 #sideCatalog-catalog ul .active {
74 background-color: #f5f5f5
75 }
76
77 #sideCatalog-catalog .active a {
78 color: #519cea
79 }
80
81 #sideCatalog-catalog a:hover {
82 background-color: transparent;
83 color: #519cea
84 }
85
86 #sideCatalog span:first-child {
87 color: #999;
88 font-family: Arial;
89 font-size: 14px;
90 font-weight: bold;
91 padding-right: 5px
92 }
93
94 /*这里比较重要,设置h2级别目录的缩进和左边距*/
95 #sideCatalog li.h2Offset {
96 padding-left: 45px;
97 text-indent: -25px
98 }
99
100 /*这里比较重要,设置h3级别目录的缩进和左边距*/
101 #sideCatalog li.h3Offset {
102 padding-left: 90px;
103 text-indent: -50px
104 }
105
106 #sideCatalog a {
107 text-decoration: none;
108 color: #555;
109 font-weight: bold
110 }
111
112 .sideCatalog-dot {
113 /*黑色圆点*/
114 background: url("sideToolbar.gif") repeat scroll 0 -222px transparent;
115 cursor: pointer;
116 font-size: 12px;
117 height: 10px;
118 left: -20px;
119 line-height: 12px;
120 overflow: hidden;
121 position: absolute;
122 top: 4px;
123 width: 6px
124 }
125
126 #sideCatalogBtn {
127 /*按钮初始状态*/
128 background: url("sideToolbar.gif") no-repeat scroll 0 0 transparent;
129 border-radius: 2px;
130 cursor: pointer;
131 display: inline-block;
132 height: 45px;
133 margin-bottom: 5px;
134 margin-left: 10px;
135 position: relative;
136 width: 45px;
137 margin-top: 2px;
138 outline: 0;
139 vertical-align: top;
140 }
141
142 #sideCatalogBtn:link :visited {
143 /*按钮悬停*/
144 background: url("sideToolbar.gif") no-repeat scroll -53px 0 transparent
145 }
146
147 #sideCatalogBtn:hover {
148 /*按钮悬停*/
149 background: url("sideToolbar.gif") no-repeat scroll -154px 0 transparent
150 }
151
152 .sideCatalogBtnDisable {
153 /*菜单收起时的按钮*/
154 background: url("sideToolbar.gif") no-repeat scroll -104px 0 transparent !important
155 }
156
157 #sideToolbar-up {
158 /*返回顶部按钮*/
159 background: url("sideToolbar.gif") no-repeat scroll -1px -62px transparent;
160 border-radius: 2px;
161 display: inline-block;
162 height: 45px;
163 margin-left: 0;
164 width: 45px;
165 position: relative;
166 margin-top: 2px;
167 outline: 0;
168 vertical-align: top;
169 }
170
171 #sideToolbar-up:hover {
172 /*返回顶部按钮悬停*/
173 background: url("sideToolbar.gif") no-repeat scroll -74px -62px transparent;
174 }