为维基百科制作侧边栏

时间:2014-03-15 17:40:24

标签: css sidebar wikipedia

我正在尝试设计维基百科。我想将目录放在侧边栏中;但是,我遇到了一些障碍。我想:

  • 如果目录短于,则垂直居中 视口高度。
  • 删除长目录中的滚动条,同时保留滚动功能。
  • 指定侧边栏%宽度和最小/最大宽度,并将正文内容填入其余部分。

请参阅this了解视觉效果。

这是我到目前为止所拥有的:

@-moz-document domain(wikipedia.org) {

#mw-navigation, #toctitle, #footer {display:none;}

/* Place table of contents in a sidebar */
#toc {
    height: 100%;

    width: 20%;
    min-width: 150px;
    max-width: 250px;

    position: fixed; /* don't scroll with page. */
    top: 0;
    bottom: 0;
    left: 0;

    overflow: hidden; /* hide scrollbar, but... */
    }

    #toc > ul {
        background: lightblue;

        overflow: scroll; /* ...still allow scrolling? */

        /* center vertically if shorter than height of viewport */
        display: table-cell;
        vertical-align: middle;
    }

#content {
    /* How to have contents fill the remaining width? */
}
}

有没有人有这些解决方案?它们甚至可能吗?

1 个答案:

答案 0 :(得分:0)

我创建了一个用户脚本,允许我定义自定义链接,这些链接在维基百科的顶部以及位于页面左侧的导航面板中水平显示。如果有人有兴趣,我会把它复制到Gist。它应该可以帮助你实现我的想法:

Wikipedia User Defined Navigation Links (Gist)

要使用此代码,您需要找到您的Wikipedia主题JS文件,该文件将成为您的用户页面的子页面。我的是here。您可以通过单击此链接找到您的链接,该链接将自动引导您到达适当的位置。您应首先登录Wikipedia,然后click here