JavaScript 结合 CSS 制作带背景图的下拉菜单
2004-07-14 15:57
951 查看
剥离动网论坛的 JavaScript & CSS 文件，手工做了一个自己的下拉菜单，不用类库真麻烦。
不过，还是先谢谢动网共享源码。
样式一
样式二 ============================= Demo.htm 代码 <html>
<head>
<title>演示动态创建菜单及 CSS 风格</title>
<script language="javascript" src="hudark.js" type="text/JavaScript"></script>
<link href="main.css" type="text/css" rel="stylesheet">
</head>
<body MS_POSITIONING="GridLayout">
<TABLE height="588" cellSpacing="0" cellPadding="0" width="179" border="0" ms_2d_layout="TRUE">
<TR>
<TD width="0" height="0"></TD>
<TD width="10" height="0"></TD>
<TD width="169" height="0"></TD>
</TR>
<TR vAlign="top">
<TD width="0" height="15"></TD>
<TD colSpan="2" rowSpan="2">
<form id="form1" method="post" runat="server">
<TABLE height="162" cellSpacing="0" cellPadding="0" width="576" border="0" ms_2d_layout="TRUE">
<TR vAlign="top">
<TD width="168" height="136"></TD>
<TD width="408"></TD>
</TR>
<TR vAlign="top">
<TD height="26"></TD>
<TD>
<table ID="Table1" border="tableBorder2" cellSpacing="0" height="25" cellPadding="0" width="407"
align="center">
<tr>
<td><A onmouseover="showmenu(event,'<div class=menuitems><a style=font-size:9pt;line-height:14pt; href=boardstat.asp?reaction=onlineUserinfo&boardid=0>腾讯</a></div><div class=menuitems><a style=font-size:9pt;line-height:14pt; href=boardstat.asp?action=lasttopicnum&boardid=0>主题数图例</a></div><div class=menuitems><a style=font-size:9pt;line-height:14pt; href=boardstat.asp?action=lastbbsnum&boardid=0>总帖数图例</a></div><div class=menuitems><a style=font-size:9pt;line-height:14pt; href=boardstat.asp?reaction=online&boardid=0>在线图例</a></div><div class=menuitems><a style=font-size:9pt;line-height:14pt; href=boardstat.asp?reaction=onlineinfo&boardid=0>在线情况</a></div><div class=menuitems><a style=font-size:9pt;line-height:14pt; href=boardstat.asp?reaction=onlineUserinfo&boardid=0>用户组在线图例</a></div>')">例1</A></td>
<td>A2</td>
<td><A onmouseover="showmenu2(event,'<div class=menuitems2><a style=font-size:9pt;line-height:14pt; href=boardstat.asp?reaction=onlineUserinfo&boardid=0>腾讯</a></div><div class=menuitems2><a style=font-size:9pt;line-height:14pt; href=boardstat.asp?action=lasttopicnum&boardid=0>主题数图例</a></div><div class=menuitems2><a style=font-size:9pt;line-height:14pt; href=boardstat.asp?action=lastbbsnum&boardid=0>总帖数图例</a></div><div class=menuitems2><a style=font-size:9pt;line-height:14pt; href=boardstat.asp?reaction=online&boardid=0>在线图例</a></div>')">例2</A></td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
</tr>
</table>
</TD>
</TR>
</TABLE>
</form>
</TD>
<TD></TD>
</TR>
<TR vAlign="top">
<TD width="0" height="573"></TD>
<TD></TD>
<TD>
<div class="menuskin" id="popmenu" onmouseover="clearhidemenu();highlightmenu(event,'on')"
onmouseout="highlightmenu(event,'off');dynamichide(event)"></div>
</TD>
</TR>
<FONT face="宋体"></FONT>
<div class="menuskin2" id="popmenu2" onmouseover="clearhidemenu();highlightmenu2(event,'on')"
onmouseout="highlightmenu2(event,'off');dynamichide(event)"></div>
</TABLE>
</body>
</html>
============================= Main.css 代码 A:link { COLOR: #000000; TEXT-DECORATION: none }
A:active { COLOR: #000000; TEXT-DECORATION: none }
A:visited { COLOR: #000000; TEXT-DECORATION: none }
A:hover { COLOR: #4455aa; filter:alpha(50); TEXT-DECORATION: none; } B:link { COLOR: #000000; TEXT-DECORATION: none }
B:active { COLOR: #000000; TEXT-DECORATION: none }
B:visited { COLOR: #000000; TEXT-DECORATION: none }
B:hover { COLOR: #4455aa; TEXT-DECORATION: none; }
BODY { SCROLLBAR-FACE-COLOR: #dee3e7; FONT-SIZE: 11px; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; SCROLLBAR-SHADOW-COLOR: #dee3e7; COLOR: #000000; SCROLLBAR-3DLIGHT-COLOR: #d1d7dc; SCROLLBAR-ARROW-COLOR: #006699; SCROLLBAR-TRACK-COLOR: #efefef; FONT-FAMILY: Verdana,宋体; SCROLLBAR-DARKSHADOW-COLOR: #98aab1 }
FONT { LINE-HEIGHT: normal }
TD { FONT-SIZE: 11px; LINE-HEIGHT: 15px; FONT-FAMILY: Verdana,宋体 }
TH { FONT-WEIGHT: bold; FONT-SIZE: 12px; BACKGROUND-IMAGE: url(Skins/Default/css/default/bg1.gif); COLOR: white; BACKGROUND-COLOR: #4455aa }
TD.TableTitle2 { BACKGROUND-COLOR: #e4e8ef }
TD.TableBody1 { LINE-HEIGHT: normal; BACKGROUND-COLOR: #ffffff }
TD.TableBody2 { LINE-HEIGHT: normal; BACKGROUND-COLOR: #e4e8ef }
TD.TopDarkNav { BACKGROUND-IMAGE: url(Skins/Default/css/default/topbg.gif) }
TD.TopLighNav { BACKGROUND-IMAGE: url(Skins/Default/css/default/bottombg.gif) }
TD.TopLighNav1 { BACKGROUND-IMAGE: url(Skins/Default/css/default/tabs_m_tile.gif) }
TD.TopLighNav2 { BACKGROUND-COLOR: #ffffff }
.tableBorder1 { BORDER-RIGHT: 1px; BORDER-TOP: 1px; BORDER-LEFT: 1px; WIDTH: 98%; BORDER-BOTTOM: 1px; BACKGROUND-COLOR: #6595d6 }
.tableBorder2 { BORDER-RIGHT: #dedede 1px solid; BORDER-TOP: #dedede 1px solid; BORDER-LEFT: #dedede 1px solid; WIDTH: 98%; BORDER-BOTTOM: #dedede 1px solid; BACKGROUND-COLOR: #efefef } #TableTitleLink A:link { COLOR: #ffffff; TEXT-DECORATI
4000
ON: none }
#TableTitleLink A:visited { COLOR: #ffffff; TEXT-DECORATION: none }
#TableTitleLink A:active { COLOR: #ffffff; TEXT-DECORATION: none }
#TableTitleLink A:hover { COLOR: #ffffff; TEXT-DECORATION: underline }
INPUT { FONT-SIZE: 12px; COLOR: #000000; LINE-HEIGHT: 15px; FONT-FAMILY: Tahoma,Verdana,"宋体" }
SELECT { FONT-SIZE: 12px; COLOR: #000000; LINE-HEIGHT: 15px; FONT-FAMILY: Tahoma,Verdana,"宋体" }
TEXTAREA { FONT-SIZE: 12px; COLOR: #000000; LINE-HEIGHT: 15px; FONT-FAMILY: Tahoma,Verdana,"宋体" }
OPTION { FONT-SIZE: 12px; COLOR: #000000; LINE-HEIGHT: 15px; FONT-FAMILY: Tahoma,Verdana,"宋体" }
.normalTextSmall { FONT-SIZE: 11px; COLOR: #000000; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif }
.menuskin { BORDER-RIGHT: #666666 1px solid; BORDER-TOP: #666666 1px solid; BACKGROUND-IMAGE: url(Skins/Default/tencent.jpg); VISIBILITY: hidden; FONT: 12px Verdana; BORDER-LEFT: #666666 1px solid; BORDER-BOTTOM: #666666 1px solid; BACKGROUND-REPEAT: repeat-y; POSITION: absolute; BACKGROUND-COLOR: #efefef }
.menuskin A { PADDING-RIGHT: 10px; PADDING-LEFT: 25px; BEHAVIOR: url(inc/noline.htc); COLOR: black; TEXT-DECORATION: none } .menuskin2 { BORDER-RIGHT: #666666 1px solid; BORDER-TOP: #666666 1px solid; BACKGROUND-IMAGE: url(Skins/Default/tencent.jpg); VISIBILITY: hidden; FONT: 12px Verdana; BORDER-LEFT: #666666 1px solid; BORDER-BOTTOM: #666666 1px solid; BACKGROUND-REPEAT: repeat-y; POSITION: absolute; BACKGROUND-COLOR: #efefef alpha(5) }
.menuskin2 B { PADDING-RIGHT: 10px; PADDING-LEFT: 25px; BEHAVIOR: url(inc/noline.htc); COLOR: black; 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; } #mouseoverstyle2 { COLOR:White; 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 alpha(5); }
#mouseoverstyle2 B { COLOR: black; } .menuitems { PADDING-RIGHT: 1px; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; MARGIN: 2px; WORD-BREAK: keep-all; PADDING-TOP: 1px }
.menuitems2 { PADDING-RIGHT: 1px; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; MARGIN: 2px; WORD-BREAK: keep-all; PADDING-TOP: 1px; } A.navlink:link { COLOR: #000000; TEXT-DECORATION: none }
A.navlink:visited { COLOR: #000000; TEXT-DECORATION: none }
A.navlink:hover { COLOR: #003399; TEXT-DECORATION: none } .BrightClass { BACKGROUND-COLOR: #d7d7d7 }
DIV.quote { BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 5px; BACKGROUND: #f3f3f3; PADDING-BOTTOM: 5px; MARGIN: 5px 20px; BORDER-LEFT: #cccccc 1px solid; LINE-HEIGHT: normal; PADDING-TOP: 5px; BORDER-BOTTOM: #cccccc 1px solid }
DIV.HtmlCode { BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 5px; FONT-SIZE: 12px; BACKGROUND: #fdfddf; PADDING-BOTTOM: 5px; MARGIN: 5px 20px; OVERFLOW: auto; BORDER-LEFT: #cccccc 1px solid; LINE-HEIGHT: normal; PADDING-TOP: 5px; BORDER-BOTTOM: #cccccc 1px solid; FONT-FAMILY: ncursive } ==================================== Hudark.js 代码 //Pop-it menu- By Dynamic Drive - Modified by Wbird
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use var menuOffX=0 //菜单距连接文字最左端距离
var menuOffY=18 //菜单距连接文字顶端距离 var fo_shadows=new Array()
var linkset=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 showmenu(e,vmenu,mod)
{
if (!document.all&&!document.getElementById&&!document.layers)
return
which=vmenu
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.document.write(''+which+'')
menuobj.document.close()
}
menuobj.contentwidth=(ie4||ns6)? menuobj.offsetWidth : menuobj.document.gui.document.width
menuobj.contentheight=(ie4||ns6)? menuobj.offsetHeight : menuobj.document.gui.document.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
if (rightedge menuobj.thestyle.left=ie4? document.body.scrollLeft+eventX-menuobj.contentwidth+menuOffX : ns6? window.pageXOffset+eventX-menuobj.contentwidth : eventX-menuobj.contentwidth
else
menuobj.thestyle.left=ie4? ie_x(event.srcElement)+menuOffX : ns6? window.pageXOffset+eventX : eventX
if (bottomedge menuobj.thestyle.top=ie4? document.body.scrollTop+eventY-menuobj.contentheight-event.offsetY+menuOffY-23 : ns6? window.pageYOffset+eventY-menuobj.contentheight-10 : eventY-menuobj.contentheight
else
menuobj.thestyle.top=ie4? ie_y(event.srcElement)+menuOffY : ns6? window.pageYOffset+eventY+10 : eventY
menuobj.thestyle.visibility="visible"
ie_dropshadow(menuobj,"#999999",3)
return false
} function showmenu2(e,vmenu,mod)
{
if (!document.all&&!document.getElementById&&!document.layers)
return
which=vmenu
clearhidemenu()
ie_clearshadow()
menuobj=ie4? document.all.popmenu : ns6? document.getElementById("popmenu2") : ns4? document.popmenu : ""
menuobj.thestyle=(ie4||ns6)? menuobj.style : menuobj
if (ie4||ns6)
menuobj.innerHTML=which
else{
menuobj.document.write(''+which+'')
menuobj.document.close()
}
menuobj.contentwidth=(ie4||ns6)? menuobj.offsetWidth : menuobj.document.gui.document.width
menuobj.contentheight=(ie4||ns6)? menuobj.offsetHeight : menuobj.document.gui.document.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
if (rightedge menuobj.thestyle.left=ie4? document.body.scrollLeft+eventX-menuobj.contentwidth+menuOffX : ns6? window.pageXOffset+eventX-menuobj.contentwidth : eventX-menuobj.contentwidth
else
menuobj.thestyle.left=ie4? ie_x(event.srcElement)+menuOffX : ns6? window.pageXOffset+eventX : eventX
if (bottomedge menuobj.thestyle.top=ie4? document.body.scrollTop+eventY-menuobj.contentheight-event.offsetY+menuOffY-23 : ns6? window.pageYOffset+eventY-menuobj.contentheight-10 : eventY-menuobj.contentheight
else
menuobj.thestyle.top=ie4? ie_y(event.srcElement)+menuOffY : ns6? window.pageYOffset+eventY+10 : eventY
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 {
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) == a)
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.target
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" : ""
}
}
}
} function highlightmenu2(e,state)
{
if (document.all)
source_el=event.srcElement
else if (document.getElementById)
source_el=e.target
if (source_el.className=="menuitems2")
{
source_el.id=(state=="on")? "mouseoverstyle2" : ""
}
else{
while(source_el.id!="popmenu2")
{
source_el=document.getElementById? source_el.parentNode : source_el.parentElement
if (source_el.className=="menuitems2")
{
source_el.id=(state=="on")? "mouseoverstyle2" : ""
}
}
}
} if (ie4||ns6)
document.onclick=hidemenu //HTML过滤函数
function HTMLEncode(text)
{
text = text.replace(/&/g, "&") ;
text = text.replace(/"/g, """) ;
text = text.replace(/, ;
text = text.replace(/>/g, ">") ;
text = text.replace(/'/g, "’") ; return text ;
} ==================================== 用到的图片文件 /Skins/Default 的目录 2004-07-13 16:05 82 minus.gif
2004-07-13 16:05 85 plus.gif
2004-07-13 23:02 2,521 dvmenubg3.gif
2003-11-21 02:31 819 btn_pers_tile.gif
2004-07-14 10:18 11,745 hudark.jpg
2004-07-14 10:40 11,212 hudark3.jpg
2004-07-14 10:40 11,212 tencent.jpg /Skins/Default/css/default 的目录 2004-07-13 16:03 53 topbg.gif
2004-07-13 16:03 268 bg1.gif
2004-07-13 16:03 53 bottombg.gif
2004-07-13 16:03 99 tabs_m_tile.gif
不过，还是先谢谢动网共享源码。
样式一
样式二 ============================= Demo.htm 代码 <html>
<head>
<title>演示动态创建菜单及 CSS 风格</title>
<script language="javascript" src="hudark.js" type="text/JavaScript"></script>
<link href="main.css" type="text/css" rel="stylesheet">
</head>
<body MS_POSITIONING="GridLayout">
<TABLE height="588" cellSpacing="0" cellPadding="0" width="179" border="0" ms_2d_layout="TRUE">
<TR>
<TD width="0" height="0"></TD>
<TD width="10" height="0"></TD>
<TD width="169" height="0"></TD>
</TR>
<TR vAlign="top">
<TD width="0" height="15"></TD>
<TD colSpan="2" rowSpan="2">
<form id="form1" method="post" runat="server">
<TABLE height="162" cellSpacing="0" cellPadding="0" width="576" border="0" ms_2d_layout="TRUE">
<TR vAlign="top">
<TD width="168" height="136"></TD>
<TD width="408"></TD>
</TR>
<TR vAlign="top">
<TD height="26"></TD>
<TD>
<table ID="Table1" border="tableBorder2" cellSpacing="0" height="25" cellPadding="0" width="407"
align="center">
<tr>
<td><A onmouseover="showmenu(event,'<div class=menuitems><a style=font-size:9pt;line-height:14pt; href=boardstat.asp?reaction=onlineUserinfo&boardid=0>腾讯</a></div><div class=menuitems><a style=font-size:9pt;line-height:14pt; href=boardstat.asp?action=lasttopicnum&boardid=0>主题数图例</a></div><div class=menuitems><a style=font-size:9pt;line-height:14pt; href=boardstat.asp?action=lastbbsnum&boardid=0>总帖数图例</a></div><div class=menuitems><a style=font-size:9pt;line-height:14pt; href=boardstat.asp?reaction=online&boardid=0>在线图例</a></div><div class=menuitems><a style=font-size:9pt;line-height:14pt; href=boardstat.asp?reaction=onlineinfo&boardid=0>在线情况</a></div><div class=menuitems><a style=font-size:9pt;line-height:14pt; href=boardstat.asp?reaction=onlineUserinfo&boardid=0>用户组在线图例</a></div>')">例1</A></td>
<td>A2</td>
<td><A onmouseover="showmenu2(event,'<div class=menuitems2><a style=font-size:9pt;line-height:14pt; href=boardstat.asp?reaction=onlineUserinfo&boardid=0>腾讯</a></div><div class=menuitems2><a style=font-size:9pt;line-height:14pt; href=boardstat.asp?action=lasttopicnum&boardid=0>主题数图例</a></div><div class=menuitems2><a style=font-size:9pt;line-height:14pt; href=boardstat.asp?action=lastbbsnum&boardid=0>总帖数图例</a></div><div class=menuitems2><a style=font-size:9pt;line-height:14pt; href=boardstat.asp?reaction=online&boardid=0>在线图例</a></div>')">例2</A></td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
</tr>
</table>
</TD>
</TR>
</TABLE>
</form>
</TD>
<TD></TD>
</TR>
<TR vAlign="top">
<TD width="0" height="573"></TD>
<TD></TD>
<TD>
<div class="menuskin" id="popmenu" onmouseover="clearhidemenu();highlightmenu(event,'on')"
onmouseout="highlightmenu(event,'off');dynamichide(event)"></div>
</TD>
</TR>
<FONT face="宋体"></FONT>
<div class="menuskin2" id="popmenu2" onmouseover="clearhidemenu();highlightmenu2(event,'on')"
onmouseout="highlightmenu2(event,'off');dynamichide(event)"></div>
</TABLE>
</body>
</html>
============================= Main.css 代码 A:link { COLOR: #000000; TEXT-DECORATION: none }
A:active { COLOR: #000000; TEXT-DECORATION: none }
A:visited { COLOR: #000000; TEXT-DECORATION: none }
A:hover { COLOR: #4455aa; filter:alpha(50); TEXT-DECORATION: none; } B:link { COLOR: #000000; TEXT-DECORATION: none }
B:active { COLOR: #000000; TEXT-DECORATION: none }
B:visited { COLOR: #000000; TEXT-DECORATION: none }
B:hover { COLOR: #4455aa; TEXT-DECORATION: none; }
BODY { SCROLLBAR-FACE-COLOR: #dee3e7; FONT-SIZE: 11px; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; SCROLLBAR-SHADOW-COLOR: #dee3e7; COLOR: #000000; SCROLLBAR-3DLIGHT-COLOR: #d1d7dc; SCROLLBAR-ARROW-COLOR: #006699; SCROLLBAR-TRACK-COLOR: #efefef; FONT-FAMILY: Verdana,宋体; SCROLLBAR-DARKSHADOW-COLOR: #98aab1 }
FONT { LINE-HEIGHT: normal }
TD { FONT-SIZE: 11px; LINE-HEIGHT: 15px; FONT-FAMILY: Verdana,宋体 }
TH { FONT-WEIGHT: bold; FONT-SIZE: 12px; BACKGROUND-IMAGE: url(Skins/Default/css/default/bg1.gif); COLOR: white; BACKGROUND-COLOR: #4455aa }
TD.TableTitle2 { BACKGROUND-COLOR: #e4e8ef }
TD.TableBody1 { LINE-HEIGHT: normal; BACKGROUND-COLOR: #ffffff }
TD.TableBody2 { LINE-HEIGHT: normal; BACKGROUND-COLOR: #e4e8ef }
TD.TopDarkNav { BACKGROUND-IMAGE: url(Skins/Default/css/default/topbg.gif) }
TD.TopLighNav { BACKGROUND-IMAGE: url(Skins/Default/css/default/bottombg.gif) }
TD.TopLighNav1 { BACKGROUND-IMAGE: url(Skins/Default/css/default/tabs_m_tile.gif) }
TD.TopLighNav2 { BACKGROUND-COLOR: #ffffff }
.tableBorder1 { BORDER-RIGHT: 1px; BORDER-TOP: 1px; BORDER-LEFT: 1px; WIDTH: 98%; BORDER-BOTTOM: 1px; BACKGROUND-COLOR: #6595d6 }
.tableBorder2 { BORDER-RIGHT: #dedede 1px solid; BORDER-TOP: #dedede 1px solid; BORDER-LEFT: #dedede 1px solid; WIDTH: 98%; BORDER-BOTTOM: #dedede 1px solid; BACKGROUND-COLOR: #efefef } #TableTitleLink A:link { COLOR: #ffffff; TEXT-DECORATI
4000
ON: none }
#TableTitleLink A:visited { COLOR: #ffffff; TEXT-DECORATION: none }
#TableTitleLink A:active { COLOR: #ffffff; TEXT-DECORATION: none }
#TableTitleLink A:hover { COLOR: #ffffff; TEXT-DECORATION: underline }
INPUT { FONT-SIZE: 12px; COLOR: #000000; LINE-HEIGHT: 15px; FONT-FAMILY: Tahoma,Verdana,"宋体" }
SELECT { FONT-SIZE: 12px; COLOR: #000000; LINE-HEIGHT: 15px; FONT-FAMILY: Tahoma,Verdana,"宋体" }
TEXTAREA { FONT-SIZE: 12px; COLOR: #000000; LINE-HEIGHT: 15px; FONT-FAMILY: Tahoma,Verdana,"宋体" }
OPTION { FONT-SIZE: 12px; COLOR: #000000; LINE-HEIGHT: 15px; FONT-FAMILY: Tahoma,Verdana,"宋体" }
.normalTextSmall { FONT-SIZE: 11px; COLOR: #000000; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif }
.menuskin { BORDER-RIGHT: #666666 1px solid; BORDER-TOP: #666666 1px solid; BACKGROUND-IMAGE: url(Skins/Default/tencent.jpg); VISIBILITY: hidden; FONT: 12px Verdana; BORDER-LEFT: #666666 1px solid; BORDER-BOTTOM: #666666 1px solid; BACKGROUND-REPEAT: repeat-y; POSITION: absolute; BACKGROUND-COLOR: #efefef }
.menuskin A { PADDING-RIGHT: 10px; PADDING-LEFT: 25px; BEHAVIOR: url(inc/noline.htc); COLOR: black; TEXT-DECORATION: none } .menuskin2 { BORDER-RIGHT: #666666 1px solid; BORDER-TOP: #666666 1px solid; BACKGROUND-IMAGE: url(Skins/Default/tencent.jpg); VISIBILITY: hidden; FONT: 12px Verdana; BORDER-LEFT: #666666 1px solid; BORDER-BOTTOM: #666666 1px solid; BACKGROUND-REPEAT: repeat-y; POSITION: absolute; BACKGROUND-COLOR: #efefef alpha(5) }
.menuskin2 B { PADDING-RIGHT: 10px; PADDING-LEFT: 25px; BEHAVIOR: url(inc/noline.htc); COLOR: black; 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; } #mouseoverstyle2 { COLOR:White; 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 alpha(5); }
#mouseoverstyle2 B { COLOR: black; } .menuitems { PADDING-RIGHT: 1px; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; MARGIN: 2px; WORD-BREAK: keep-all; PADDING-TOP: 1px }
.menuitems2 { PADDING-RIGHT: 1px; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; MARGIN: 2px; WORD-BREAK: keep-all; PADDING-TOP: 1px; } A.navlink:link { COLOR: #000000; TEXT-DECORATION: none }
A.navlink:visited { COLOR: #000000; TEXT-DECORATION: none }
A.navlink:hover { COLOR: #003399; TEXT-DECORATION: none } .BrightClass { BACKGROUND-COLOR: #d7d7d7 }
DIV.quote { BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 5px; BACKGROUND: #f3f3f3; PADDING-BOTTOM: 5px; MARGIN: 5px 20px; BORDER-LEFT: #cccccc 1px solid; LINE-HEIGHT: normal; PADDING-TOP: 5px; BORDER-BOTTOM: #cccccc 1px solid }
DIV.HtmlCode { BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 5px; FONT-SIZE: 12px; BACKGROUND: #fdfddf; PADDING-BOTTOM: 5px; MARGIN: 5px 20px; OVERFLOW: auto; BORDER-LEFT: #cccccc 1px solid; LINE-HEIGHT: normal; PADDING-TOP: 5px; BORDER-BOTTOM: #cccccc 1px solid; FONT-FAMILY: ncursive } ==================================== Hudark.js 代码 //Pop-it menu- By Dynamic Drive - Modified by Wbird
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use var menuOffX=0 //菜单距连接文字最左端距离
var menuOffY=18 //菜单距连接文字顶端距离 var fo_shadows=new Array()
var linkset=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 showmenu(e,vmenu,mod)
{
if (!document.all&&!document.getElementById&&!document.layers)
return
which=vmenu
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.document.write(''+which+'')
menuobj.document.close()
}
menuobj.contentwidth=(ie4||ns6)? menuobj.offsetWidth : menuobj.document.gui.document.width
menuobj.contentheight=(ie4||ns6)? menuobj.offsetHeight : menuobj.document.gui.document.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
if (rightedge menuobj.thestyle.left=ie4? document.body.scrollLeft+eventX-menuobj.contentwidth+menuOffX : ns6? window.pageXOffset+eventX-menuobj.contentwidth : eventX-menuobj.contentwidth
else
menuobj.thestyle.left=ie4? ie_x(event.srcElement)+menuOffX : ns6? window.pageXOffset+eventX : eventX
if (bottomedge menuobj.thestyle.top=ie4? document.body.scrollTop+eventY-menuobj.contentheight-event.offsetY+menuOffY-23 : ns6? window.pageYOffset+eventY-menuobj.contentheight-10 : eventY-menuobj.contentheight
else
menuobj.thestyle.top=ie4? ie_y(event.srcElement)+menuOffY : ns6? window.pageYOffset+eventY+10 : eventY
menuobj.thestyle.visibility="visible"
ie_dropshadow(menuobj,"#999999",3)
return false
} function showmenu2(e,vmenu,mod)
{
if (!document.all&&!document.getElementById&&!document.layers)
return
which=vmenu
clearhidemenu()
ie_clearshadow()
menuobj=ie4? document.all.popmenu : ns6? document.getElementById("popmenu2") : ns4? document.popmenu : ""
menuobj.thestyle=(ie4||ns6)? menuobj.style : menuobj
if (ie4||ns6)
menuobj.innerHTML=which
else{
menuobj.document.write(''+which+'')
menuobj.document.close()
}
menuobj.contentwidth=(ie4||ns6)? menuobj.offsetWidth : menuobj.document.gui.document.width
menuobj.contentheight=(ie4||ns6)? menuobj.offsetHeight : menuobj.document.gui.document.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
if (rightedge menuobj.thestyle.left=ie4? document.body.scrollLeft+eventX-menuobj.contentwidth+menuOffX : ns6? window.pageXOffset+eventX-menuobj.contentwidth : eventX-menuobj.contentwidth
else
menuobj.thestyle.left=ie4? ie_x(event.srcElement)+menuOffX : ns6? window.pageXOffset+eventX : eventX
if (bottomedge menuobj.thestyle.top=ie4? document.body.scrollTop+eventY-menuobj.contentheight-event.offsetY+menuOffY-23 : ns6? window.pageYOffset+eventY-menuobj.contentheight-10 : eventY-menuobj.contentheight
else
menuobj.thestyle.top=ie4? ie_y(event.srcElement)+menuOffY : ns6? window.pageYOffset+eventY+10 : eventY
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 {
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) == a)
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.target
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" : ""
}
}
}
} function highlightmenu2(e,state)
{
if (document.all)
source_el=event.srcElement
else if (document.getElementById)
source_el=e.target
if (source_el.className=="menuitems2")
{
source_el.id=(state=="on")? "mouseoverstyle2" : ""
}
else{
while(source_el.id!="popmenu2")
{
source_el=document.getElementById? source_el.parentNode : source_el.parentElement
if (source_el.className=="menuitems2")
{
source_el.id=(state=="on")? "mouseoverstyle2" : ""
}
}
}
} if (ie4||ns6)
document.onclick=hidemenu //HTML过滤函数
function HTMLEncode(text)
{
text = text.replace(/&/g, "&") ;
text = text.replace(/"/g, """) ;
text = text.replace(/, ;
text = text.replace(/>/g, ">") ;
text = text.replace(/'/g, "’") ; return text ;
} ==================================== 用到的图片文件 /Skins/Default 的目录 2004-07-13 16:05 82 minus.gif
2004-07-13 16:05 85 plus.gif
2004-07-13 23:02 2,521 dvmenubg3.gif
2003-11-21 02:31 819 btn_pers_tile.gif
2004-07-14 10:18 11,745 hudark.jpg
2004-07-14 10:40 11,212 hudark3.jpg
2004-07-14 10:40 11,212 tencent.jpg /Skins/Default/css/default 的目录 2004-07-13 16:03 53 topbg.gif
2004-07-13 16:03 268 bg1.gif
2004-07-13 16:03 53 bottombg.gif
2004-07-13 16:03 99 tabs_m_tile.gif
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- [JavaScript] JS+CSS 制作超级简单的下拉菜单
- jQuery结合CSS制作动态的下拉菜单
- JavaScript结合PHP实现网页制作中双下拉菜单的动态实现
- 无javascript,纯CSS制作的网页下拉菜单
- 无javascript,纯CSS制作的网页下拉菜单
- JavaScript结合PHP实现网页制作中双下拉菜单的动态实现
- jQuery结合CSS制作漂亮的select下拉菜单
- css结合js制作下拉菜单代码
- javascript结合Ajax制作的可编辑表格代码
- 用JAVASCRIPT制作下拉菜单
- 完全使用CSS制作下拉菜单
- .net和javascript 结合 ,生成三级联动无刷新下拉菜单【修改版】2
- javascript结合CSS实现苹果开关按钮特效
- DHTMl案例(简称动态网页)--html、css、javascript、div技术的结合
- 制作CSS下拉菜单
- jQuery与CSS结合制作tab效果有一个很重要的地方需要注意。
- javaScript基础练习题-下拉框制作(CSS)
- html + css + javascript 制作时间轴
- 纯DIV+CSS制作的下拉菜单，二级下拉菜单，三级下拉菜单(无JS)