実際に記述するスクリプト。(CSSのみでポップアップメニューが実現出来ない環境への対策)

原則としてCSSでポップアップメニューを実現します(再掲載)。

先ず基本として、CSS第二水準に準拠している環境であればCSSだけでポップアップメニューを実現する事が可能であるため、これらにはCSSで対応するものとします。

• 対応出来る環境は今日では以下のようになります。
  • インターネットエクスプローラ 7.0以降(7.0は非標準なやり方になりますが実現は可能です)
  • ファイヤーフォックス 3.0以降
  • オペラ 7.5以降
  • サファリ 3.0以降(ウィンドウズ版は 3.0.3以降), グーグルクロームなど
• プレイステーションなどに採用されているネットフロントについては対応しないかも知れません。

実際にCSSで対応するための方法は、以下の記事をご覧ください。

CSSだけで実現するポップアップメニュー

CSS小技集内の記事。

尚、以下、上記の記事をご覧になった事を前提に話を進めていきます。

CSSで実現するためのHTMLのマークアップとCSSでのスタイル定義について、最低でも以下の点は抑えておいてください。

1. ポップアップメニューの本体は、MENU_NAVI と言うIDを与えられた<ul>要素である。
2. ポップアップメニューの各列は、MENU_NAVI と言うIDを与えられた<ul>要素直下の<li>要素である。
   • 見出し部分はその一番目の子要素である、<p>要素となる。
   • 子メニューは二番目の個要素となる<ul>要素である。
3. これらの要素はHTML文書中の任意の位置に記述可能である(CSSのポジショニングを用いれば、位置調整は自由自在であるため)。
4. メニュー本体はポジショニングで文書冒頭部の中央に表示される。
5. 通常、子メニューは非表示となっているが、見出し部分がマウスでポイントされると、子メニュー部分がCSSの :hover 擬似クラスを与えられた<p>要素に続く<ul>要素を指定する隣接セレクタで指定されたセレクタに依り、表示されるようになる。

ファイヤーフォックス 2.0向けのスクリプト。

ファイヤーフォックス 2.0に対しては、ファイヤーフォックス 2.0の問題点で述べた通り、display: inline-block; プロパティの未サポートが原因です。

それさえ対応すれば、問題はなくなるのです。

一方、実際にJAVAスクリプトのコードで書くべき事は、

1. ファイヤーフォックス 2.0でのみ処理させるようにする処理
2. ファイヤーフォックス 2.0でのみ行われる処理

この二つとなります。

実際に、ファイヤーフォックス 2.0向けのコードを書いてみましょう。

• 読み飛ばす

column_width=10;	//      各項目の幅(文字数単位)

pm_onload=window.onload;
var i;
var ua=navigator.userAgent;
/* ファイヤーフォックス 2.0とそれに相当するゲッコウブラウザであれば、スタイル調整をする */
if (document.getElementById && ua.indexOf('Gecko/')>-1 &&
    (i=ua.indexOf('rv:'))>0 && parseFloat(ua.substring(i+3,ua.length))<1.9) {
    window.onload=style_firefox2;
    }

/***************************************************************/
/* ファイヤーフォックス 2.0でのスタイル調整 */
function style_firefox2() {
    if (pm_onload) pm_onload();
    var ele=document.getElementById('MENU_NAVI');
    if (!ele) return;

    //      先ず、フォントの大きさを診る。
    var s=document.defaultView.getComputedStyle(ele, '');
    var font_size=parseInt(s.fontSize);

    //      続いて、画面の幅を調べる。
    var screen_width=window.innerWidth;

    //      更に、メニューバー直下の<li>要素の数を調べる。
    var eles=ele.childNodes;
    var i=-1;
    var child_number=0;
    while (++i<eles.length) {
        if (eles[i].nodeType==1) child_number++;
        }

    //      左端の位置を確定させる。
    var dx=font_size*column_width;
    var x=(screen_width-child_number*dx) >> 1;

    //      各項目をあるべき位置にポジショニングする。
    i=-1; var j=0;
    while (++i<eles.length) {
        if (eles[i].nodeType!=1) continue;
        eles[i].style.position='absolute';
        eles[i].style.left=x+'px';
        eles[i].style.top='0';
        x+=dx;
        }
}

インターネットエクスプローラ 6.0向けのスクリプト。

インターネットエクスプローラ 6.0での問題点は余りにも多く、CSSだけでのポップアップメニューの実現は不可能です。

そこで、インターネットエクスプローラ 6.0に対しては、従来通りのJAVAスクリプトとDOMを活用する方法で対処するしかありません。

この場合、処理は大きく分けて以下のようになります。

1. インターネットエクスプローラ 6.0である事を判定する処理
2. インターネットエクスプローラ 6.0での前処理
3. (インターネットエクスプローラ 6.0でのみ)見出しにマウスカーソルが乗った時の処理
4. (インターネットエクスプローラ 6.0でのみ)子メニューにマウスカーソルが乗った時の処理
5. (インターネットエクスプローラ 6.0でのみ)見出しや子メニューからマウスカーソルが去った時の処理

実際に、ファイヤーフォックス 2.0向けのコードを書いてみましょう。

• 読み飛ばす

pm_onload=window.onload;
var i;
var ua=navigator.userAgent;
//      ファイヤーフォックス 2.0とそれに相当するゲッコウブラウザであれば、スタイル調整をする。
if (document.getElementById && ua.indexOf('Gecko/')>-1 &&
    (i=ua.indexOf('rv:'))>0 && parseFloat(ua.substring(i+3,ua.length))<1.9) {
    window.onload=style_firefox2;
    }

//      IE 6.0であれば、スタイル調整をする。
if (document.all && ua.indexOf('Opera/')<0 && ua.indexOf('Opera ')<0 &&
    (i=ua.indexOf('MSIE '))>0 && parseFloat(ua.substring(i+5,ua.length))==6.0) {
    window.onload=style_IE6;
    }

/***************************************************************/
/* IE 6.0でのDOM操作 */
function style_IE6() {
    if (pm_onload) pm_onload();
    var ele=document.all['MENU_NAVI'];
    if (!ele) return;

    //      メニューバーの幅を100%にする。
    i=document.documentElement.clientWidth || document.body.clientWidth;
    ele.style.pixelWidth=i;

    //      各列をあるべき位置に配置し、マウス操作でスクリプトを起動出来るようにする。
    var eles=ele.childNodes;
    var eles2,eles3;
    i=-1;
    while (++i<eles.length) {
        if (eles[i].nodeType!=1) continue;
        eles[i].onmouseover=show_IE6;     //見出しにカーソルが乗ったら子メニューを出す。
        eles2=eles[i].getElementsByTagName('ul');
        eles3=eles[i].getElementsByTagName('p');
        if (!eles2[0] || !eles3[0]) continue;
        eles2[0].innerHTML='<li><p>'+eles3[0].innerHTML+'</p></li>'+eles2[0].innerHTML;
        eles2[0].style.marginTop='0';
        eles2[0].onmouseover=show2_IE6;   //子メニューにカーソルが乗ったら消えないようにする。
        eles2[0].onmouseout=hide_IE6;     //子メニューからカーソルが去ったら消す。
        }
}

//      全ての子メニューを消す。
function hideAll_IE6() {
    var ele=document.all['MENU_NAVI'];
    var eles=ele.childNodes;
    var eles2;
    i=-1;
    while (++i<eles.length) {
        eles2=eles[i].getElementsByTagName('ul');
        if (!eles2[0]) continue;
        eles2[0].style.display='none';
        }
}

//      ポイントされたメニューの子メニューを表示させる。
function show_IE6() {
    //      一旦、全ての子メニューを消す。
    hideAll_IE6();

    //      その上で、対象となる子メニューを表示させる。
    var eles=this.getElementsByTagName('ul');
    if (!eles[0]) return;

    eles[0].style.display='block';
}

//      子メニューにマウスがある場合には消さないようにする。
function show2_IE6() {
    this.style.display='block';
}

//      子メニューからマウスが外れた場合には消してしまう。
function hide_IE6() {
    this.style.display='none';
}

最終的に書かれるべきスクリプト。

ファイヤーフォックス 2.0向けの処理と、インターネットエクスプローラ 6.0向けの処理を合わせたスクリプトは、実際のスタイルシートとスクリプトをご覧ください。

• このスクリプトは、CSSだけで実現するポップアップメニューで解説しているスタイルシートとの併用を前提としております。
• このスクリプトについて制作者は著作権を主張しません。どのように改変してお使いいただいても構いませんが、ご利用された結果につきましては免責とさせていただきたいと存じます。