Pulldown menu

◆解説

これはプルダウンメニューのサンプルで、「menu」の領域をクリックすると隠されているメニューを表示します

このスクリプトは、常に表示される要素(タグ)を含む再配置可能なブロック要素をクリック操作でブロック要素のすべてを表示領域にスライドさせたり、タグ要素以外を表示領域の外にスライドさせるものです

■関数と呼び出し形式

setPulldownMenu(menu,tag[,options])
  プルダウンメニュー動作を設定する
  menu    : position:absolute な要素
  tag     : タグ要素( menu 要素の子孫 )
  options : 動作の詳細を指定するオブジェクトで以下の属性が指定できる

    horizon   : 垂直方向でなく水平方向にスライドさせる場合に true を指定する
              : 省略値 = false
    margin    : スライド動作の基準を menu のオフセット要素から離す場合のピクセル値
              : 省略値 = 0
    interval  : スライド動作の間隔を msec 単位で指定する
              : 省略値 = 100
    frames    : スライド動作のフレーム数を指定する
              : 省略値 = 5
    onlyOne   : 他のメニューが自動的にに隠す場合に true を指定する
              : 省略値 = false
    closeMenu : 関数の戻り値で、メニューを隠す関数を戻す
    closeAll  : 関数の戻り値で、すべてのメニューを隠す関数を戻す

options.closeMenu()
  プルダウンメニューを隠す

options.closeAll()
  すべてのプルダウンメニューを隠す

setPulldownMenu 関数は menu で指定した position:absolute な要素を、そのオフセット要素( document または先祖の position:absolute または relative な要素 ) から隠す位置と表示する位置に切り替える関数です
スライドする方向は縦または横が指定できますが表示位置は上または左に限定され、 tag の位置は menu 表示領域の下または右に想定されます
また、オフセット要素がスクロール可能であれば、スクロールしても表示が隠れないように位置を調整します
クリック操作は menu 要素に設定されるため、タグ以外の場所を操作しても動作します
逆にタグ以外の要素のクリック操作を取り付けた場合、上位要素へのイベント伝搬を阻止しなければ menu 要素は自動的に隠されます

■スクリプト

◆使用例

冒頭のサンプルの場合、position:relative な DIV要素( sample1 )に以下のメニューを定義しています

■HTML

■スタイル

メニューの登録は load イベント時に以下のようにします

■スクリプト

◆注意とヒント

●この機能は CallbackList を使用しています

●このスクリプトは IE7, Firefox2.0, Opera9 で確認していますこれより古いバージョンのブラウザや他のブラウザ( Safari, Konqeror など )では正常に動作しないかもしれません