TechNote

ポップアップメニューがアクティブコンテンツの後ろに表示される

問題

ポップアップメニューは次のような web ページ要素の上に表示されない事があります。

アクティブ web コンテンツ

web ページに含まれているいくつかのオブジェクトは、ポップアップメニューを表示する為に Fireworks によって生成された HTML 内で使用されている DHTML レイヤーとコンフリクトします。これらのオブジェクトは様々なデジタルビデオフォーマット (例えば QuickTime)、Flash と Shockwave ムービー、ブラウザで表示や再生可能なアクティブメディアの多くの形式が含まれます。この種類のオブジェクトは通常ブラウザプラグイン、ActiveX コントロールあるいはインストールされたアプリケーションのなどのようなプレーヤーメカニズムによって使用可能です。このような種類のコンテンツは、一見するとブラウザウィンドウ枠内に表示されているように見えるかもしれませんが、実は OS 上でブラウザの上にレンダリングされ、あらゆる意味でブラウザから独立しています。その結果、このようなアクティブ web コンテンツはブラウザのポップアップメニューの手前に表示されるのです。

メモ: HTML 要素および JavaScript のガイドラインは、World Wide Web Consortium* によって監督されています。Fireworks ポップアップメニューの開発史観につきましては、下の追加情報をご参照ください。

回避策

Flash ムービーは最新の Flash プラグインがインストールされている一部のブラウザ内でレイヤーの上や下に表示されるように作成する事ができます。Flash content displays on top of all DHTML layers* (Flash TechNote 15523) や文書番号　228617　背景が透明な Flash ムービーを作成する方法に記載されているように wmode プロパティを透明に設定する事で可能となります。また、どのブラウザやプレーヤーのバージョンがこの機能をサポートしているのかが、文書内に記載されています。多くのユーザにとってこの制約に対する回避策はポップアップメニューがアクティブウェブコンテンツに直接重ならないようにページをデザインしなおすことです。

フォームオブジェクト

フォームとフォームオブジェクトの扱いがブラウザによって異なる為、多くのフォーム要素は DHTML レイヤーの上に表示されます。これはフォームオブジェクトが OS のユーザーインターフェイス要素からブラウザに提供されるからです。そのためチェックボックス、リスト、メニュー、ラジオボタン、テキストフィールド、イメージフィールド、ファイルフィールド、参照や送信ボタンはすべて DHTML レイヤー (ポップアップメニュー含む) とそれぞれ異なって作用し合います。

フォームオブジェクトのテスト結果

下記のブラウザにて実行されたテスト結果は次のとおりとなります。

Macintosh 版 Netscape Navigator (Mac 版の Netscape は規則に多くの例外があります。)

フォームエレメント：	ポップアップメニューの表示：
チェックボックス	上
リスト/メニュー	上
ラジオボタン	上
テキストフィールド	上
イメージフィールド	下
ファイルフィールド	上
非表示フィールド	N/A
参照ボタン	上
送信ボタン	上

Macintosh 版 Internet Explorer 5.0

フォームエレメント：	ポップアップメニューの表示：
チェックボックス	下
リスト/メニュー	下
ラジオボタン	下
テキストフィールド	下
イメージフィールド	下
ファイルフィールド	下
非表示フィールド	N/A
参照ボタン	下
送信ボタン	下

Windows 版 Netscape Navigator

フォームエレメント：	ポップアップメニューの表示：
チェックボックス	下
リスト/メニュー	上
ラジオボタン	下
テキストフィールド	下
イメージフィールド	下
ファイルフィールド	下
非表示フィールド	N/A
参照ボタン	下
送信ボタン	下

Windows 版 Internet Explorer 5.5

フォームエレメント：	ポップアップメニューの表示：
チェックボックス	下
リスト/メニュー	上
ラジオボタン	下
テキストフィールド	下
イメージフィールド	下
ファイルフィールド	下
非表示フィールド	N/A
参照ボタン	下
送信ボタン	下

回避策

フォームオブジェクトがポップアップメニューの上に表示される可能性がある場合は、ポップアップメニューまたはフォームオブジェクトの位置を変更するためにページをデザインしなおしてください。

Macintosh 版 Internet Explorer での中点付きリスト

<body> タグの直後に配置されている FwLoadMenus (Fireworks 4) または mmLoadMenus (Fireworks MX 以降) 関数を呼び出さない限り、Macintosh 版 Internet Explorer では Fireworks ポップアップメニューは中点付きリストの上に表示されません。

回避策

<body> タグの下に JavaScript を呼ぶコードを配置してください。このコードは下記のように HTML コード内の <body> タグの真下に移動されなければなりません。

メモ: この Firewrorks 4 から参照される fwLoadMenus のコードを <body> タグの直後に配置する事にはさらに別の理由があります。ソース内でのこのコードの位置はブラウザウインドウ内のポップアップメニューの位置に影響します。詳細につきましては、文書番号　228606　Fireworks 4 から書き出したポップアップメニューの配置変更をご参照ください。

追加情報

ブラウザが他のコンテンツ (フォームコントロールやアプレット等) に関して DHTML レイヤーをどのように表示するかについての詳細はサードパーティー記事の Positioned Elements and OS Controls, Applets and Plug-ins* をご参照ください。

ポップアップメニューの開発史観

バージョン 4.0 ブラウザ (特に Internet Explorer と Netscape Navigator) にてレイヤーがサポートされたことで、ブラウザはレイヤー内で HTML コンテンツを表示することが可能になりました。さらに、レイヤーのアニメーションや JavaScript コントロールも可能になりました。インターネット上でレイヤーが使用されるようになったのは、Macintosh と Windows の両方のコンピュータアプリケーションでよく見られる、階層メニュー* GUI を模倣することでした。この進化により、デザイナーは、ユーザがよく知っていて分かりやすいナビゲーションシステムを、ブラウザ内にて作成することができるようになりました。

この開発技術が web 上で広まったとともに、多くのユーザが Dreamweaver や Fireworks でこれをどのように導入することができるのかを質問するようになりました。もはやかっこいいボタンのナビゲーションバーを備えているだけでは web ページが十分ではなくなり、Microsoft や IBM サイトで行われていることを、自分のサイト内でも行いたいと思うようになりました。このようなドロップダウンや飛び出すメニューのヘルプを求め、オンラインフォームへの投稿や弊社テクニカルサポートへのお問い合わせが舞い込み始めました。Fireworks や Dreamweaver を使用してこの種のナビゲーションシステムを完成させるための、複雑で実用するのが難しいインストラクションが公開されはじめたのは、1999年頃です。さらに、その問題に関する記事が個人や企業* のサイトに掲載されました。

Fireworks 4 の開発サイクルの間、ユーザはドロップダウンや飛び出すナビゲーションシステムをすばやく簡単に作成できるという事にたびたび関心を示しました。そこで、Fireworks のエンジニアチームは基本的なポップアップメニューシステムの開発に取り掛かりました。エンジニアチームはポップアップメニューが Netscape 4.x と Internet Explorer 4.5 (とそれ以上のバージョン) の両方で動作し、かつ不可欠なインターネット上にアップロードするファイルは、サイズを出来るだけ小さくすることが目標でした。2000年の秋に Fireworks 4 のポップアップメニュー作成画面が出現した際には、この画期的アイディアは刺激的で全く新しい新機能として歓迎されました。

ポップアップメニューの機能は確かに画期的でしたが、ユーザはまだ更なる柔軟性や制御を期待しました。HTML と JavaScript における規制は回避しなくてはならないことと、弊社はポップアップメニューのカスタマイズ方法に関するいくつかの文書をリリースしました。それらは文書一覧にリストしてあります。他にもユーザは、自主的に Dreamweaver や他の HTML エディタ内でのポップアップメニューの配置指定といったような、問題の解決方法を開発しました。これらのデベロッパーにはカスタマイズされた fw_menu.js ファイル (Holtenwood Computing web サイトで入手可能) を作成した Timothy Atwood などがいます。また、E. Michael Brandt は、トリガとの相対関係のポジションをコード入力する事なしに、ポップアップメニューの位置を変更できる Dreamweaver 用 Pop-up Menu Motivator 機能拡張を開発しました。また、現在はポップアップメニュー制御の向上のため、上級ユーザーが JavaScript のカスタマイズするのに参照できる、全てにおいてコメントの書き込まれた fw_menu.js ファイルを見る事ができます。

Fireworks MX はユーザーがポップアップメニューの位置や外観をコントロールできたり、トリガオブジェクトとメニューとの位置関係を維持したりする追加のパラメータのようなコードにおける改良を取り入れました。 Fireworks MX におけるポップアップメニューの詳細説明につきましては、Fireworks MX Pop-up Menus* (デベロッパーセンターの文書) をご参照下さい。

サードパーティーリンク

資料として外部ウェブサイトへのリンクが含まれておりますが、そのウェブサイトはMacromediaの一部ではございません。サードパーティーウェブサイトへのリンクにつきましてはMacromediaポリシーの著作権と商標についての留意事項セクションをご参照ください。外部ウェブサイトのページは新規ブラウザウインドウとして開きます。

なお、この文書は、米国 Adobe Systems, Inc. の Pop-up Menus appear behind active content (TechNote 15842) をもとに作成されました。