Movable Type 備忘録

moo.fxでサイドバー折りたたみやってみる

Jun252007
Author: bzbell
Categories: Customize
Tags: Customize, JavaScript, moo.fx, MovableType

Next Page: jQueryでフェードするメッセージ表示してみる
Prev Page: jQueryでサイドバー折りたたみをやってみる

こんばんわ^^

訪問者さんからのご質問で、このサイトの blogroll(リンク集)で使ってるサイドバーの折りたたみのやり方を教えてくださいとのことだったので、この場をお借りしてご説明します。
ちなみに、サイトマップでも使用してますの。

構造の説明

基本的には、こちらのmoo.fx でアコーディオン表示でご紹介した方法を、サイドバーでも使ってるだけですの。
なので、必要な JavaScript のインストールや、アップロードについては上記ページを参考にしてください。

基本的な構造は上記ページでもご紹介してますが、以下のようになってます。

<div id="content">
    <div class="tab"><a href="javascript:void(0);">タブ1 タイトル</a></div>
    <div class="tab"><a href="javascript:void(0);">タブ2 タイトル</a></div>
    <div class="tab"><a href="javascript:void(0);">タブ3 タイトル</a></div>

    <div class="boxholder">
        <div class="box">タブ1に対するコンテンツをここに記述します</div>
        <div class="box">タブ2に対するコンテンツをここに記述します</div>
        <div class="box">タブ3に対するコンテンツをここに記述します</div>
    </div><!-- boxholder -->
</div><!-- content -->

<div class="tab">～</div> がタブメニューにあたります。
そして、各タブメニューのコンテンツ(内容)は、<div class="boxholder">～</div> で括られた <div class="box">～</div> がコンテンツになります。

ですので、<div class="tab">～</div> の数 = <div class="box">～</div> になっていないといけません (￣∇￣)b

そして、各タブ、各タブのコンテンツを <div id="content">～</div> でくくってあげれば完成です (●＞∀＜●)／

たとえば、最近のエントリ、最近のコメントおよび、最近のトラックバックをタブメニューにしたい場合には、以下のようになります。

XHTML

<div id="moofx-content">

<div class="moofx-tab"><a href="javascript:void(0);">最近のエントリ</a></div>
<div class="moofx-tab"><a href="javascript:void(0);">最近のコメント</a></div>
<div class="moofx-tab"><a href="javascript:void(0);">最近のトラックバック</a></div>

<div class="moofx-boxholder">

<div class="moofx-box">
<ul><MTEntries>
<li><a href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>"><$MTEntryTitle$></a> <$MTEntryDate language="en" format="%m/%d"$></li>
</MTEntries></ul>
</div>


<div class="moofx-box">
<ul><MTEntries recently_commented_on="5">
<li><a href="<$MTEntryLink$>" title="<$MTEntryTitle$>"><$MTEntryTitle$></a>
<ul><MTComments lastn="5">
<li><a href="<$MTEntryLink$>#c<$MTCommentID$>"><MTCommentAuthor></a> <$MTCommentDate format="%m/%d"$></li>
</MTComments></ul>
</li>
</MTEntries></ul>
</div>


<div class="moofx-box">
<ul><MTPings lastn="5">
<li><a href="<$MTPingURL$>" title="<$MTPingTitle$>"><$MTPingTitle$></a> from <$MTPingBlogName$> <$MTPingDate format="%m/%d"$></li>
</MTPings></ul>
</div>

</div>
</div>