Movable Type 備忘録

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

  • Jun252007
  • Vote:
    http://bizcaz.com/archives/2007/06/25-005848.php
  • Categories: prototype
  • Tags:
  • Social Bookmark

こんばんわ^^

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

構造の説明

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

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

  1. <div id="content">
  2.     <div class="tab"><a href="javascript:void(0);">タブ1 タイトル</a></div>
  3.     <div class="tab"><a href="javascript:void(0);">タブ2 タイトル</a></div>
  4.     <div class="tab"><a href="javascript:void(0);">タブ3 タイトル</a></div>
  5.  
  6.     <div class="boxholder">
  7.         <div class="box">タブ1に対するコンテンツをここに記述します</div>
  8.         <div class="box">タブ2に対するコンテンツをここに記述します</div>
  9.         <div class="box">タブ3に対するコンテンツをここに記述します</div>
  10.     </div><!-- boxholder -->
  11. </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

  1. <div id="moofx-content">
  2.  
  3.     <!-- ▼タブメニュー▼ -->
  4.     <div class="moofx-tab"><a href="javascript:void(0);">最近のエントリ</a></div>
  5.     <div class="moofx-tab"><a href="javascript:void(0);">最近のコメント</a></div>
  6.     <div class="moofx-tab"><a href="javascript:void(0);">最近のトラックバック</a></div>
  7.     <!-- ▲タブメニュー▲ -->
  8.  
  9.     <div class="moofx-boxholder">
  10.         <!-- ▼最近のエントリ▼ -->
  11.         <div class="moofx-box">
  12.             <ul><MTEntries>
  13.                 <li><a href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>"><$MTEntryTitle$></a> <$MTEntryDate language="en" format="%m/%d"$></li>
  14.             </MTEntries></ul>
  15.         </div>
  16.         <!-- ▲最近のエントリ▲ -->
  17.  
  18.         <!-- ▼最近のコメント▼ -->
  19.         <div class="moofx-box">
  20.             <ul><MTEntries recently_commented_on="5">
  21.                 <li><a href="<$MTEntryLink$>" title="<$MTEntryTitle$>"><$MTEntryTitle$></a>
  22.                     <ul><MTComments lastn="5">
  23.                         <li><a href="<$MTEntryLink$>#c<$MTCommentID$>"><MTCommentAuthor></a> <$MTCommentDate format="%m/%d"$></li>
  24.                     </MTComments></ul>
  25.                 </li>
  26.             </MTEntries></ul>
  27.  
  28.         </div>
  29.         <!-- ▲最近のコメント▲ -->
  30.  
  31.         <!-- ▼最近のトラックバック▼ -->
  32.         <div class="moofx-box">
  33.             <ul><MTPings lastn="5">
  34.                 <li><a href="<$MTPingURL$>" title="<$MTPingTitle$>"><$MTPingTitle$></a> from <$MTPingBlogName$> <$MTPingDate format="%m/%d"$></li>
  35.             </MTPings></ul>
  36.         </div>
  37.         <!-- ▲最近のトラックバック▲ -->
  38.     </div><!-- moofx-boxholder -->
  39.  
  40. </div><!-- moofx-content -->

上記のようにすればタブメニューとしてまとめることができます。

スタイルシート

次はスタイルシートになります。
以下は実際にわたしのサイトで使用しているスタイルになります。

スタイルシート

  1. div#moofx-content {
  2.     width: 352px; /*全体の横幅になります*/
  3.     height: 100%;
  4. }
  5.  
  6. div#moofx-content div.moofx-tab {
  7.     margin: 0;
  8.     padding: 0;
  9.     width: auto;
  10.  
  11.     float: left; /*タブメニューを横に並べます*/
  12.     text-align: center; /*テキストをセンタリングします*/
  13.  
  14.     background-color: #f0edb6; /*タブメニュー背景色です*/
  15.  
  16.     border: 1px solid #e4ddb2; /*ボーダーラインです*/
  17. }
  18.  
  19. div#moofx-content div.moofx-tab a {
  20.     padding: 0 .66em; /*各自のお好みで調整してください*/
  21.     height: 2.5em; /*タブメニュー高さになります*/
  22.  
  23.     display: block;
  24.     font-weight: 700;
  25.     line-height: 2.5;
  26. }
  27.  
  28. div#moofx-content div.moofx-tab a:hover {
  29.     color: #ffdc6e; /*ホバー時の前景色です*/
  30.     background-color: #7d022b; /*ホバー時の背景色です*/
  31. }
  32.  
  33. div#moofx-content div.moofx-boxholder {
  34.     clear: both; /*削除不可です*/
  35. }
  36.  
  37. div#moofx-content div.moofx-box ul {
  38.     margin: 0;
  39.     padding: 0;
  40.  
  41.     list-style: none;
  42. }
  43. div.moofx-box ul li {
  44.     margin: 0;
  45.     padding: 0;
  46.     line-height: 2.4; /*各コンテンツの高さです*/
  47. }
  48.  
  49. div.moofx-box ul li a {
  50.     display: block;
  51.     text-decoration: none;
  52. }

かいつまんでコメントしてますが、こんなかんじでスタイルを定義してます。
上記を参考に各自のテンプレートに合わせればよろしいかと (^▽^;)

以上で moo.fx によるサイドバー折りたたみを行うことができます。
では、では。

 Trackback Pings(0)

No trackbacks found.

 Comments(3)

#1: Posted by [匿名] @ June 25, 2007 [REPLY]
user-pic

分かりやすい説明ありがとうございます。

できましたっ!
まだCSS微調整中ですが。
また利用させてもらいます。

 
#2: Posted by パズ @ June 25, 2007 [REPLY]
user-pic

できましたっ

 
#3: Posted by bzbell @ June 25, 2007 [REPLY]
user-pic

>>1 [匿名] さん
>>2 パズ さん

こんにちわ^^

お役に立てて良かったです (●´∀｀●)
今後ともよろしくですの♪

 

 Post a Comment

 

コメント用フィード