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

・履歴
 ・5/24新規 Ver:1.0
   ビヘイビアという技術を用いた、ポップアップ型のメニューリス
  トです。項目にマウスカーソルを乗せるとメニューリストが表示さ
  れます。


 ・5/27修正 Ver:1.1
   階層型へ改造するためのビヘイビアを追加しました。
   V1.0に含まれていたビヘイビアに変更はなく、新たに階層型
  に改造するためのビヘイビアを追加しただけです。
   ただ、階層型使用時の問題点として、以下の3点が挙げられます。

   ・ページロード時の処理に多少時間がかかる。
   ・パディングの設定によってはマウス操作がシビアになる。
   ・下の階層に行けば行くほどマウスオーバー時の反応が遅くなる。
    (IE5.5実行時のみ? IE6では発生しませんでした)



・設定方法
 ・必要なファイル
  ・menu.htc :menuタグのビヘイビア
  ・list.htc :listタグのビヘイビア
  ・item.htc :itemタグのビヘイビア


 ・ヘッダー部
   Html宣言に名前空間を設定し、ヘッダー部に以下の命令を記述します。

	<html xmlns:popup>
	<head>
	<?import namespace="popup" implementation="menu.htc" >
	<?import namespace="popup" implementation="list.htc" >
	<?import namespace="popup" implementation="item.htc" >


 ・スタイルシート
   スタイルシートを好みに応じてカスタマイズしてください。

	<style type="text/css">
	// 名前空間popupに属するmenuタグのスタイル(独自タグ)
	 popup\:menu{
		 width		 : 100px;
		 text-align	 : center;
		 border-bottom	 : 1px solid white;
		 border-right	 : 1px solid white;
		 padding	 : 2px 4px 2px 4px;
		}
	// 名前空間popupに属するlistタグのスタイル(独自タグ)
	 popup\:list{
		 display		 : none;
		 position		 : absolute;
		 border-right	 : 1px solid white;
		 padding		 : 2px 4px 2px 10px;
		 text-align	 : left;
		}
	// 名前空間popupに属するitemタグのスタイル(独自タグ)
	 popup\:item{
		 display		 : none;
		}
	// popupクラスのスタイル。
	// メニューリストのクラスを変更することで、それぞれ個別の設定が可能です。
	 .popup	{
		 color		 : white;
		 background-color	 : black;
		 text-decoration	 : none;
		}
	// popupクラスのスタイル。
	// メニューリストのクラスを変更することで、それぞれ個別の設定が可能です。
	 a.popup:hover{
		 color		 : red;
		 background-color	 : black;
		}
	</style>


 ・Html本体
   メニューリストを表示したい位置に以下のタグを設置します。

	<popup:menu class="popup" position="under">menu2
	<popup:item href="ddd" target="">・ddd</popup:item>
	<popup:item href="eee" target="">・eee</popup:item>
	<popup:item href="fff" target="">・fff</popup:item>
	</popup:menu>

   タグの意味は以下のようになります。
    ・menu:メニューリストそのものを意味します。
      class  	:クラス名です。クラス名は以下のlist,itemにも継承されます。
      position	:表示位置です。下部:under、右脇:sideを指定します。
      要素テキスト:メニューリストの名称です。
    ・item:メニューリストに含まれる項目です。
      href	:リンク先のurlです。
      target	:ページを開くフレームを指定します。
      要素テキスト:項目名称です。

   以下のタグはロード時に追加されます。
    ・list:メニューリスト表示部です。設定項目はありません。





 ・階層型使用時の変更点
   以下は、階層型使用時の追加設定です。
   上記までの非階層型を使用する際は必要ありません。

  ・list2.htc	:list2タグのビヘイビア
	<?import namespace="popup" implementation="list2.htc" >

  ・ref.htc	:refタグのビヘイビア
	<?import namespace="popup" implementation="ref.htc" >

  ・スタイルの変更および追加
	// listタグのスタイル
	//  右パディングを0に変更します
	 popup\:list{
		 display		: none;
		 position		: absolute;
		 border-right	: 1px solid white;
		 padding		: 2px 0px 2px 10px;
		 text-align	: left;
		}

	// refタグのスタイル
	//  この設定はitemタグの子要素時のものです。
	 popup\:ref{
		 display		: block;
		 width		: 100%;
		}
	// list2タグのスタイル
	 popup\:list2{
		 width		: 100px;
		 display		: none;
		 position		: absolute;
		 border-right	: 1px solid white;
		 padding		: 2px 0px 2px 10px;
		 text-align	: left;
		}

  ・Html本体
    以下は、item要素の子要素とする場合の例です。

	// メニューの設定
	 <popup:menu class="popup" position="under">menu_refused
	 <popup:item>
	  <popup:ref target="ref1" top="-2" left="90">ref1</popup:ref>
	 </popup:item>
	 <popup:item>
	  <popup:ref target="ref2" top="-2" left="90">ref2</popup:ref>
	 </popup:item>
	 <popup:item>
	  <popup:ref target="ref3" top="-2" left="90">ref3</popup:ref>
	 </popup:item>
	 </popup:menu>

     ・ref:list2を参照する
       target	:参照先のlist2タグのidです。
       top	:下の階層のメニューの相対位置です。
		 パディング設定の有無により変更してください。
       left 	:下の階層のメニューの相対位置です。
		 パディング設定の有無により変更してください。

	// 参照先の設定
	 <popup:list2 class="popup" id="ref1">
	 <popup:item href="aaa" target="">・aaa</popup:item>
	 <popup:item href="bbb" target="">・bbb</popup:item>
	 <popup:item>
	  <popup:ref target="ref2" top="-2" left="90">ref2</popup:ref>
	 </popup:item>
	 </popup:list2>

	 <popup:list2 class="popup" id="ref2">
	 <popup:item href="ccc" target="">・ccc</popup:item>
	 <popup:item href="ddd" target="">・ddd</popup:item>
	 <popup:item>
	  <popup:ref target="ref3" top="-2" left="90">ref3</popup:ref>
	 </popup:item>
	 </popup:list2>

	 <popup:list2 class="popup" id="ref3">
	 <popup:item href="eee" target="">・eee</popup:item>
	 <popup:item href="fff" target="">・fff</popup:item>
	 <popup:item href="ggg" target="">・ggg</popup:item>
	 </popup:list2>

     ・list2:refタグから参照される
       class	:クラス名です。itemタグにも継承されます。
       id	:refタグのtarget属性と同じidを設定します。

     ・item:list2タグの内容です。
	   非階層型と同様です。
【 Back 】