TShopping

 找回密碼
 註冊
搜索
查看: 1326|回復: 1

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

[複製鏈接]
發表於 2008-9-23 20:47:57 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk Push to Twitter 
第一步:請將下面script程式碼剪下貼至<head>區
  1. <STYLE>
  2. A:hover {        COLOR: red}
  3. #divBg {        HEIGHT: 50px; LEFT: 0px; POSITION: absolute; TOP: 0px; VISIBILITY: hidden}
  4. 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}
  5. </STYLE>

  6. <SCRIPT language=JavaScript1.2>
  7. <!--//BEGIN Script

  8. ie=document.all?1:0
  9. n=document.layers?1:0


  10. var moveOnScroll=true

  11. var hideAll=true


  12. function makeMenuBar(obj,nest,vis){
  13.     nest=(!nest) ? '':'document.'+nest+'.'
  14.     this.css=(n) ? eval(nest+'document.'+obj):eval(obj+'.style')
  15.         this.hideIt=b_hideIt;   this.showIt=b_showIt; this.vis=b_vis                                            
  16.         if(ie && vis) this.css.visibility='hidden'
  17.         this.state=1
  18.         this.go=0
  19.         this.height=n?this.css.document.height:eval(obj+'.offsetHeight')
  20.         this.top=b_gettop
  21.     this.obj = obj + "Object";  eval(this.obj + "=this")        
  22. }
  23. //Get's the top position.
  24. function b_gettop(){
  25.         var gleft=(n) ? eval(this.css.top):eval(this.css.pixelTop);
  26.         return gleft;
  27. }
  28. //The functions for showing and hiding
  29. function b_showIt(){
  30.         this.css.visibility="visible"
  31. }
  32. function b_hideIt(){
  33.         this.css.visibility="hidden"
  34. }
  35. function b_vis(){
  36.         if(this.css.visibility=="hidden" || this.css.visibility=="hide") return true;
  37. }
  38. function checkScrolled(){
  39.         if(!oMenu.go)oMenu.css.top=(!oMenu.state)?eval(scrolled):eval(scrolled)
  40.         if(n) setTimeout('checkScrolled()',30)
  41. }
  42. function menuBarInit(){
  43.         oSub=new Array()
  44.         //Change it here if you want more or less submenus.
  45.         oSub[0]=new makeMenuBar('divSub0','divBg',1)
  46.         oSub[1]=new makeMenuBar('divSub1','divBg',1)
  47.         oSub[2]=new makeMenuBar('divSub2','divBg',1)
  48.         oSub[3]=new makeMenuBar('divSub3','divBg',1)
  49.         oSub[4]=new makeMenuBar('divSub4','divBg',1)
  50.         //Moving menuBar
  51.         oMenu=new makeMenuBar('divBg')
  52.         scrolled=n?"window.pageYOffset":"document.body.scrollTop"
  53.         oMenu.css.top=eval(scrolled)
  54.         oMenu.css.visibility='visible'
  55.         if(moveOnScroll) ie?window.onscroll=checkScrolled:checkScrolled();
  56. }

  57. function extract(num){
  58.         if(hideAll){
  59.                 for(i=0;i<oSub.length;i++){
  60.                         if(num!=i) oSub.hideIt()
  61.                 }
  62.         }
  63.         !oSub[num].vis()?oSub[num].hideIt()Sub[num].showIt();

  64. }

  65. onload=menuBarInit;
  66. //-->
  67. </SCRIPT>
複製代碼
第二步:在你的HTML文件的<body>和</body>中加入以下指令
  1. <DIV id=divBg>
  2. <TABLE align=center border=0 cellPadding=5 cellSpacing=0 width="102%"
  3. valign="MIDDLE">
  4.   <TBODY>
  5.   <TR bgColor=#c0c0c0>
  6.     <TD height=30><A href="file:///C:/WINDOWS/Desktop/test1.html#"
  7.       onclick="extract(0); return false">Choice 1</A></TD>
  8.     <TD><A href="file:///C:/WINDOWS/Desktop/test1.html#"
  9.       onclick="extract(1); return false">Choice 2</A></TD>
  10.     <TD><A href="file:///C:/WINDOWS/Desktop/test1.html#"
  11.       onclick="extract(2); return false">Choice 3</A></TD>
  12.     <TD><A href="file:///C:/WINDOWS/Desktop/test1.html#"
  13.       onclick="extract(3); return false">Choice 4</A></TD>
  14.     <TD><A href="file:///C:/WINDOWS/Desktop/test1.html#"
  15.       onclick="extract(4); return false">Choice 5</A></TD></TR><!-- If you don't want submenu, just remove this tr and
  16.         remove the onclicks above and change the #'s to links -->
  17.   <TR>
  18.     <TD vAlign=top>
  19.       <DIV class=clSub id=divSub0><!-- To make the links link somewhere, just replace the #'s
  20.                         with the link location --><A
  21.       href="file:///C:/WINDOWS/Desktop/test1.html#">Sub choice 1</A>   
  22.         <BR><A href="file:///C:/WINDOWS/Desktop/test1.html#">Sub choice
  23.       2</A><BR><A href="file:///C:/WINDOWS/Desktop/test1.html#">Sub choice
  24.       3</A><BR><A href="file:///C:/WINDOWS/Desktop/test1.html#">Sub choice
  25.       4</A><BR><A href="file:///C:/WINDOWS/Desktop/test1.html#">Sub choice 5</A>
  26.       </DIV></TD>
  27.     <TD vAlign=top>
  28.       <DIV class=clSub id=divSub1><A
  29.       href="file:///C:/WINDOWS/Desktop/test1.html#">Sub choice 1</A>   
  30.         <BR><A href="file:///C:/WINDOWS/Desktop/test1.html#">Sub choice
  31.       2</A><BR><A href="file:///C:/WINDOWS/Desktop/test1.html#">Sub choice 3</A>
  32.       </DIV></TD>
  33.     <TD vAlign=top>
  34.       <DIV class=clSub id=divSub2><A
  35.       href="file:///C:/WINDOWS/Desktop/test1.html#">Sub choice 1</A>   
  36.         <BR><A href="file:///C:/WINDOWS/Desktop/test1.html#">Sub choice
  37.       2</A> </DIV></TD>
  38.     <TD vAlign=top>
  39.       <DIV class=clSub id=divSub3><A
  40.       href="file:///C:/WINDOWS/Desktop/test1.html#">Sub choice 1</A>   
  41.         <BR><A href="file:///C:/WINDOWS/Desktop/test1.html#">Sub choice
  42.       2</A><BR><A href="file:///C:/WINDOWS/Desktop/test1.html#">Sub choice
  43.       3</A><BR><A href="file:///C:/WINDOWS/Desktop/test1.html#">Sub choice
  44.       4</A><BR><A href="file:///C:/WINDOWS/Desktop/test1.html#">Sub choice 5</A>
  45.       </DIV></TD>
  46.     <TD vAlign=top>
  47.       <DIV class=clSub id=divSub4><A
  48.       href="file:///C:/WINDOWS/Desktop/test1.html#">Sub choice 1</A>   
  49.         <BR><A href="file:///C:/WINDOWS/Desktop/test1.html#">Sub choice
  50.       2</A><BR><A href="file:///C:/WINDOWS/Desktop/test1.html#">Sub choice
  51.       3</A><BR><A href="file:///C:/WINDOWS/Desktop/test1.html#">Sub choice 4</A>
  52.       </DIV></TD></TR></TBODY></TABLE></DIV>
複製代碼

 

臉書網友討論
您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2016-12-9 17:52 , Processed in 0.050190 second(s), 18 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表