●階層型ポップアップメニュー
 Ver:0.6
 形式:Htc
 言語:JavaScript
 環境:IE5.5,IE6で動作を確認
 備考:実行例はダウンロード版で確認してください。
                     ⇒ V0.6 Download

・履歴
 ・5/23新規 Ver:0.6
   ビヘイビアという技術を用いた、複数の階層からなる階層型ポッ
  プアップメニューです。右クリックでメニューが表示されます。
   まだ色々と悩んでいる状態のため、まだ完成版ではありませんが
  動作はします。



・設定方法
 ・必要なファイル
  ・pm_base.htc	:ポップアップメニューのベースのビヘイビア
  ・pm_div.htc	:ポップアップメニューフレームのビヘイビア
  ・pm_a.htc	:ポップアップメニュー項目のビヘイビア
  ・popup_menu.xml	:ポップアップメニューのデータ
  ・popup_menu.xsl	:データのXSLスタイルシート


 ・Html本体の設定
  1.スタイルシート部、およびボディを以下のように設定してください。
    スタイルシートに必須の設定は以下のようになります。
     ・behavior		:ビヘイビアの設定
     ・position		:ポジショニングの設定
     ・visibility	:表示の設定
     ・display		:表示の設定
    上記以外は自由に設定しても特に問題はありません。

	<html>
	<head>
	<style type="text/css">
	 div.pm_base{
		 behavior  	: url(pm_base.htc);
		 position  	: absolute;
		 visibility	: hidden;
		}
	 div.pm	{
		 behavior		: url(pm_div.htc);
		 width		: 100px;
		 position		: absolute;
		 visibility	: hidden;
		 background-color	: #c0c0c0;
		 border-top	: 2px solid lightgrey;
		 border-right	: 2px solid gray;
		 border-bottom	: 2px solid gray;
		 border-left	: 2px solid lightgrey;
		 padding	 	: 2px 4px 2px 4px;
		}
	 a.pm	{
		 behavior		: url(pm_a.htc);
		 display		: block;
		 overflow		: hidden;
		 font-family	: "MS ゴシック";
		 color		: #000000;
		 background-color	: #c0c0c0;
		}
	 span.pm{
		 font-size		: smaller;
		}
	 hr.pm	{}
	</style>
	</head>
	<body oncontextmenu="return false;">
	<div class="pm_base" srcXml="popup_menu.xml" srcXsl="popup_menu.xsl"></div>


  2.ビヘイビア(pm_a.htcファイル)の設定を行います。
    テキストエディタで開くと上部に以下のような部分があります。
    ここでマウスフォーカス時などの色を設定します。

	<SCRIPT TYPE="text/javascript">
	var fgclrActive = "#ffffff";	// a:linkの文字色
	var bgclrActive = "#000080";	// a:linkの背景色
	var fgclrHover  = "#000000";	// a:hoverの文字色
	var bgclrHover  = "#c0c0c0";	// a:hoverの背景色


  3.メニューリストの設定を行います。
    テキストエディタでXML(popup_menu.xmlファイル)を編集します。
	要素の意味は以下のようになります。
	 menu:ルート要素。変更の必要はありません。
	 list:メニューグループ。
	    この子要素が一つのグループとして表示されます。
	    また、要素内容のテキストがその名称となります。
	    id属性には一意のキーを設定してください。
	 item:個々のメニュー項目。
	    以下の属性が設定可能です。
	     url	:href属性と同様です。
	     target	:target属性です。
	     line-top	:true設定時、項目上部に区切り線を挿入します。
	     line-bottom	:true設定時、項目下部に区切り線を挿入します。

	<?xml version="1.0" encoding="Shift_JIS" standalone="yes"?>
	<menu>
	 <list id="root">root
	  <item url="aaa">aaa</item>
	  <item url="bbb">bbb</item>
	  <item url="ccc">ccc</item>
	  <list id="second" line-top="true" line-bottom="true">second
	   <item url="aaaa">aaaa</item>
	   <item url="bbbb">bbbb</item>
	   <item url="cccc">cccc</item>
	   <list id="third">third
	    <item url="aaaaa">aaaaa</item>
	    <item url="bbbbb">bbbbb</item>
	    <item url="ccccc">ccccc</item>
	   </list>
	  </list>
	  <item url="ddd">ddd</item>
	  <item url="eee">eee</item>
	  <item url="fff">fff</item>
	 </list>
	</menu>
【 Back 】