るるろぐ 2008 新着記事

この記事1件を表示

さくらインターネットでの運用(20)力業(?笑)3階層メニュー

nmoxさんの階層メニュー

こちらを複数個利用させて頂き、私の頭でやれる範囲で
3層メニューを表現してみました。

まず、どうしたいか。なのですが。
コンテンツメニューをこんな風にしたいです。
(大カテゴリ、子カテゴリなどは、便宜上、私が勝手に
呼ぶものです)

大カテゴリ1
 子カテゴリ1
   話題1
   話題2
 子カテゴリ2
   話題1
   話題2

大カテゴリ2
 子カテゴリ1
   話題1
   話題2
 子カテゴリ2
   話題1
   話題2
…略

自分のサイトに照らし合わせると

小説(大カテゴリ)
 Final Decision 起実(子カテゴリ)
   宇宙(話題)
   サウンドメッセージ(話題)
   創成(話題)
 笑いの間合い(話題)
 時空間奇縁伝(話題)

CG(大カテゴリ)
 ともくん日記(話題)
 メグメグ!(話題)
 ZENWARE(子カテゴリ)
   ZenLiner Tutorial(話題)
   ZenLiner Gallery(話題)

…こんな感じでしょうか。。

nmoxさんちの階層メニューは、lib-custom.phpに
追記する関数として提供されていますので、それを
大カテゴリの数分コピーします。
(うちは、大カテゴリが4つなので4個)。

そして、その4つのそれぞれの以下の部分に
4つを区別する文字列を追記します。

function phpblock_nmoxmenu(){
global $_CONF,$_TABLES;
$retval="
<ul class='nmoxmenu'>";

function phpblock_nmoxmenuX(){
global $_CONF,$_TABLES;
$retval="
<ul class='nmoxmenu mX'>";

function phpblock_nmoxmenuX(){
関数が区別出来ればなんでも良いと思いますが、
わかりやすいように、1~4を振りました(Xのとこ)。

<ul class='nmoxmenu mX'>";

こちらもなんでもいいのですが、m1~m4を振りました。

それから、話題IDの先頭3文字を、class名として
書き出すように、以下を追記。

…略
//指定カテゴリーが開いている状態のカテゴリー
$str = $rc["tid"]; // 追記
$strsub = substr($str, 0, 3); // 追記
$retval.="
<li class='open ".$strsub."'> //".$strsub." を追記
…略

//指定カテゴリーが閉じている状態のカテゴリー
$str = $rc["tid"]; // 追記
$strsub = substr($str, 0, 3); // 追記
$retval.="
<li class='close ".$strsub."'> //".$strsub." を追記
…略

//インデックスが存在しなければ、単発メニュー
$str = $rc["tid"]; // 追記
$strsub = substr($str, 0, 3); // 追記
$retval .= "
<li class='only ".$strsub."'>//".$strsub." を追記
…略

で、ブロックを4つ作って、それぞれ
(function phpblock_nmoxmenuX()、Xは1~4)を読み込みます。

これで、htmlは、以下の様になります(概略)

<ul class='nmoxmenu mX'> <!-- X は、各数字 -->
 <li class='open yyy'> <!-- yyy は、話題IDの先頭3文字 -->
  Final Decision I(起実)
  <ul>

   <li>└宇宙(ソラ)</li>
   <li>└サウンドメッセージ</li>
   <li>└創成</li>
  </ul>
 </li>
 <li class='only yyy'> <!-- yyy は、話題IDの先頭3文字 -->
  笑いの間合い
 </li>
 <li class='only zzz'> <!-- zzz は、話題IDの先頭3文字 -->
  ともくん日記
 </li>
 <li class='only xxx'> <!-- xxx は、話題IDの先頭3文字 -->
  詞のある風景
 </li>
 <li class='only ppp'> <!-- ppp は、話題IDの先頭3文字 -->
  お知らせ
 </li>
</ul>

これが、ブロック4つ繰り返されるわけです。
で、もうおわかりかと思いますが(^^;)、このうち、
表示したくない部分をdisplay:noneで、隠したわけです。
例えば、

ul.mX li.zzz,
ul.mX li.xxx,
ul.mX li.ppp {
display:none;
}

と、すると、mXのブロックには、li.yyyのみ表示します。
(でもソースは出てます ^^;)。

う~ん。美しくないな。(笑)

---*---*---*---*---*---
追記。。
上記をやる場合、話題IDは、以下のように書きます。

yyy話題ID1
yyy話題ID2
yyy話題ID3
xxx話題ID1
xxx話題ID2
zzz話題ID1
ppp話題ID1

これで、4つの大カテゴリ。。

コメントを書く

コメントの掲載は、管理者の承認が必要な場合があります。すぐに掲載されない場合は、少しお待ち下さい。また、内容によっては掲載しない場合、掲載後、削除する場合もございます。ご了承下さい。

 必須

 必須


トラックバック

このエントリーのトラックバックURL:

http://www.liolion.info/MovT/LULUL/mt-tbon.cgi/636

都合により、上記URLの「mt-tbon.cgi」は、全角で表示しています。TBの際は、恐れ入りますが、半角に直して送信してください。

またこのブログは、トラックバックを受け付けても、それがすぐに反映されない仕組みになっています。管理者が確認後、公開しますので、少しお待ち下さい。尚、内容によっては、公開しない場合もあります。ご了承下さい。また内容に問題がないと思えるのに、いつまで経っても公開されない場合は、なんらかの事情で、pingが届いていない可能性があります。よろしければ再度送信してください(このブログに関してコメントをする?)。

MODx本出版

ここからカテゴリ一覧、記事一覧を表示

CATEGORY

RSS1.0 RSS2.0