毎日ツラツラとページを作成して行くと、いつの間にかメニューに１ページで表示できる範囲を超えそうなぐらいになった
SEO のツールをメニューに貼り付け、アクセスの件数などを見えるようにしている関係上、これ以上ページ単位でメニューに追加するのは見栄えが悪くなるばかりである。適当な単位でメニューからアイテムを選択できる方法に切替が必要だ！何かよい方法はないか？Googleっと「ポップアップメニュー」使えそうだ！、「html ポップアップメニュー」で再度 Google
■ ポップアップメニューの表示 を発見。
非常に判り易く説明されている。早速、メニューを変更
メニューの変更は確かに非常に簡単にできた！、早速表示のテスト、IE7 は OK，Safari 3.1.1 も OK，OPERA 9.5 ん？ポップアップメニューが表示される位置がずれていてサブメニューが選択できない，Firefox2 に至っては、サブメニューが大きくずれてこれもまた、選択できない
表示するブラウザ毎に表示位置が異なるのか？うーーん？そうだ！親メニューの位置をカーソルが通過した時に、サブメニューを表示するようにすれば、固定位置表示ではないので位置ずれを起こすこともないだろう！
ベースは、「■ ポップアップメニューの表示」を使用してカーソルポジションの「y座標」を取得して、この「y座標」でサブメニューを表示するように変更しよう
座標を取得するには、document.body.scrollTop;，document.body.scrollLeft; で取れるか？IE7 は OK，Firefox2 は取り込むことができない！？カーソルポジションの取得もブラウザ毎に違うのか？
何だかんだで１時間、結局、Firefox2 では、座標の取り込み方法が違うのではなく、イベントのハンドリング方法が他のブラウザとは違っていると言うことが判明した。理由が判れば修正は可能だ！
// 表示モード切替IE7 は OK，Safari 3.1.1 も OK，OPERA 9.5 も OK，Firefox2 も OK
function displayMode(mode) {
document.getElementById('submenu').style.display = mode;
}
// 座標の取得
function getMouseXY(evt){
var obj = new Object();
if (document.all){
obj.x = event.offsetX;
obj.y = event.offsetY;
}
else{
obj.x = evt.pageX;
obj.y = evt.pageY;
}
return obj;
}
// ポップアップメニュー
function popupMenu(obj, item, left) {
・
・
・
if(navigator.userAgent.indexOf("MSIE")!=-1){
x = event.x + document.body.scrollLeft;
y = event.y + document.body.scrollTop;
}
else {
window.document.onmousemove = function(e){
x = getMouseXY(e).x;
y = getMouseXY(e).y;
}
}
layer = "<div id='popmenu' style='position:absolute;top:" + y + ";left:" + left + ";'>\n";
roop = popupMenuItem.length / 2;
・
・
・
主要なブラウザで表示することが可能となった
しかし、ブラウザ毎にコーディングロジックが必要になると言うのは勘弁して頂きたいものだ！
more...
