<< JUGEM IT! from @nifty:NEWS@nifty:不明の母子3人発見、男児を救出(読売新聞) | main | 【スクリプト】カテゴリのメニュー化 〜JUGEM編〜 >>
スポンサーサイト

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

| - | | - | - |
【スクリプト】カテゴリのメニュー化 〜sb編〜
カテゴリをメニュー形式で表示するためのスクリプト&CSS修正です。
sbのサブカテゴリに対応したバージョンです。

[大カテゴリ]小カテゴリ 形式のカテゴリをメニュー化する場合はJUGEMバージョンを利用して下さい。
1.テンプレート上の元のカテゴリリスト部分を削除する(2重化したい場合はそのままでも・・・)
2.メニュー化したい場所に以下のコードを追加する。
<!-- 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();
  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(/¥((¥d+)¥)/);
    var tmpLink = Array('<a class="menu" href="', linkUrl, '">', objLink.innerHTML, '</a> (', RegExp.$1 , ')').join('');
    if ( linkUrl.split('¥?')[1].indexOf('-') == -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);">', tmpLink, '<div class="submenu" id="', subid, '">').join('');
    } else {
      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>


3.項2で出力したコードでは、メインカテゴリが縦に並んだ状態になるため、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: 79px;
height: 12px;
border-right: 2px sold #fff;
}

div.submenu {
font-size:12px;
background: #cce;
width: 100px;
text-align: left;
position:absolute;
left: 10px;
top: 13px;
}

div.subchild {
padding: 2px 2px 3px 5px;
border-bottom: solid 1px #fff;
}

#category_main0 {
position:absolute;
left: 0px;
top 0px;
}
#category_main1 {
position:absolute;
left: 80px;
top 0px;
}
#category_main2 {
position:absolute;
left: 160px;
top 0px;
}
/*以下、メインカテゴリ分を追加*/
このコードはあくまでうちのsbサイトで使っている定義の例なので、皆さんの好みに合わせて変更してみて下さい。

[修正履歴]
10/28 15:41 初出
10/29 12:50 記事不足分追記

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

*** 役に立ったと思われましたら、下の広告などをポチッと押してもらえると助かります汗 ***
| [Custmize]sb | 15:41 | comments(5) | trackbacks(0) |
スポンサーサイト
| - | 15:41 | - | - |
コメント
豆さん、こんにちは!
パティオでの質問に答えてくださってありがとうございます。
まさに私のイメージそのままだったので、さっそく
次の休みの日にでも挑戦してみようと思います^^
ひとつ質問なのですが、上記の文章は3.で終わりなのでしょうか?

>>3.項2で出力したコードでは、メインカテゴリが縦に並んだ状態にな

で、文章が途切れてるので続きがあるのかなぁと思って・・・
私が見えないだけなのかな??

| めけ。 | 2004/10/29 9:17 AM |
めけ様
あれ?本当だ;;
こ・これから記事書き足します。(何で消えたんだろう??)
| まめ | 2004/10/29 11:53 AM |
記事みましたーーー
他力本願すみません。
でもめちゃくちゃうれしいです。感謝感激です悲しい
早く休みにならないかな〜。
| めけ。 | 2004/10/29 1:33 PM |
〜連絡事項〜
Mac Safariできちんと表示されないという情報が入っています。現在、対策を検討中です。
| まめ | 2004/11/02 6:14 PM |
http://www.adidasnmdrunnerr1.us.com/ yeezy shoes
http://www.fitflops-sale.us.com/ fitflop sale
http://www.louboutinredbottoms.us.com/ red bottoms
http://www.birkenstocksandalssale.us.com/ birkenstock outlet
http://www.salomonspeedcross3.us.com/ salomon
http://www.pandora-jewelrysale.us.com/ pandora charms
http://www.pandorajewelryrings.us.com/ pandora
http://www.jordans11shoes.us.com/ jordan 8
http://www.airmax90shoes.us.com/ nike air max
http://www.pandorajewelryscharms.us.com/ pandora
http://www.adidasyeezy-350.us.com/ adidas ultra boost
http://www.nikeairvapormaxflyknit.us.com/ air max 97
http://www.nikeairmax-90.us.com/ air max 90
http://www.curry4-shoes.us.com/ curry 2
http://www.jordan11spacejams.us.com/ jordan retro
http://www.kyrie-4.us.com/ kyrie 4
http://www.pumafentyrihannashoes.us.com/ puma fenty
http://www.katespadepurses.us.com/ kate spade laptop bag
http://www.longchampbag.us.com/ longchamp backpack
http://www.hermesbirkin-handbags.us.com/ hermes belts
http://www.lebron15-shoes.us.com/ kyrie irving shoes
http://www.yeezyboost350shoes.us.com/ yeezy boost 750
http://www.kd10-shoes.us.com/ kd
http://www.fitflopsshoes.us.com/ fitflop shoes
http://www.adidas-ultraboost.us.com/ ultra boost
ドリフトliuyuzhen
| hermes handbags | 2018/06/07 10:29 PM |
コメントする









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