Home > Developer > JavaScript
The 1st folder is saved as a menu.htm file and the following code content:
Copy codeThe Code is as follows:
<Html>
<Head>
<Style>
. Menuskin {
BORDER-RIGHT: # CBD7E9 1px solid; BORDER-TOP: # CBD7E9 1px solid; BACKGROUND-IMAGE: url (image/menubg.gif); VISIBILITY: hidden; FONT: 12px Tahoma, Verdana; BORDER-LEFT: # CBD7E9 1px solid; BORDER-BOTTOM: # CBD7E9 1px solid; POSITION: absolute; BACKGROUND-COLOR: # ffffff
}
. Menuskin {
PADDING-RIGHT: 10px; PADDING-LEFT: 25px; COLOR: #3A4273; TEXT-DECORATION: none
}
# Mouseoverstyle {
BORDER-RIGHT: #597db5 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #597db5 1px solid; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 2px; BORDER-LEFT: #597db5 1px solid; PADDING-TOP: 0px; BORDER-BOTTOM: #597db5 1px solid; BACKGROUND-COLOR: # c9d5e7
}
# Mouseoverstyle {
COLOR: black
}
. Menuitems {
PADDING-RIGHT: 1px; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; MARGIN: 2px; WORD-BREAK: keep-all; PADDING-TOP: 1px
}
</Style>
<Script type = "text/javascript" src = "menu. js"> </script>
</Head>
<Body vlink = '#333333' link = '#333333'>
<Div class = menuskin id = popmenu onmouseover = "clearhidemenu (); highlightmenu (event, 'on')" onmouseout = "highlightmenu (event, 'off'); dynamichide (event) "style =" Z-index: 100 "> </div>
<Center>
<A href = "###" onMouseOver = "showmenu (event, '<div class = menuitems> <a href = http://www.gyct.cn/article/index.asp> network digest </a> </div> <div class = menuitems> <a href = http://www.gyct.cn/article/index.asp> network digest </a> </div> ') "> Sike show </a>
</Center>
</Body>
</Html>
2. Save the following code as a menu.js file and put it in the same directory as menu.htm.
Copy codeThe Code is as follows:
// Pop-it menu-By Dynamic Drive-Modified by Wbird
// For full source code and more DHTML scripts, visit http://www.gyct.cn
// This credit MUST stay intact for use
Var menuOffX = 0 // The Menu distance from the leftmost end of the connected text
Var menuOffY = 18 // The Menu distance from the top of the connected text
Var vBobjects = new Array ();
Var fo_shadows = new Array ();
/// No need to edit beyond here
Var ie4 = document. all & navigator. userAgent. indexOf ("Opera") =-1
Var ns6 = document. getElementById &&! Document. all
Var ns4 = document. layers
Function MM_findObj (n, d ){
Var p, I, x; if (! D) d = document; if (p = n. indexOf ("? ")> 0 & parent. frames. length ){
D=parent.frames[n.substring(p%1%].doc ument; n = n. substring (0, p );}
If (! (X = d [n]) & d. all) x = d. all [n]; for (I = 0 ;! X & I <d. forms. length; I ++) x = d. forms [n];
For (I = 0 ;! X & d. layers & I <d. layers. length; I ++) xw.mm_findobj(n,d.layers.doc ument );
If (! X & d. getElementById) x = d. getElementById (n); return x;
}
Function fetch_object (idname, forcefetch)
{
If (typeof (vBobjects [idname]) = "undefined ")
{
VBobjects [idname] = MM_findObj (idname );
}
Return vBobjects [idname];
}
// Showmenu vmenu: content, which can be blank. vmenuobj DIV data ID, MOD 0 = Disable browser self-adaptation for layout navigation menu
Function showmenu (e, vmenu, vmenuobj, mod ){
If (! Document. all &&! Document. getElementById &&! Document. layers)
Return
Var which = vmenu;
If (vmenuobj)
{
Var MenuObj = fetch_object (vmenuobj );
If (MenuObj)
{
Which = MenuObj. innerHTML;
}
}
If (! Which)
{
Return
}
Clearhidemenu ();
Ie_clearshadow ();
Menuobj = ie4? Document. all. popmenu: ns6? Document. getElementById ("popmenu"): ns4? Document. popmenu :""
Menuobj. thestyle = (ie4 | ns6 )? Menuobj. style: menuobj
If (ie4 | ns6)
Menuobj. innerHTML = which
Else {
Menuobj.doc ument. write ('<layer name = gui bgcolor = "# E6E6E6" width = "165" onmouseover = "clearhidemenu ()" onmouseout = "hidemenu () "> '+ which +' </layer> ')
Menuobj.doc ument. close ()
}
Menuobj. contentwidth = (ie4 | ns6 )? Menuobj. offsetWidth: menuobj.document.gui.doc ument. width
Menuobj. contentheight = (ie4 | ns6 )? Menuobj. offsetHeight: menuobj.document.gui.doc ument. height
EventX = ie4? Event. clientX: ns6? E. clientX: e. x
EventY = ie4? Event. clientY: ns6? E. clientY: e. y
Var rightedge = ie4? Document. body. clientWidth-eventX: window. innerWidth-eventX
Var bottomedge = ie4? Document. body. clientHeight-eventY: window. innerHeight-eventY
Var getlength
If (rightedge <menuobj. contentwidth ){
Getlength = ie4? Document. body. scrollLeft + eventX-menuobj.contentwidth + menuOffX: ns6? Window. pageXOffset + eventX-menuobj.contentwidth: eventX-menuobj.contentwidth
} Else {
Getlength = ie4? Ie_x (event. srcElement) + menuOffX: ns6? Window. pageXOffset + eventX: eventX
}
Menuobj. thestyle. left = getlength + 'px'
If (bottomedge <menuobj. contentheight & mod! = 0 ){
Getlength = ie4? Document. body. scrollTop + eventY-menuobj.contentheight-event.offsetY + menuOffY-23: ns6? Window. pageYOffset + eventY-menuobj.contentheight-10: eventY-menuobj.contentheight
} Else {
Getlength = ie4? Ie_y (event. srcElement) + menuOffY: ns6? Window. pageYOffset + eventY + 10: eventY
}
Menuobj. thestyle. top = getlength + 'px'
Menuobj. thestyle. visibility = "visible"
Ie_dropshadow (menuobj, "#999999", 3)
Return false
}
Function ie_y (e ){
Var t = e. offsetTop;
While (e = e. offsetParent ){
T + = e. offsetTop;
}
Return t;
}
Function ie_x (e ){
Var l = e. offsetLeft;
While (e = e. offsetParent ){
L + = e. offsetLeft;
}
Return l;
}
Function ie_dropshadow (el, color, size)
{
Var I;
For (I = size; I> 0; I --)
{
Var rect = document. createElement ('div ');
Var rs = rect. style
Rs. position = 'absolute ';
Rs. left = (el. style. posLeft + I) + 'px ';
Rs. top = (el. style. posTop + I) + 'px ';
Rs. width = el. offsetWidth + 'px ';
Rs. height = el. offsetHeight + 'px ';
Rs. zIndex = el. style. zIndex-I;
Rs. backgroundColor = color;
Var opacity = 1-I/(I + 1 );
Rs. filter = 'Alpha (opacity = '+ (100 * opacity) + ')';
// El. insertAdjacentElement ('afterend', rect );
Fo_shadows [fo_shadows.length] = rect;
}
}
Function ie_clearshadow ()
{
For (var I = 0; I <fo_shadows.length; I ++)
{
If (fo_shadows [I])
Fo_shadows [I]. style. display = "none"
}
Fo_shadows = new Array ();
}
Function contains_ns6 (a, B ){
While (B. parentNode)
If (B = B. parentNode) =)
Return true;
Return false;
}
Function hidemenu (){
If (window. menuobj)
Menuobj. thestyle. visibility = (ie4 | ns6 )? "Hidden": "hide"
Ie_clearshadow ()
}
Function dynamichide (e ){
If (ie4 &&! Menuobj. contains (e. toElement ))
Hidemenu ()
Else if (ns6 & e. currentTarget! = E. relatedTarget &&! Contains_ns6 (e. currentTarget, e. relatedTarget ))
Hidemenu ()
}
Function delayhidemenu (){
If (ie4 | ns6 | ns4)
Delayhide = setTimeout ("hidemenu ()", 500)
}
Function clearhidemenu (){
If (window. delayhide)
ClearTimeout (delayhide)
}
Function highlightmenu (e, state ){
If (document. all)
Source_el = event. srcElement
Else if (document. getElementById)
Source_el=e.tar get
If (source_el.className = "menuitems "){
Source_el.id = (state = "on ")? "Mouseoverstyle ":""
}
Else {
While (source_el.id! = "Popmenu "){
Source_el = document. getElementById? Source_el.parentNode: source_el.parentElement
If (source_el.className = "menuitems "){
Source_el.id = (state = "on ")? "Mouseoverstyle ":""
}
}
}
}
If (ie4 | ns6)
Document. onclick = hidemenu
3. create the image directory under the menu.htm directory and create the background image.
PS: Case effect:
The following code is used:
<Div class = menuskin id = popmenu onmouseover = clearhidemenu () onmouseout = dynamichide (event) style = "z-index: 100;"> </div>
<Font color = "# eeeeee"> <a href = ### onMouseOver = "showmenu (event, '<div class = menuitems id = site_menu> <a href =/common/skins. asp? Action = skin_1> simple and stylish </a> <br/> <a href =/common/skins. asp? Action = skin_2> World of Warcraft </a> <br/> <a href =/common/skins. asp? Action = cookies_clear alt = clear the Cookies you have stored on this site> clear records </a> <br/> </div> ', 'site _ menu ') "> <font color = # eeeeee> [skin selection] </font> </a> </font>
Jb51 error-free correction
<Html> <pead> <style>. menuskin {BORDER-RIGHT: # CBD7E9 1px solid; BORDER-TOP: # CBD7E9 1px solid; BACKGROUND-IMAGE: url (image/menubg.gif); VISIBILITY: hidden; FONT: 12px Tahoma, verdana; BORDER-LEFT: # CBD7E9 1px solid; BORDER-BOTTOM: # CBD7E9 1px solid; POSITION: absolute; BACKGROUND-COLOR: # ffffff }. menuskin A {PADDING-RIGHT: 10px; PADDING-LEFT: 25px; COLOR: #3A4273; TEXT-DECORATION: none} # mouseoverstyle {BORDER-RIGHT: #597db5 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #597db5 1px solid; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 2px; BORDER-LEFT: #597db5 1px solid; PADDING-TOP: 0px; BORDER-BOTTOM: #597db5 1px solid; BACKGROUND-COLOR: # c9d5e7} # mouseoverstyle A {COLOR: black }. menuitems {PADDING-RIGHT: 1px; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; MARGIN: 2px; WORD-BREAK: keep-all; PADDING-TOP: 1px} </style> </pead> <body vlink = '#333333' link = '#333333'> <center> network programming asp ') "> script home </center> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
