您所在位置：主题：Win按钮型导航栏
yaozheng [专家分：28410] 发布于 2002-11-02 08:08:00
1、将下面的代码放在<head>与</head>之间。
<style type="text/css">
.MenuDiv {
position:absolute; top:0px; left:0px; border-width:3px; border-style:outset;
border-color:white silver silver white;padding:2px; padding-top:5px; background-color:silver;
color:black;font-family:宋体; font-size:12px; display:none}
.MenuDiv DIV { padding-left:8px; line-height:18px; cursor:default }
.MosOver { background-color:#003399; color:white; }
.MosOut { background-color: silver; color:black }
#HrefDiv {position:absolute; top:0px; left:0px}
#tblMenu {font-size:12px; cursor:default }
#PubWebMenu {position:absolute; top:21px; left=6px; width:100px }
#GovOrgMenu {position:absolute; top:21px; left=83px; width:165px }
#ComNetMenu {position:absolute; top:21px; left=157px; width:120px }
#SciEduMenu {position:absolute; top:21px; left=235px; width:144px }
</style>
<Script language='VBS'>
sub window_onLoad
HrefDiv.style.display="block"
end sub
dim MenuShow,MenuIdPast
sub ClickMenu(IdName)
if MenuIdPast<>"" then MenuIdPast.style.display="none"
IdName.style.display="block"
MenuShow=1
set MenuIdPast=IdName
window.event.returnValue=false
window.event.cancelBubble=True
end sub
dim ShowId
sub CngMenuCls(IdName)
if ShowId<>"" then ShowId.className="MosOut"
window.event.srcElement.className="MosOver"
if MenuShow=1 then
ClickMenu(IdName)
end if
set ShowId=document.all(window.event.srcElement.id)
end sub
sub document_onclick
if ShowId<>"" then ShowId.className="MosOut"
HideMenu
end sub
sub MosOver
set srcElement=window.event.srcElement
if srcElement.className<>"MenuDiv" then
srcElement.className="MosOver"
end if
end sub
sub MosOut
set srcElement=window.event.srcElement
if srcElement.className<>"MenuDiv" then
srcElement.className="MosOut"
end if
end sub
sub HideMenu
if MenuIdPast<>"" then MenuIdPast.style.display="none"
MenuShow=0
end sub
sub MenuToLink
set srcElement=window.event.srcElement
if srcElement.className<>"MenuDiv" then
window.open(srcElement.expLink)
end if
end sub
</script>
2、将<body>语句改为：
<body style='margin:0px'>
3、将下面的代码放在<head>与</head>之间。
<div id='HrefDiv' class='MenuDiv' style='padding-left:10px; width:100%'>
<table id='tblMenu' border=0 cellspacing=0 cellpadding=0 ><tr>
<td id='PubWeb' onclick='ClickMenu(PubWebMenu)' onMouseover='CngMenuCls(PubWebMenu)'>综合门户</td><td> |
</td>
<td id='GovOrg' onclick='ClickMenu(GovOrgMenu)' onMouseover='CngMenuCls(GovOrgMenu)'>政府组织</td><td> |
</td>
<td id='ComNet' onclick='ClickMenu(ComNetMenu)' onMouseover='CngMenuCls(ComNetMenu)'>电脑网络</td><td> |
</td>
<td id='SciEdu' onclick='ClickMenu(SciEduMenu)' onMouseover='CngMenuCls(SciEduMenu)'>科技教育</td><td> |
</td>
</tr></table>
</div>
<div id='PubWebMenu' class='MenuDiv' onMouseover='MosOver' onMouseout='MosOut' onClick='MenuToLink()'>
<div expLink='http://www.sina.com.cn'>新浪网</div>
<div expLink='http://www.chian.com'>中华网-国中网</div>
<div expLink='http://www.sohu.com'>搜狐</div>
<div expLink='http://www.163.com'>网易</div>
<div expLink='http://www.263.net'>首都在线</div>
<div expLink='http://www.online.sh.cn'>上海热线</div>
<div expLink='http://www.21cn.com'>21CN</div>
<div expLink='http://www.gznet.com'>广州视窗</div>
<div expLink='http://www.east.net.cn'>东方网景</div>
</div>
<div id='GovOrgMenu' class='MenuDiv' onMouseover='MosOver' onMouseout='MosOut' onClick='MenuToLink()'>
<div expLink='http://www.info.gov.hk'>香港特别行政区</div>
<div expLink='http://www.moftec.gov.cn'>对外贸易经济合作部</div>
<div expLink='http://www.china-consumer.org'>中国消费者网</div>
<div expLink='http://www.china.org.cn'>中国-CHINA</div>
<div expLink='http://www.fmprc.gov.cn'>中华人民共和国外交部</div>
</div>
<div id='ComNetMenu' class='MenuDiv' onMouseover='MosOver' onMouseout='MosOut' onClick='MenuToLink()'>
<div expLink='http://www.chinabyte.com'>ChinaByte</div>
<div expLink='http://www.cpcw.com'>电脑报CPCW网站群</div>
<div expLink='http://www.download.com.cn'>金蜘蛛软件商店</div>
<div expLink='http://freemail.263.net'>263在线邮局</div>
<div expLink='http://www.163.net'>163电子邮局</div>
<div expLink='http://www.soim.com'>索易</div>
<div expLink='http://www.gov.cn'>政府上网工程</div>
</div>
<div id='SciEduMenu' class='MenuDiv' onMouseover='MosOver' onMouseout='MosOut' onClick='MenuToLink()'>
<div expLink='http://www.chinaedu.com'>101远程教育教学网</div>
<div expLink='http://www.ctmnet.com.cn'>中国技术与市场交易网</div>
<div expLink='http://www.tsinghua.edu.cn'>清华大学</div>
<div expLink='http://www.enet.com.cn'>eNet</div>
<div expLink='http://www.pku.edu.cn'>北京大学</div>
<div expLink='http://www.programfan.com'>编程爱好者网站</div>
<style type="text/css">
.MenuDiv {
position:absolute; top:0px; left:0px; border-width:3px; border-style:outset;
border-color:white silver silver white;padding:2px; padding-top:5px; background-color:silver;
color:black;font-family:宋体; font-size:12px; display:none}
.MenuDiv DIV { padding-left:8px; line-height:18px; cursor:default }
.MosOver { background-color:#003399; color:white; }
.MosOut { background-color: silver; color:black }
#HrefDiv {position:absolute; top:0px; left:0px}
#tblMenu {font-size:12px; cursor:default }
#PubWebMenu {position:absolute; top:21px; left=6px; width:100px }
#GovOrgMenu {position:absolute; top:21px; left=83px; width:165px }
#ComNetMenu {position:absolute; top:21px; left=157px; width:120px }
#SciEduMenu {position:absolute; top:21px; left=235px; width:144px }
</style>
<Script language='VBS'>
sub window_onLoad
HrefDiv.style.display="block"
end sub
dim MenuShow,MenuIdPast
sub ClickMenu(IdName)
if MenuIdPast<>"" then MenuIdPast.style.display="none"
IdName.style.display="block"
MenuShow=1
set MenuIdPast=IdName
window.event.returnValue=false
window.event.cancelBubble=True
end sub
dim ShowId
sub CngMenuCls(IdName)
if ShowId<>"" then ShowId.className="MosOut"
window.event.srcElement.className="MosOver"
if MenuShow=1 then
ClickMenu(IdName)
end if
set ShowId=document.all(window.event.srcElement.id)
end sub
sub document_onclick
if ShowId<>"" then ShowId.className="MosOut"
HideMenu
end sub
sub MosOver
set srcElement=window.event.srcElement
if srcElement.className<>"MenuDiv" then
srcElement.className="MosOver"
end if
end sub
sub MosOut
set srcElement=window.event.srcElement
if srcElement.className<>"MenuDiv" then
srcElement.className="MosOut"
end if
end sub
sub HideMenu
if MenuIdPast<>"" then MenuIdPast.style.display="none"
MenuShow=0
end sub
sub MenuToLink
set srcElement=window.event.srcElement
if srcElement.className<>"MenuDiv" then
window.open(srcElement.expLink)
end if
end sub
</script>
2、将<body>语句改为：
<body style='margin:0px'>
3、将下面的代码放在<head>与</head>之间。
<div id='HrefDiv' class='MenuDiv' style='padding-left:10px; width:100%'>
<table id='tblMenu' border=0 cellspacing=0 cellpadding=0 ><tr>
<td id='PubWeb' onclick='ClickMenu(PubWebMenu)' onMouseover='CngMenuCls(PubWebMenu)'>综合门户</td><td> |
</td>
<td id='GovOrg' onclick='ClickMenu(GovOrgMenu)' onMouseover='CngMenuCls(GovOrgMenu)'>政府组织</td><td> |
</td>
<td id='ComNet' onclick='ClickMenu(ComNetMenu)' onMouseover='CngMenuCls(ComNetMenu)'>电脑网络</td><td> |
</td>
<td id='SciEdu' onclick='ClickMenu(SciEduMenu)' onMouseover='CngMenuCls(SciEduMenu)'>科技教育</td><td> |
</td>
</tr></table>
</div>
<div id='PubWebMenu' class='MenuDiv' onMouseover='MosOver' onMouseout='MosOut' onClick='MenuToLink()'>
<div expLink='http://www.sina.com.cn'>新浪网</div>
<div expLink='http://www.chian.com'>中华网-国中网</div>
<div expLink='http://www.sohu.com'>搜狐</div>
<div expLink='http://www.163.com'>网易</div>
<div expLink='http://www.263.net'>首都在线</div>
<div expLink='http://www.online.sh.cn'>上海热线</div>
<div expLink='http://www.21cn.com'>21CN</div>
<div expLink='http://www.gznet.com'>广州视窗</div>
<div expLink='http://www.east.net.cn'>东方网景</div>
</div>
<div id='GovOrgMenu' class='MenuDiv' onMouseover='MosOver' onMouseout='MosOut' onClick='MenuToLink()'>
<div expLink='http://www.info.gov.hk'>香港特别行政区</div>
<div expLink='http://www.moftec.gov.cn'>对外贸易经济合作部</div>
<div expLink='http://www.china-consumer.org'>中国消费者网</div>
<div expLink='http://www.china.org.cn'>中国-CHINA</div>
<div expLink='http://www.fmprc.gov.cn'>中华人民共和国外交部</div>
</div>
<div id='ComNetMenu' class='MenuDiv' onMouseover='MosOver' onMouseout='MosOut' onClick='MenuToLink()'>
<div expLink='http://www.chinabyte.com'>ChinaByte</div>
<div expLink='http://www.cpcw.com'>电脑报CPCW网站群</div>
<div expLink='http://www.download.com.cn'>金蜘蛛软件商店</div>
<div expLink='http://freemail.263.net'>263在线邮局</div>
<div expLink='http://www.163.net'>163电子邮局</div>
<div expLink='http://www.soim.com'>索易</div>
<div expLink='http://www.gov.cn'>政府上网工程</div>
</div>
<div id='SciEduMenu' class='MenuDiv' onMouseover='MosOver' onMouseout='MosOut' onClick='MenuToLink()'>
<div expLink='http://www.chinaedu.com'>101远程教育教学网</div>
<div expLink='http://www.ctmnet.com.cn'>中国技术与市场交易网</div>
<div expLink='http://www.tsinghua.edu.cn'>清华大学</div>
<div expLink='http://www.enet.com.cn'>eNet</div>
<div expLink='http://www.pku.edu.cn'>北京大学</div>
<div expLink='http://www.programfan.com'>编程爱好者网站</div>
