jsフローティングレイヤーメニュー collection_navigationメニュー

使用手順
Web ページの添付ファイルにある JS ファイルと CSS ファイルを参照するだけです (例:

コードをコピー コードは次のとおりです:

オンライン デモ
http://img.jb51.net/online/DivMenu/DivMenu.htmソースコードパッケージをダウンロード
http://img.jb51.net/online/DivMenu/DivMenu.zip このうち、DivMenu.js は Javascript コンプレッサーで圧縮された合理化されたバージョンです実際の使用に向けて。 DivMenu_develop.js は、学習と研究のための詳細なアノテーションを備えた開発バージョンです。使用する場合は、DivMenu.css ファイル内のコメントを参照して、スタイル定義を自分で変更できます。
JavaScript プログラムは目立たないように実装されています。つまり、この JS ファイルを参照する HTML ファイルには他の調整が必要ありません。ただし、完全な匿名性はまだ達成されていません。つまり、このプログラムは引き続きグローバル変数といくつかの Web ページ ノードを作成し、できるだけ少ないグローバル変数とノードを追加しようとしていますが、使用する場合は変数名の競合に注意してください。それ。このプログラムでは、グローバル変数「DivMenu」を 1 つ追加するだけで、多数の Web ページ ノードが追加されます。名前は、SELECT ノードの名前の値に「_a」サフィックスと「_div」を加えたものになります。たとえば、SELECT ノードの元の名前は「menu」で、2 つの新しいノードの名前は「menu_a」と「menu_div」です。
機能の説明
複数選択メニューは変換されず、複数選択メニューのプロンプト テキストは、disabled="disabled" でのみ実現できます。 複数選択するには、Ctrl キーを押したまま、複数選択 1 複数選択 2 複数選択 3 複数選択 4 複数選択 5 を選択してください。複数選択メニューが置き換えられないことを示すために、複数選択メニューを配置します。 IE6ではレイヤーがフローティングになることを確認しました。他のSELECTでは正常に表示できます。
上記は実用的な例であり、古典的な SELECT 選択メニューのいくつかのグループです。最初のものはグループ化が複雑で、プロンプト テキストは最初のオプション disabled="disabled" で実装されています。プロンプトテキストが実装されるのは、value 属性のないオプションです。実践の結果、FF は通常、disabled="disabled" または無効なオプションのみを処理して選択不能にすることができますが、IE は無効な "disabled" および無効なオプションを無視するため、IE のメニューは通常プロンプト テキストを使用すると推定されます。 value 属性または value="" のないオプション。ソース コードは元の SELECT であり、変更する必要がないことがわかります。
基本的なアイデアは、ドキュメント内の元の SELECT メニューを非表示の INPUT フォーム項目に変換し、A 要素を使用してメニューのプロンプト テキスト バーとオプション バーを作成し、DIV レイヤーを使用してメニューを作成し、A 要素を使用して各オプションを置き換え、クリックしたときに非表示の INPUT フォーム項目に値を割り当てます。
主な機能または制限事項は次のとおりです。
すべての使用習慣は従来の SELECT メニューに従います。
通常、複数選択メニューはフローティング メニューに置き換えられないため、単一選択の SELECT メニューのみが置き換えられ、複数選択メニューは変更されません。
無効または値のないオプションをプロンプト テキスト ストリップとして使用するなど、さまざまな SELECT 要素機能をサポートします。optgroup でグループ化されたオプションも新しいメニューにグループ化されます。また、SELECT が DIV レイヤーをブロックするという IE 6 のバグが特別に修正されました。
デフォルトで選択された項目をサポートします。
通常メニューのほぼすべての機能がサポートされていますが、JavaScriptによるリアルタイムで作成されるオプションや連携オプションなどの追加のインタラクティブ機能はサポートされていません。それに応じて郡が変更されることはサポートされていません。
すべてのスタイルは CSS で定義され、フォント サイズは相対的なサイズを使用するため、変更せずにほとんどの Web ページに適応できます。
メニューの位置とサイズは柔軟に設定されており、あらゆる Web ページのレイアウトやレイアウトに適応できます。これを行う際、置換された A 要素に表示されるときに最も幅の広いオプション テキストを収容できるようにすることが考慮されたため、元の SELECT ボックスの幅は直接取得されませんでした。そのため、メニューサイズが本来のSELECTよりも広くなる場合がありますので、ご使用の際はご注意ください。
試してみて、コメントや提案を提供して改善点を共有したり議論したりすることを歓迎します。