注:ポップアップメニューを表示するために「innerHMTL」を使用しているため、InternetExplorer 以外では正常に動作しない場合があります。


// ポップアップメニュー
function popupMenu( obj, item, w, h ) {

  var submenu = document.getElementById('submenu');

  // メニュー項目    ・・・・・ ポップアップメニューの項目を各メニュー項目ごとに作成して配列にセットします
  popupMenuItem = new Array();
  switch (item) {

  // 検索エンジン
  case 1:
    popupMenuItem.push("Yahoo!Japan", "http://yahoo.co.jp/");
    popupMenuItem.push("Google 日本語", "http://www.google.com/intl/ja/");
    popupMenuItem.push("Infoseek ", "http://www.infoseek.co.jp/");
    popupMenuItem.push("Excite", "http://www.excite.co.jp/");
    popupMenuItem.push("goo", "http://www.goo.ne.jp/");
    break;

  // 新聞社
  case 2:
    popupMenuItem.push("朝日新聞", "http://www.asahi.com/");
    popupMenuItem.push("読売新聞", "http://www.yomiuri.co.jp/");
    popupMenuItem.push("産経新聞", "http://www.sankei.co.jp/");
    popupMenuItem.push("毎日新聞", "http://www.mainichi.co.jp/");
    popupMenuItem.push("日本経済新聞", "http://www.nikkei.co.jp/");
    break;

  // コンピューターニュース
  case 3:
    popupMenuItem.push("ITmedia NEWS", "http://www.itmedia.co.jp/news/");
    popupMenuItem.push("Internet Watch", "http://internet.watch.impress.co.jp/");
    popupMenuItem.push("MYCOM PCWEB", "http://pcweb.mycom.co.jp/");
    popupMenuItem.push("Japan Internet", "http://japan.internet.com/");
    popupMenuItem.push("HOT WIRED JAPAN", "http://www.hotwired.co.jp/");
    break;

  // 生活情報
  case 4:
    popupMenuItem.push("JR予約", "http://www.jr.cyberstation.ne.jp/");
    popupMenuItem.push("weathernews", "http://www.wni.co.jp/cww/");
    popupMenuItem.push("郵便ページ", "http://www.post.japanpost.jp/");
    popupMenuItem.push("お財布レシピ", "http://www.osaifu.jp/");
    popupMenuItem.push("レシピサーチ", "http://girls.www.infoseek.co.jp/leisure/recipe/");
    break;

  // ネットの本屋さん
  case 5:
    popupMenuItem.push("Amazon", "http://www.amazon.co.jp/");
    popupMenuItem.push("紀伊国屋", "http://bookweb.kinokuniya.co.jp/");
    popupMenuItem.push("丸善", "http://www.maruzen.co.jp/");
    popupMenuItem.push("スカイソフト", "http://www.skysoft.co.jp/");
    popupMenuItem.push("楽天ブックス", "http://books.rakuten.co.jp/RBOOKS/index.html");
    break;

  }

  // メニュー作成    ・・・・・ ポップアップメニューのタグを作成して、layer 変数にセットします
  var layer;
  var roop;
  var url;
  var subject;
  layer = "<div id='popmenu' style='position:absolute;top:" + h + ";left:" + w + ";'>\n";
  roop = popupMenuItem.length / 2;
  for (i=0; i<roop; i++) {
    url = i * 2 + 1;    ・・・・・ リンクするURLを配列から取り出す
    subject = i * 2;    ・・・・・ ポップアップメニュー項目名を配列から取り出す
    layer += "  <div id='submenu" + i + "' class='submenu01'";

    // クリック時に「jumpUrl」関数で指定のページへジャンプする
    layer += "   onclick=jumpUrl('" + popupMenuItem[url] + "')";

    // マウスポイント時に「rollOver」関数で色を変更。「displayMode」関数で表示・非表示設定を「表示」に設定
    layer += "   onmouseover=rollOver( this,'submenu02' );displayMode( 'block' );";

    // マウスが離れた時に「rollOver」関数で色を規定のに戻す。「displayMode」関数で「非表示」に設定してメニューを消去する
    layer += "   onmouseout=rollOver( this,'submenu01' );displayMode( 'none' );>" + popupMenuItem[subject] + "</div>\n";
  }
  layer += "</div>\n";

  // ポップアップメニュー表示
  submenu.style.display = 'block';    ・・・・・ ID=submenu の<DIV> の表示・非表示設定を「表示」設定にする
  submenu.innerHTML = layer;    ・・・・・ 作成したポップアップメニューを ID=submenu の<DIV> タグに挿入する
}