| BACK |
JavaScript

エクスプローう〜

Windowsのエクスプローラみたいに、フォルダが展開していくメニューです。

ご利用の前に「利用規定」を必ず読んでおいてください。
スクリプトを利用した場合、無条件に同意したものとみなします。


更新履歴
2001.09.24
Ver.0.01 公開

動作確認済ブラウザ

Internet Explorer 5.01 (Windows)
Netscape Communicator 4.7 (Windows) … tableタグ内に配置した場合、ヘンな位置に表示します(^^;
Netscape 6.01 (Windows)


設置方法
  1. <BODY>〜</BODY>の間で、メニューを配置するところへ以下のソースをコピー。
  2. ソース内のコメントを参考に赤字部分を設定してください。
    メニュー設定の部分は、サンプル的な設定がしてありますので、書き換えてください。
  3. 文字色などの設定は別途CSSにて設定してください。使用するクラスはソース内にて説明。
  4. できればソース最下部の青字部分も記述を。

<!-- ============================================================================
                            エクスプローう〜 Ver.0.01
                      http://homepage3.nifty.com/masas/sdir/
                   Copyright(c)2001 Masa, All Rights Reserved.
---------------------------------------------------------------------------------
 [注意1] JavaScriptの使えないブラウザでは、このメニューは全く表示されません。
         一番下の noscript のところに、それらブラウザのためのメニューを
         書いておかれることをおすすめします。
 [注意2] メニューより下にコンテンツがある場合、表示が重なってしまいます。
         なるべくメニューの下には何も置かないことをおすすめします。
 [注意3] メニューの文字色等のスタイル指定は、CSSでクラス単位なら可能です。
         各クラス名は、インデント部(.emind)、フォルダマーク(.emdirmark)、
         フォルダ名(.emdirstr)、ファイルマーク(.emfilemark)、ファイル名(.emfilestr)
============================================================================= -->
<div id="menuarea" style="position:absolute;"></div><br>
<script type="text/javascript" language="JavaScript">
<!--
menuary = new Array();
//-----------------------------
//       設定はここから
//-----------------------------
// 呼び出したURLのページを表示するフレーム名 (target)。
// 自フレームは'_self'、別フレームならその名前、別窓なら'_blank'、など。

var TARGETFRM = '_blank';

// メニューの前につけるマーク
// 閉じたフォルダ(CLDIRMARK)、開いたフォルダ(OPDIRMARK)、ファイル(FILEMARK)をにそれぞれ設定。不要なら「''」
// 画像なら「'<img src="aaa.gif" width="12" height="12" alt="hogehoge" border="0">'」のようにタグで。

var CLDIRMARK = '';
var OPDIRMARK = '';
var FILEMARK  = '';

// メニューの設定をします。書式は下の通り。
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  
// menuary[連番] = new menuObj(MENU番号,親MENU番号,'付加文字','リンク文字','URL');
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  
// 連番      : 必ず0から始め、欠番のないようにすること。表示は0のものから順に表示されます。
// MENU番号  : 任意の番号です。重複しないようにつけます。
// 親MENU番号: 親がある場合は、そのMENU番号を。なければ -1 にします。
// 付加文字  : メニュー文字の前に付けるインデントの空白や罫線文字などを「'」で囲って記述。
//             画像なら「'<img src="aaa.gif" width="12" height="12" alt="hogehoge">'」のようにタグで。
// リンク文字: 表示させるメニュー文字を「'」で囲って記述。フォルダ名やリンク先のタイトルなど。
// URL       : リンクするURLを「'」で囲って記述します。フォルダは「''」だけ記述。
//             「''」となっているものは自動的にフォルダとみなされますのでご注意ください。

menuary[0]  = new menuObj( 0, -1, '',     'ごみスクリプトは...', '');
menuary[1]  = new menuObj( 1,  0, '├',   '好きだ、また来たい', '');
menuary[2]  = new menuObj(11,  1, '│└', 'Scrap Dir.',       'http://homepage3.nifty.com/masas/sdir/');
menuary[3]  = new menuObj( 2,  0, '└',   '嫌いだ、他へ行く', '');
menuary[4]  = new menuObj(21,  2, ' ├', 'Google',           'http://www.google.com/');
menuary[5]  = new menuObj(22,  2, ' └', 'Yahoo Japan!',     'http://www.yahoo.co.jp/');
menuary[6]  = new menuObj(40, -1, '', '階層の深さは...', '');
menuary[7]  = new menuObj(41, 40, '└', '基本的に', '');
menuary[8]  = new menuObj(42, 41, '  └', '制限は', '');
menuary[9]  = new menuObj(43, 42, '    └', 'ないよ', '');
menuary[10] = new menuObj(44, 43, '      └', 'でもね', '');
menuary[11] = new menuObj(45, 44, '        └', 'あまり', '');
menuary[12] = new menuObj(46, 45, '          └', '深くすると', '');
menuary[13] = new menuObj(47, 46, '            └', '使いにくいし', '');
menuary[14] = new menuObj(48, 47, '              └', '重くなるかも', '');
menuary[15] = new menuObj(49, 48, '                └', 'しれないよ。', '');
menuary[16] = new menuObj(50, 49, '                  └', 'by Scrap Dir.', 'http://homepage3.nifty.com/masas/sdir/');

// PREタグモード
// 罫線文字を使う場合に「1」にすると桁位置がズレません。解除は「0」。

var USEPRETAG = 1;

//-----------------------------
//        設定はここまで
//-----------------------------
function childAction()
{
  this.cview = (this.cview == 0)? 1 : 0
  for (i = 0; i < menuary.length; i++) {
    for (j = 0; j < i; j++) {
      if (menuary[i].pnum == menuary[j].num && menuary[j].cview == 0) {
        menuary[i].cview = 0;
      }
    }
  }
  showMenu();
}
function menuObj(mnum, pnum, ind, mstr, murl)
{
  this.num = mnum;
  this.id = "MENUITEM" + mnum;
  this.ind = ind;
  this.str = mstr;
  this.url = murl;
  this.pnum = pnum;
  this.cview = 0;
  this.copen = childAction;
}
function showMenu()
{
  var menustr;
  menustr = (USEPRETAG == 1)? "<pre>" : ""
  for (i = 0; i < menuary.length; i++) {
    vflag = 0;
    if (menuary[i].pnum == -1) {
      vflag = 1;
    } else {
      for (j = 0; j < menuary.length; j++) {
        if (menuary[j].num == menuary[i].pnum && menuary[j].cview == 1) {
          vflag = 1;
          break;
        }
      }
    }
    if (vflag == 1) {
      if (menuary[i].url != "") {
        menustr = menustr + '<span class="emind">' + menuary[i].ind  + '<\/span>'
                + '<a href="' + menuary[i].url + '" target="' + TARGETFRM + '"><span class="emfilemark">'
                + FILEMARK + '<\/span><span class="emfilestr">' + menuary[i].str + '<\/span><\/a><br>';
      } else {
        if (menuary[i].cview == 1) {
          diricon = OPDIRMARK;
        } else {
          diricon = CLDIRMARK;
        }
        menustr = menustr + '<span class="emind">' + menuary[i].ind + '<\/span>'
                + '<a href="javascript:menuary['+i+'].copen()"><span class="emdirmark">'+ diricon
                + '<\/span><span class="emdirstr">' + menuary[i].str + '<\/span><\/a><br>';
      }
    }
  }
  endpre = (USEPRETAG == 1)? "</pre>" : ""
  menustr = menustr + endpre;
  if (document.layers) {
    mnlayer = document.layers["menuarea"];
    mnlayer.document.open();
    mnlayer.document.write(menustr);
    mnlayer.document.close();
  } else if (document.all) {
    document.all["menuarea"].innerHTML = menustr;
  } else if (document.getElementById) {
    document.getElementById("menuarea").innerHTML = menustr;
  }
}
window.onload = showMenu;
// -->
</script>
<noscript>
  <!-- JavaScriptが表示できないブラウザへの配慮。できればここにもメニューを。-->
  メニューはJavaScriptで表示しております。<br>
  JavaScript対応のブラウザでご覧ください。<br>
</noscript>
<!-- ====================== End of エクスプローう〜 ======================= -->



Copyright © 2001-2002 Masa, All Rights Reserved.