JavaScript CSS は右クリック メニュー効果コードを作成します_ナビゲーション メニュー

レンダリング:

<title>CSS および JavaScript 作成ページの右クリック メニュー</title> <style type="text/css"> body { font-family: "宋体"; font-size: 12px; } .skin0 { padding-top: 4px; text-align: left; width: 100px; border: 2px solid black; background-color: menu; font-family: "宋体"; line-height: 20px; cursor: default; visibility: hidden; } .skin1 { padding-top: 4px; cursor: default; font: menutext; text-align: left; font-family: "宋体"; font-size: 10pt; width: 100px; background-color: menu; border: 1 solid buttonface; visibility: hidden; border: 2 outset buttonhighlight; } </style> <div id="ie5menu" class="skin0"> 右クリック メニューを使用してテスト エフェクトを作成します。 <div onclick="alert('后退请三思！)"> </div>戻る<div onclick="alert('祝你前程似锦，大胆往前走吧！')"> </div>進む<hr> <div url="http://www.jb51.net" target="_blank" onclick="jumptoie5()"> </div>スクリプトホーム<div url="http://www.jb51.net/photoshop/" target="_blank" onclick="jumptoie5()"> </div>Photoshop チュートリアル<div url="http://www.jb51.net/list/list_3_1.htm" target="_blank" onclick="jumptoie5()"> </div>JavaScript<div url="http://www.jb51.net/list/list_114_1.htm" target="_blank" onclick="jumptoie5()"> </div>vbscript<hr> <div url="http://www.jb51.net/softs/index.html" target="_blank" onclick="jumptoie5()"> </div>ソフトウェアのダウンロード<div url="http://www.mydown.com/codes/" target="_blank" onclick="jumptoie5()"> </div>ソースコードのダウンロード<hr> <div url="http://www.jb51.net/list/list_6_1.htm" target="_blank" onclick="jumptoie5()"> </div>正規表現<div url="http://www.jb51.net/support.htm" onclick="jumptoie5()"> </div>連絡してください</div>
[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、更新して実行する必要があります

]

コード説明:
1. ページの読み込み中、まず、load1() メソッド
を実行して、それが IE ブラウザーであるかどうかを確認します。 現在のブラウザーが Internet Explorer の場合、document.all は true を返します。この場合、次の定義が有効になるはずです。つまり、クライアントが使用するブラウザがIEであることが検出された場合、ユーザが右クリックイベントを生成すると関数showmenuie5が呼び出され、ユーザが左クリックイベントを生成すると関数hidemenuie5が呼び出される。
2. 次に、関数 showmenuie5 と Hidemenuie5 を使用してメニューを表示および非表示にする方法を検討する必要があります。
もちろん、ここのメニューは本物の右クリックメニューではなく、自分で作ったdivで、このdivに入れたいものを入れています。マウス イベントを通じて関数を呼び出して、その表示を制御します。これにより、マウスの右ボタンを使用したのと同じ効果が得られます。
このブロックの最も外側のレイヤーは、ie5menu という ID を持つ div であり、そのスタイルをskin0 として定義しています。他のスタイルをカスタマイズして、skin0 を置き換えることもできます。
3. メニュー オプションをクリックした後の操作 jumptoie5() 関数は、右クリック メニューのレイヤーをクリックしたときの動作、つまり実行オプションを実装します。