<< 【スクリプト】カテゴリのメニュー化 〜sb編〜 | main | JUGEM IT! from @nifty:NEWS@nifty:政府、香田証生さん殺害を確認…バグダッドに遺体(読売新聞) >>
スポンサーサイト

一定期間更新がないため広告を表示しています

| - | | - | - |
【スクリプト】カテゴリのメニュー化 〜JUGEM編〜
カテゴリをメニュー形式で表示するためのスクリプト&CSS修正です。
先に公開したsb版のJUGEM向け改造バージョンです。

ツリー化などで、[大カテゴリ]小カテゴリ 形式でカテゴリを設定している場合に利用できます。

カテゴリ名を上のようにしたくない場合のテンプレートの修正方法を後日掲載予定です。
1.カテゴリを[大カテゴリ]小カテゴリの形式で設定し、大カテゴリごとにまとまるように順番を設定する。(ソートしないため、バラバラだと同じ大カテゴリが複数出来ます)
2.テンプレート上のカテゴリリスト部分を削除する(2重化できません^^;)
3.メニュー化したい場所に以下のコードを追加する。
<!-- BEGIN category -->
<div id="category" style="display:none;">{category_list}</div>
<!-- END category -->
<script language="javascript" type="text/javascript"><!--
function switchMenu( id, flag ) {
  var obj = document.getElementById( id );
  if ( !obj ) return;
  obj.style.display= ( flag ? 'block': 'none' );
}

function createCategoryMenu(id) {
  var obj = this.document.getElementById(id);
  if ( !obj ) return;
  if ( !obj.innerHTML ) return;
  var objLists = obj.getElementsByTagName('li');
  var index = -1;
  var list = new Array();
  var mainCategory = '';
  for ( var i = 0; i < objLists.length; i++ ) {
    var objLink = objLists[i].getElementsByTagName('a')[0];
    var linkUrl = objLink.getAttribute('href');
    var tmpText = objLists[i].innerHTML;
    tmpText.match(/¥[(.+)¥](.+)/);
    var tmpLink = Array('<a class="menu" href="', linkUrl, '">', RegExp.$2).join('');
    if ( RegExp.$1 != mainCategory ) {
      mainCategory = RegExp.$1;
      index++;
      var subid = id + '_sub' + index;
      list[index] = Array('<div class="mainmenu" id="', id, '_main', index, '" onMouseOver="switchMenu(¥'', subid, '¥', true);" onMouseOut="switchMenu(¥'', subid, '¥', false);">', mainCategory, '<div class="submenu" id="', subid, '">').join('');
    }
    list[index] += Array( '<div class="subchild">', tmpLink, '</div>').join('');
  }
  for ( var i = 0; i <= index; i++ ) {
    list[i] += '</div></div>';
  }
  obj.innerHTML = list.join('');
  for ( var i = 0; i <= index; i++ ) {
    switchMenu( id + '_sub' + i, false );
  }
  obj.style.display = 'block';
}
createCategoryMenu('category');
// -->
</script>


4.項3で出力したコードでは、大カテゴリが縦に並んだ状態になるため、CSSで再配置する必要があります。
 その際に必要なクラス名やIDの付き方を説明すると・・・・
構成の説明(1) 一つの大カテゴリと小カテゴリをセットにしたブロックで<div class="mainmenu" id="category_mainx">で囲んでいます。(xは大カテゴリでの通し番号で0から始まります。以下同じ。)
(2) 大カテゴリに対する小カテゴリをセットしたブロックで<div class="submenu" id="category_subx">で囲んでいます。
(3) 個々の小カテゴリのブロック<div class="subchild">で囲んでいます。
※(2)が(1)の中に収まっていないのは、CSS定義でそのように変えているためです。

上記(1)〜(3)をCSSで配置換えすることにより、メニュー形式で表示できるようになります。実際のCSSの定義例を以下に示します。
div.mainmenu {
font-size: 12px;
position:relative;
text-align:center;
width: 70px;
height: 12px;
background: none;
border-right: solid 1px #0088CC;
}
div.submenu {
background: #9AD6E5;
width: 100px;
text-align: left;
position:absolute;
left: 10px;
top: 13px;
}
div.subchild {
font-size:11px;
padding: 2px 2px 3px 5px;
border-bottom: solid 1px #fff;
}
#category {
position:relative;
left: 90px;
top: 0px;
}
#category_main0 {
border-left: solid 1px #0088CC;
position:absolute;
left: 0px;
top 0px;
}
#category_main1 {
position:absolute;
left: 70px;
top 0px;
}
#category_main2 {
position:absolute;
left: 140px;
top 0px;
}
/*以下、大カテゴリ分を追加*/
このコードはあくまでうちのJUGEMサイトで使っている定義の例なので、皆さんの好みに合わせて変更してみて下さい。

動作確認環境 WinXP / IE6.01&Netscape7.1j&Opera7.53j

*** 役に立ったと思われましたら、下の広告などをポチッと押してもらえると助かります汗 ***
| [Custmize]JUGEM | 16:15 | comments(1) | trackbacks(0) |
スポンサーサイト
| - | 16:15 | - | - |
コメント
〜連絡事項〜
Mac Safariできちんと表示されないという情報が入っています。現在、対策を検討中です。
| まめ | 2004/11/02 6:14 PM |
コメントする









この記事のトラックバックURL
http://mamejiro.jugem.cc/trackback/328
トラックバック