一般的なウェブページでは、IE ブラウザのデフォルトの右クリック メニューは不変の固定モードであり、ほとんどのネチズンはウェブ ページを閲覧するときにこれをあまり活用しません。プロの Web デザイナーにとって、右クリック メニューをパーソナライズされたコンテンツでデザインできれば、非常にクールで便利になるでしょう。
ユーザーがあなたの Web サイトを右クリックすると、注意深く整理された「リンク」と「メッセージの送信」が表示され、カラフルなインタラクティブな Flash アニメーションも含まれていると想像してみてください。図 1 に示すように、よだれを垂らさないでください。喉の渇きを潤して作り方を見てみましょう :)。
右クリック メニューを変形するには 2 つの方法があります (実際、本質は同じで、どちらも JavaScript のものです)。
最初の方法は前述の通り、次のソース コードを Web ページの HTML ファイルにコピーするだけです。
<スタイル>
< !--
.skin0 {
位置:絶対;
テキスト整列:左;
幅:200ピクセル;
ボーダー:2px ソリッドブラック;
背景色:メニュー;
フォントファミリー:Verdana;
行の高さ:20px;
カーソル:デフォルト;
可視性:非表示;
}
.skin1 {
カーソル:デフォルト;
フォント:メニューテキスト;
位置:絶対;
テキスト整列:左;
フォントファミリー: Arial、Helvetica、サンセリフ;
フォントサイズ: 10pt;
幅:120ピクセル;
背景色:メニュー;
ボーダー: 1 つの無地のボタン面。
可視性:非表示;
ボーダー:2 アウトセットボタンハイライト;
}
.menuitems {
パディング左:15px;
パディング右:10px;
}
-->
</スタイル>
< スクリプト言語="JavaScript1.2">
< !-- Web サイト: http://www.painting-Effects.co.uk -->
< !-- このスクリプトとその他多くのスクリプトは、オンラインで無料で入手できます -->
< !-- JavaScript ソースhttp://javascript.internet.com -->
< !-- 開始!!
var menuskin = "skin1" // スキン0、またはスキン1;
var display_url = 0; // ステータスバーに URL を表示しますか?
関数 showmenuie5() {
var rightedge = document.body.clientWidth-event.clientX;
varbottomedge = document.body.clientHeight-event.clientY;
if (rightedge < ie5menu.offsetWidth)
ie5menu.style.left = document.body.scrollLeft +event.clientX -
ie5menu.offsetWidth;
それ以外
ie5menu.style.left = document.body.scrollLeft +event.clientX;
if (bottomedge < ie5menu.offsetHeight)
ie5menu.style.top = document.body.scrollTop +event.clientY -
ie5menu.offsetHeight;
それ以外
ie5menu.style.top = document.body.scrollTop +event.clientY;
ie5menu.style.visibility = "可視";
false を返します。
}
関数 Hidemenuie5() {
ie5menu.style.visibility = "非表示";
}
関数ハイライト 5() {
if (event.srcElement.className == "メニュー項目") {
イベント.srcElement.style.backgroundColor = "ハイライト";
イベント.srcElement.style.color = "白";
if(表示URL)
window.status = イベント.srcElement.url;
}
}
関数 lowlightie5() {
if (event.srcElement.className == "メニュー項目") {
イベント.srcElement.style.backgroundColor = "";
イベント.srcElement.style.color = "黒";
window.status = "";
}
}
関数jumptoie5() {
if (event.srcElement.className == "メニュー項目") {
if (event.srcElement.getAttribute("target") != null)
window.open(event.srcElement.url,event.srcElement.getAttribute("target"));
それ以外
window.location = イベント.srcElement.url;
}
}
// 終了 -->
</script>
< div id="ie5menu" class="skin0" onMouseover="highlightie5()"
onMouseout="lowlightie5()" onClick="jumptoie5();">
< div class="menuitems" url="javascript:history.back();">戻る</div>
< div class="menuitems" url=" http://javacool.3322.net ">ホームページに戻る</div>
<時間>
< div class="menuitems" url=" http://www.163.com ">NetEase</div>
< div class="menuitems" url=" http://www.sohu.com ">捜狐</div>
<時間>
< div class="menuitems" url=" http://www.sina.com.cn ">シーナ</div>
< div class="menuitems" url=" http://www.yahoo.com.cn ">Yahoo</div>
< /div>
<スクリプト言語="JavaScript1.2">
if (document.all && window.print) {
ie5menu.className = メニュースキン;
document.oncontextmenu = showmenuie5;
document.body.onclick = Hidemenuie5;
}
</script>
効果は次のとおりです。
2 番目の方法は、Dreamweaver のプラグインである Right_Click_Menu_Buil-der を使用する方法です。これはhttp://www.macromedia.comからダウンロードできます。インストール後、Dreamweaver の「コマンド」メニューに「右クリック メニュー ビルダー」コマンドが表示されます。
このコマンドをクリックすると、図 3 に示すような設定ボックスが表示されます。主に「メニュー」と「スタイル」の 2 つの部分があります。
ハイパーリンクやリンク送信などの設定を行うメニューです。最大10個の接続を設定できます。この選択ボックスの「メニュー テキスト」は、右クリックしたときに表示されるテキストです（中国語に変更します）。「ターゲット」は、新しいウィンドウか現在のウィンドウかを決定します。ウィンドウを使用して表示 Dreamweaverの「ターゲット」設定と同じ「空白」を入力すると、リンクの内容が新しいウィンドウに表示されます。
スタイルはメニューの外観を設定します。次の 2 つのオプションがあります。
img src= " 「Windows Type Menu(Default)」はデフォルトの項目です。最もシンプルな外観で、使い慣れた Windows スタイルです。
「カスタムメニュー」 カスタムメニューを選択した場合、以下の内容も設定する必要があります。
「メニューの幅」、メニューの幅。
「フォント」、フォント;
「フォントの色」、フォントの色。
「フォントサイド」、フォントサイズ。
「背景色」、「背景画像」、背景色と背景画像;
マウスのスタイルを選択するために使用される「カーソル」もあります。
上記を設定した後、「追加」をクリックしてエフェクトを生成できます。プレビューしてみて、それでいいですか?
では、Flash を追加するにはどうすればよいでしょうか?その方法は次のとおりです。 Web ページに「テーブル」を追加します。その「W」幅を「100%」に設定することをお勧めします。これにより、以下に追加するさまざまな要素の配置が容易になります。次に、Flash SWF ファイルを「テーブル」に挿入し、位置を「中央」に設定します (主に位置決めを容易にするためです。もちろん、特定の問題を詳細に分析でき、さらに試すことで洞察が得られます)。
ヒント: Flash アニメーションはインタラクティブ リンクを使用して作成することもできます。なぜでしょうか。このようにして、必要なだけハイパーリンクを追加できます。プラグイン自体には最大 10 項目の制限がありますが、Flash を使用することで解決できます。