Effect of the dvbbs drop-down menu on jb51 correction

Source: Internet
Author: User

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]

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.