隨螢幕捲動的灰色MENU BAR

woff · 發表於 2008-9-23 20:47:57

第一步:請將下面script程式碼剪下貼至<head>區

<STYLE>
A:hover { COLOR: red}
#divBg { HEIGHT: 50px; LEFT: 0px; POSITION: absolute; TOP: 0px; VISIBILITY: hidden}
DIV.clSub { BACKGROUND-COLOR: silver; FONT-FAMILY: arial,helvetica; FONT-SIZE: 12px; PADDING-BOTTOM: 10px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; PADDING-TOP: 10px; POSITION: relative; TOP: -5px; VISIBILITY: hidden; layer-background-color: Silver}
</STYLE>
<SCRIPT language=JavaScript1.2>
<!--//BEGIN Script
ie=document.all?1:0
n=document.layers?1:0
var moveOnScroll=true
var hideAll=true
function makeMenuBar(obj,nest,vis){
nest=(!nest) ? '':'document.'+nest+'.'
this.css=(n) ? eval(nest+'document.'+obj):eval(obj+'.style')
this.hideIt=b_hideIt; this.showIt=b_showIt; this.vis=b_vis
if(ie && vis) this.css.visibility='hidden'
this.state=1
this.go=0
this.height=n?this.css.document.height:eval(obj+'.offsetHeight')
this.top=b_gettop
this.obj = obj + "Object"; eval(this.obj + "=this")
}
//Get's the top position.
function b_gettop(){
var gleft=(n) ? eval(this.css.top):eval(this.css.pixelTop);
return gleft;
}
//The functions for showing and hiding
function b_showIt(){
this.css.visibility="visible"
}
function b_hideIt(){
this.css.visibility="hidden"
}
function b_vis(){
if(this.css.visibility=="hidden" || this.css.visibility=="hide") return true;
}
function checkScrolled(){
if(!oMenu.go)oMenu.css.top=(!oMenu.state)?eval(scrolled):eval(scrolled)
if(n) setTimeout('checkScrolled()',30)
}
function menuBarInit(){
oSub=new Array()
//Change it here if you want more or less submenus.
oSub[0]=new makeMenuBar('divSub0','divBg',1)
oSub[1]=new makeMenuBar('divSub1','divBg',1)
oSub[2]=new makeMenuBar('divSub2','divBg',1)
oSub[3]=new makeMenuBar('divSub3','divBg',1)
oSub[4]=new makeMenuBar('divSub4','divBg',1)
//Moving menuBar
oMenu=new makeMenuBar('divBg')
scrolled=n?"window.pageYOffset":"document.body.scrollTop"
oMenu.css.top=eval(scrolled)
oMenu.css.visibility='visible'
if(moveOnScroll) ie?window.onscroll=checkScrolled:checkScrolled();
}
function extract(num){
if(hideAll){
for(i=0;i<oSub.length;i++){
if(num!=i) oSub.hideIt()
}
}
!oSub[num].vis()?oSub[num].hideIt()Sub[num].showIt();
}
onload=menuBarInit;
//-->
</SCRIPT>

複製代碼

第二步:在你的HTML文件的<body>和</body>中加入以下指令

<DIV id=divBg>
<TABLE align=center border=0 cellPadding=5 cellSpacing=0 width="102%"
valign="MIDDLE">
<TBODY>
<TR bgColor=#c0c0c0>
<TD height=30><A href="file:///C:/WINDOWS/Desktop/test1.html#"
onclick="extract(0); return false">Choice 1</A></TD>
<TD><A href="file:///C:/WINDOWS/Desktop/test1.html#"
onclick="extract(1); return false">Choice 2</A></TD>
<TD><A href="file:///C:/WINDOWS/Desktop/test1.html#"
onclick="extract(2); return false">Choice 3</A></TD>
<TD><A href="file:///C:/WINDOWS/Desktop/test1.html#"
onclick="extract(3); return false">Choice 4</A></TD>
<TD><A href="file:///C:/WINDOWS/Desktop/test1.html#"
onclick="extract(4); return false">Choice 5</A></TD></TR><!-- If you don't want submenu, just remove this tr and
remove the onclicks above and change the #'s to links -->
<TR>
<TD vAlign=top>
<DIV class=clSub id=divSub0><!-- To make the links link somewhere, just replace the #'s
with the link location --><A
href="file:///C:/WINDOWS/Desktop/test1.html#">Sub choice 1</A>
<BR><A href="file:///C:/WINDOWS/Desktop/test1.html#">Sub choice
2</A><BR><A href="file:///C:/WINDOWS/Desktop/test1.html#">Sub choice
3</A><BR><A href="file:///C:/WINDOWS/Desktop/test1.html#">Sub choice
4</A><BR><A href="file:///C:/WINDOWS/Desktop/test1.html#">Sub choice 5</A>
</DIV></TD>
<TD vAlign=top>
<DIV class=clSub id=divSub1><A
href="file:///C:/WINDOWS/Desktop/test1.html#">Sub choice 1</A>
<BR><A href="file:///C:/WINDOWS/Desktop/test1.html#">Sub choice
2</A><BR><A href="file:///C:/WINDOWS/Desktop/test1.html#">Sub choice 3</A>
</DIV></TD>
<TD vAlign=top>
<DIV class=clSub id=divSub2><A
href="file:///C:/WINDOWS/Desktop/test1.html#">Sub choice 1</A>
<BR><A href="file:///C:/WINDOWS/Desktop/test1.html#">Sub choice
2</A> </DIV></TD>
<TD vAlign=top>
<DIV class=clSub id=divSub3><A
href="file:///C:/WINDOWS/Desktop/test1.html#">Sub choice 1</A>
<BR><A href="file:///C:/WINDOWS/Desktop/test1.html#">Sub choice
2</A><BR><A href="file:///C:/WINDOWS/Desktop/test1.html#">Sub choice
3</A><BR><A href="file:///C:/WINDOWS/Desktop/test1.html#">Sub choice
4</A><BR><A href="file:///C:/WINDOWS/Desktop/test1.html#">Sub choice 5</A>
</DIV></TD>
<TD vAlign=top>
<DIV class=clSub id=divSub4><A
href="file:///C:/WINDOWS/Desktop/test1.html#">Sub choice 1</A>
<BR><A href="file:///C:/WINDOWS/Desktop/test1.html#">Sub choice
2</A><BR><A href="file:///C:/WINDOWS/Desktop/test1.html#">Sub choice
3</A><BR><A href="file:///C:/WINDOWS/Desktop/test1.html#">Sub choice 4</A>
</DIV></TD></TR></TBODY></TABLE></DIV>

複製代碼

帳號		自動登錄		找回密碼
密碼				註冊

[教學] 隨螢幕捲動的灰色MENU BAR