Mediawiki目录浮动显示

mediawiki
 
mediawiki的目录位于内容顶部显示,如果我们的页面内容非常长,查看内容就会非常的不方便,如:《春秋》05.僖公(元年~33年),这么长的内容无论是直接查看文章内容还是想跳转到哪一部分接着看都非常不方便,我在网上搜索后发现一位叫勿慢牛的哥们写了一段目录浮动CSS代码,并且进行了透明阴影设计,非常漂亮,所以直接拿来使用。右侧图片为使用后的显示样子。

MediaWiki:Common.css页面下添加以下内容(MediaWiki:Common.css请在搜索里面直接输入即可):

/* == 浮动目录 == */
#toc, .toc {
        display: block;
        position: fixed;
        top: 100px;
        right: 0px;
        min-width: 200px;
        max-width: 350px;
        max-height: 600px;
        overflow-y: scroll;
        border: 1px solid #aaa;
        border-radius: 0 0 1px 1px;
        -moz-border-radius: 0 0 1px 1px;
        background: rgba(249,249,249,0.85);
        padding: 12px;
        box-shadow: 0 1px 8px #000;
        -webkit-box-shadow: 0 1px 8px #000;
        -moz-box-shadow: 0 1px 8px #000;

}
body { overflow-x: hidden;}


修远兮在使用中发现,滚动后显示/隐藏按钮会滚动到隐藏区域,而我们部分文章因目录过长,会因浮动目录导致阅读不方便,只要将目录切换到隐藏模式就可以解决阅读不便的问题。所以我们做了以下修改,并附上所有CSS样式

/* == 浮动目录 == */
#toc, .toc {
        display: block;
        position: fixed;
        top: 100px;
        right: 0px;
        min-width: 200px;
        max-width: 350px;
        max-height: 500px;
        overflow-y: scroll;
        border: 1px solid #aaa;
        border-radius: 0 0 1px 1px;
        -moz-border-radius: 0 0 1px 1px;
        background: rgba(249,249,249,0.85);
        padding: 12px;
        box-shadow: 0 1px 8px #000;
        -webkit-box-shadow: 0 1px 8px #000;
        -moz-box-shadow: 0 1px 8px #000;
}
#toc.toc.tochidden{
height:20px
}
#toc #toctitle{
position:fixed;
min-width:180px;
max-width:330px;
text-shadow: #000 1px 1px 3px;
}
#toc #toctitle h2{
background:#fff;
}
#toc ul{
margin-top:20px;
}
body {
overflow-x: hidden;
}

添加后直接刷新带有目录的页面就可以看到样式了。

评论

大侠名号:   验证码: 点击我更换图片  

修远兮

在这里记录每一点自己需要的知识

添加创始人微信,一起交流心得

推荐文章RECOMMEND