この Wiki の Top Bar はどうやって実現しているかを多くの利用者から質問されます。 HTML 直書きですし、このサイト用に特化しているので、ソースコードはほとんどの方には役立たないです。 しかし、似たようなことをするのには良い方法です。

次の実装では、“topbar” という名前の通常のWikiページを使用します。 普通に作成し、簡単な一覧を追加してください。例：

topbar.txt

  * [[wp>Interwiki link]]
  * {{:wiki:dokuwiki-128.png?nolink&16}} [[wiki:page|Internal page]]
  * [[http://example.com/|External link]]
  * {{:document.pdf|Some PDF}}
  * [[paypal>anika@selfthinker.org|Donate]]

動作させるために、自動的に組込まれる2つのファイルが必要です。 なければ作成し、既にあればコードを追加してください。 例のコードとして、新しいデフォルトのテンプレートを使います。

テンプレートのフォルダーにこれを追加します¹⁾：

./lib/tpl/dokuwiki/footer.html

<div class="topbar">
    <?php tpl_include_page('topbar') /* includes the wiki page "topbar" */ ?>
</div>

conf フォルダーにこれを追加します：

./conf/userall.css

@media screen {
 
    /* top bar */
    .dokuwiki .topbar {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
    .dokuwiki .topbar ul {
        text-align: center;
        max-width: 600px; /* change accordingly */
        margin: 0 auto;
        padding: 0;
        list-style: none;
        background-color: __background_alt__;
        border: solid __border__;
        border-width: 0 1px 1px;
        border-bottom-right-radius: 5px;
        border-bottom-left-radius: 5px;
        box-shadow: 0 1px 2px #999;
        overflow: hidden;
    }
    .dokuwiki .topbar ul li {
        margin: 0;
        padding: 0 2px;
        display: inline-block;
        font-size: 85%;
    }
    .dokuwiki .topbar ul li a {
        color: __text__;
        display: inline-block;
        min-height: 16px; /* make sure icons are not cut off (most icons are 16x16) */
    }
 
    /* for IE7 */
    *+html .dokuwiki .topbar ul li,
    *+html .dokuwiki .topbar ul li a {
        display: inline;
    }
 
    /* changes specific for the default "dokuwiki" template,
       other templates need other changes! */
    #dokuwiki__header {
        padding-top: 3.5em;
    }
    #dokuwiki__usertools {
        top: 2em;
    }
 
    /* IE8 needs this in the default template */
    .dokuwiki .topbar ul li img {
        max-width: none;
    }
 
} /* /@media */
 
 
/* for screens less than 480px wide */
@media only screen and (max-width: 480px) {
 
    /* move topbar back to the bottom */
    .dokuwiki .topbar {
        position: static;
    }
 
    /* un-do the specific template changes */
    #dokuwiki__header {
        padding-top: 2em;
    }
    #dokuwiki__usertools {
        top: .5em;
    }
 
} /* /@media */
 
 
@media print {
 
    /* don't print the topbar */
    .dokuwiki .topbar {
        display: none;
    }
 
} /* /@media */

CSS のコード中にはDokuWiki テンプレート用の特殊な部分があります。 違うテンプレートを使う場合は、おそらくそれ用に調整の必要があります。

そして、上の例はこんな感じになります：