Home > Developer > JavaScript

Effect of the dvbbs drop-down menu on jb51 correction

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

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]

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
scrollable drop down menu drop down menu swift 3 html5 drop down navigation menu axure drop down menu tutorial drop down menu in html example php drop down menu from database how to make drop down menu in dreamweaver
Related Article
Ajax and 302 response code test_javascript-js tutorial

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More