1。概要
ポップアップフローティングメニューを使用すると、Webサイトのナビゲーションコンテンツをより明確にするだけでなく、ページの全体的な効果にも影響しません。図1に示すように、この例を実行します。マウスが最初のレベルのナビゲーションメニューのタイトルに移動すると、フローティングメニューがポップアップしてメニューに対応するサブメニューを表示します。マウスが移動すると、フローティングメニューが隠されます。
2。技術的なポイント
この例は主にJavaScriptにあり、<div>タグオブジェクトのスタイル属性の表示属性値を動的に変更して、セカンダリナビゲーションメニューを動的に表示および非表示にします。実際、各レベル1のメニューの下のセカンダリメニューのコンテンツは、Webページの<div>タグに追加されていますが、<div>はこの時点で設定されており、表示されません。したがって、JavaScriptでは、マウスがナビゲーションタイトルを通過する場合、指定された<div>オブジェクトを呼び出し、ディスプレイ属性を動的に変更する必要があります。ディスプレイ属性には、表示と非表示の2つの属性値、つまりなし（非表示）とブロック（表示）が含まれます。
たとえば、WebページにMyDivのIDを含む<div>タグがあり、これは非表示に設定されています。 JavaScriptでは、この<div>の表示を制御するライティング方法は次のとおりです。
document.getElementById（ "mydiv"）。style.display = "block";
3。特定の実装
（1）表示および非表示のためにJavaScriptメソッドを書きます。セカンダリメニューは、マウスがプライマリメニュータイトルを通過すると表示され、マウスが移動するとセカンダリメニューが非表示になります。重要なコードは次のとおりです。
関数変化（IMG、Submenu、Path、Type）{img.src = "images/"+path+"。gif"; if（submenu！= null）{if（type == 0）{submenu.style.display = "none";} els {submenu.style.display = "（2）ページで、セカンダリメニューのコンテンツを事前に<div>タグの各プライマリナビゲーションメニューに追加し、セカンダリメニューの<div>タグを設定して非表示にします。重要なコードは次のとおりです。
<div id = "nuser" style = "background-color：＃f3ffd5; border：＃75a102 1px solid; width：200px; position：aspolute; display：none; left：1px; top：34px;"> <table cellpacing = "0" cellpadding = "0"情報</a> <a href = "＃">新しい従業員の追加</a> </td> </tr> </table> </div> ... //他のセカンダリメニューの内容は省略されています。
（3）プライマリメニューのテーブルの<TD>にオンマウスオーバーおよびオンマウスアウトイベントを設定し、ステップ（1）で定義されたJavaScript Change（）メソッドを呼び出し、セカンダリメニュー<Div>の表示と非表示を動的に変更します。重要なコードは次のとおりです。
<td onmouseOver = "change（imguser、nuser、 'nuser_r'、1）" onmouseout = "change（imguser、nuser、 'nuser_b'、0）" style = "cursor：" cursor： "cursor;
上記は、編集者が紹介したナビゲーションバーのポップアップフローティングメニューです。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！