In general web pages, the default right-click menu of IE browser is an unchanging fixed mode, and most netizens do not make high use of it when browsing web pages. For professional web designers, it would be so cool and convenient if the right-click menu could be designed with personalized content.
Just imagine, when a user right-clicks on your website, you will see your carefully organized "links" and "send messages", which even include colorful interactive Flash animations! As shown in Figure 1 - don’t drool, let’s quench your thirst and see how to make it :).
I have two ways to transform the right-click menu (in fact, the essence is the same, both are JavaScript things).
The first method is earlier, just copy the following source code into the HTML file in the web page.
<style>
< !--
.skin0 {
position:absolute;
text-align:left;
width:200px;
border:2px solid black;
background-color:menu;
font-family:Verdana;
line-height:20px;
cursor:default;
visibility:hidden;
}
.skin1 {
cursor:default;
font:menutext;
position:absolute;
text-align:left;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
width:120px;
background-color:menu;
border:1 solid buttonface;
visibility:hidden;
border:2 outset buttonhighlight;
}
.menuitems {
padding-left:15px;
padding-right:10px;
}
-->
</style>
< SCRIPT LANGUAGE="JavaScript1.2">
< !-- Web Site: http://www.painting-effects.co.uk -->
< !-- This script and many more are available free online at -->
< !-- The JavaScript Source!! http://javascript.internet.com -->
< !-- Begin
var menuskin = "skin1"; // skin0, or skin1
var display_url = 0; // Show URLs in status bar?
function showmenuie5() {
var rightedge = document.body.clientWidth-event.clientX;
var bottomedge = document.body.clientHeight-event.clientY;
if (rightedge < ie5menu.offsetWidth)
ie5menu.style.left = document.body.scrollLeft + event.clientX -
ie5menu.offsetWidth;
else
ie5menu.style.left = document.body.scrollLeft + event.clientX;
if (bottomedge < ie5menu.offsetHeight)
ie5menu.style.top = document.body.scrollTop + event.clientY -
ie5menu.offsetHeight;
else
ie5menu.style.top = document.body.scrollTop + event.clientY;
ie5menu.style.visibility = "visible";
return false;
}
function hidemenuie5() {
ie5menu.style.visibility = "hidden";
}
function highlightie5() {
if (event.srcElement.className == "menuitems") {
event.srcElement.style.backgroundColor = "highlight";
event.srcElement.style.color = "white";
if(display_url)
window.status = event.srcElement.url;
}
}
function lowlightie5() {
if (event.srcElement.className == "menuitems") {
event.srcElement.style.backgroundColor = "";
event.srcElement.style.color = "black";
window.status = "";
}
}
function jumptoie5() {
if (event.srcElement.className == "menuitems") {
if (event.srcElement.getAttribute("target") != null)
window.open(event.srcElement.url, event.srcElement.getAttribute("target"));
else
window.location = event.srcElement.url;
}
}
// End -->
</script>
< div id="ie5menu" class="skin0" onMouseover="highlightie5()"
onMouseout="lowlightie5()" onClick="jumptoie5();">
< div class="menuitems" url="javascript:history.back();">Back</div>
< div class="menuitems" url=" http://javacool.3322.net ">Back to homepage</div>
<hr>
< div class="menuitems" url=" http://www.163.com ">NetEase</div>
< div class="menuitems" url=" http://www.sohu.com ">Sohu</div>
<hr>
< div class="menuitems" url=" http://www.sina.com.cn ">Sina</div>
< div class="menuitems" url=" http://www.yahoo.com.cn ">Yahoo</div>
< /div>
<script language="JavaScript1.2">
if (document.all && window.print) {
ie5menu.className = menuskin;
document.oncontextmenu = showmenuie5;
document.body.onclick = hidemenuie5;
}
</script>
The effect is as follows:
The second method is to use a plug-in for Dreamweaver - Right_Click_Menu_Buil-der, which can be downloaded from http://www.macromedia.com . After installation, the "Right Click Menu Builder" command can be found under the "Command" menu in Dreamweaver.
Click this command, and a setting box as shown in Figure 3 will appear. There are mainly two parts: "Menu" and "Styles".
Menu is for setting functions. Hyperlinks and sending links are set here. Up to 10 connections can be set here. "Menu Text" in this selection box is the text that will be displayed when you right-click (change it to Chinese); write the corresponding link path in "URL"; "Target" determines whether it is a new window or the current window is used for display The content of the link will be displayed in a new window by filling in "Blank", which is the same as the "Target" setting of Dreamweaver.
Styles is responsible for setting the menu appearance. There are two options:
img src=" "Windows Type Menu(Default)" is the default item - the simplest look, familiar Windows style;
“Custom Menu” Custom menu, if you select this item, you also need to set the following content:
"Menu Width", the width of the menu;
"Font", font;
"Font Color", font color;
"Font Side", font size;
"Background Color", "Background Image", background color and background image;
There is also "Cursor", which is used to select the mouse style.
After setting the above, you can click “Add” to generate the effect. Preview it, is it good?
Then how to add Flash? Here’s how to do it: Add a “Table” to the web page. It is recommended that its “W” width be set to: “100%”. This will facilitate the positioning of the various elements you add below. Okay, insert the Flash SWF file into the "Table" and set the position to "center" (mainly to facilitate positioning, of course, you can analyze the specific problems in detail and you will gain insights by trying more).
Tip: Flash animation might as well be made with interactive links. Why? This way you can add as many hyperlinks as you want. The plug-in itself has a limit of up to 10 items, which can be solved by using Flash! ^_^