In general webpage, the menu of acquiesce right key of IE browser is invariable fixed mode, the to it utilization rate when major netizen browses a webpage is not high. To professional webpage stylist, if can devise right key menu personalized content, the style should be how cruel and convenient.
Just think, the user is right on your website key, it is you of elaborate organization " link " , " post a letter " , included the animation of seesaw pattern Flash of profusion even! If pursue 1 -- fasten dribble, we satisfy a craving for delicious food with respect to solution below, look how to make: ) .
Of right key menu transform, I have two kinds of ways (actually, it is same constitutionally, it is the thing) of JavaScript.
The first kind of method is prior, what duplicate following source code to file of the HTML in the webpage is medium can.
<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:1Solid Buttonface;
Visibility:hIdden;
Border:2Outset Buttonhighlight;
}
.menuitems {
Padding-left:15px;
Padding-right:10px;
}
- - >
</ Style>
<SCRIPT LAN GUAGE="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.s tyle.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() "OnClick="jumptoie5();"> of of OnMouseout="lowlightie5()"
<Div Class="menuitems" Url="javascript:hIstory.back();"> is returned</ Div>
<Div Class="menuitems" Url="http://javacool.3322.net"> answers home page</ Div>
<Hr>
<Netease of Div Class="menuitems" Url="http://www.163.com"></ Div>
<Sohu of Div Class="menuitems" Url="http://www.sohu.com"></ Div>
<Hr>
<Sina of Div Class="menuitems" Url="http://www.sina.com.cn"></ Div>
<Yahoo of Div Class="menuitems" Url="http://www.yahoo.com.cn"></ Div>
</ Div>
<Script Language="JavaScript1.2">
If (document.all &&Window.print) {
Ie5menu.className = Menuskin;
Document.oncontextmenu = Showmenuie5;
Document.body.onclick = Hidemenuie5;
}
</ Script>
Its effect pursues as follows:
The 2nd kind of method is a plug-in unit that uses Dreamweaver -- Right_Click_Menu_Buil-der, can get in Http://www.macromedia.com download. After installation, can b e in of Dreamweaver " Command " of menu below find " Right Click Menu Builder " command.
Click this command, appeared one is like the setting casing that the graph shows 3 times. Basically have two parts content: "Menu " and " Styles " .
Menu installs a function, link of super link, post a letter is installed here, be here to be able to establish 10 link at most. In this choice casing " Menu Text " it is you the character that right key lieutenant general shows (change Chinese) ; In " URL " in write corresponding link way; "Target " whether is the decision new the window or it is the content that shows a link with present window, fill " Blank " show in new window namely, with Dreamweaver " Target " the setting is same.
Styles is appearance of responsible setting menu, have two kinds of choices: Img Src="http://tech.china.com/zh_cn/netschool/homepage/167718/20020521/images/
11257823_63732.jpg">
"Windows Type Menu(Default) " it is acquiescent -- most the appearance of guileless, familiar Windows style;
"Custom Menu " decide meaning menu oneself, if you chose this one, undertake installing to the content below even:
"Menu Width " , the width of menu;
"Font " , font;
"Font Color " , font color;
"Font Side " , font size;
"Background Color " , " Background Image " , bear scenery and background picture;
Still have " Cursor " , use choice mouse type.
These set of above are good, can nod " Add " create the effect. Preview, pretty good?
How does that join Flash? Such doing: One is added in the webpage " Table " , its " W " wide proposal sets for: "100% " , such meetings are convenient the fixed position of all sorts of elements that add below you. Good, in this " Table " in the SWF file that inserts Flash, the position is set into " be placed in the middle " (basically be convenient fixed position, specific of course issue is specific analysis, oneself try the) with intentional meeting more.
Little skill: Flash animation mights as well make it has alternant link the sort of, why? Such super links that you can increase aleatoric amount. Plug-in unit oneself has most 10 limitation, used Flash to be able to be solved completely! ^_^
Posts
No comments:
Post a Comment