|
第一步:請將下面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>
複製代碼 |
|