查看完整版本: 橫拉式選單 (隱藏式) 2

14-5-2012 17:15

橫拉式選單 (隱藏式) 2

<FONT color=blue>
<P></FONT><FONT color=blue>&lt;style&gt;</FONT></P>
<P><FONT color=blue>#divMenu {font-family:arial,helvetica; font-size:12pt; font-weight:bold}<BR>#divMenu a{text-decoration:none;}<BR>#divMenu a:hover{color:red;}<BR>&lt;/style&gt;<BR>&lt;script language="JavaScript1.2"&gt;<BR>/********************************************************************************<BR>Submitted with modifications by Jack Routledge (</FONT><A href="http://fastway.to/compute"><FONT color=blue>http://fastway.to/compute</FONT></A><FONT color=blue>) to DynamicDrive.com<BR>Copyright (C) 1999 Thomas Brattli @ </FONT><A href="http://www.bratta.com"><FONT color=blue>www.bratta.com</FONT></A><BR><FONT color=blue>This script is made by and copyrighted to Thomas Brattli <BR>This may be used freely as long as this msg is intact!<BR>This script has been featured on </FONT><A href="http://www.dynamicdrive.com"><FONT color=blue>http://www.dynamicdrive.com</FONT></A><BR><FONT color=blue>********************************************************************************<BR>Browsercheck:*/<BR>ie=document.all?1:0<BR>n=document.layers?1:0</FONT></P>
<P><FONT color=blue>//These are the variables you have to set:</FONT></P>
<P><FONT color=blue>//How much of the layer do you wan't to be visible when it's in the out state?<BR>lshow=60</FONT></P>
<P><FONT color=blue>//How many pixels should it move every step? <BR>var move=10;</FONT></P>
<P><FONT color=blue>//At what speed (in milliseconds, lower value is more speed)<BR>menuSpeed=40</FONT></P>
<P><FONT color=blue>//Do you want it to move with the page if the user scroll the page?<BR>var moveOnScroll=true</FONT></P>
<P><FONT color=blue>/********************************************************************************<BR>You should't have to change anything below this.<BR>********************************************************************************/<BR>//Defining variables<BR>var tim;<BR>var ltop;</FONT></P>
<P><FONT color=blue>//Object constructor<BR>function makeMenu(obj,nest){<BR>&nbsp;&nbsp;&nbsp; nest=(!nest) ? '':'document.'+nest+'.'<BR>&nbsp;&nbsp;&nbsp; this.css=(n) ? eval(nest+'document.'+obj):eval(obj+'.style')&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<BR>&nbsp;this.state=1<BR>&nbsp;this.go=0<BR>&nbsp;this.width=n?this.css.document.width:eval(obj+'.offsetWidth')<BR>&nbsp;this.left=b_getleft<BR>&nbsp;&nbsp;&nbsp; this.obj = obj + "Object"; &nbsp;eval(this.obj + "=this")&nbsp;<BR>}<BR>//Get's the top position.<BR>function b_getleft(){<BR>&nbsp;var gleft=(n) ? eval(this.css.left):eval(this.css.pixelLeft);<BR>&nbsp;return gleft;<BR>}<BR>/********************************************************************************<BR>Deciding what way to move the menu (this is called onmouseover, onmouseout or onclick)<BR>********************************************************************************/<BR>function moveMenu(){<BR>&nbsp;if(!oMenu.state){<BR>&nbsp;&nbsp;clearTimeout(tim)<BR>&nbsp;&nbsp;mIn()&nbsp;<BR>&nbsp;}else{<BR>&nbsp;&nbsp;clearTimeout(tim)<BR>&nbsp;&nbsp;mOut()<BR>&nbsp;}<BR>}<BR>//Menu in<BR>function mIn(){<BR>&nbsp;if(oMenu.left()&gt;-oMenu.width+lshow){<BR>&nbsp;&nbsp;oMenu.go=1<BR>&nbsp;&nbsp;oMenu.css.left=oMenu.left()-move<BR>&nbsp;&nbsp;tim=setTimeout("mIn()",menuSpeed)<BR>&nbsp;}else{<BR>&nbsp;&nbsp;oMenu.go=0<BR>&nbsp;&nbsp;oMenu.state=1<BR>&nbsp;}&nbsp;<BR>}<BR>//Menu out<BR>function mOut(){<BR>&nbsp;if(oMenu.left()&lt;0){<BR>&nbsp;&nbsp;oMenu.go=1<BR>&nbsp;&nbsp;oMenu.css.left=oMenu.left()+move<BR>&nbsp;&nbsp;tim=setTimeout("mOut()",menuSpeed)<BR>&nbsp;}else{<BR>&nbsp;&nbsp;oMenu.go=0<BR>&nbsp;&nbsp;oMenu.state=0<BR>&nbsp;}&nbsp;<BR>}<BR>/********************************************************************************<BR>Checking if the page is scrolled, if it is move the menu after<BR>********************************************************************************/<BR>function checkScrolled(){<BR>&nbsp;if(!oMenu.go) oMenu.css.top=eval(scrolled)+ltop<BR>&nbsp;if(n) setTimeout('checkScrolled()',30)<BR>}<BR>/********************************************************************************<BR>Inits the page, makes the menu object, moves it to the right place, <BR>show it<BR>********************************************************************************/<BR>function menuInit(){<BR>&nbsp;oMenu=new makeMenu('divMenu')<BR>&nbsp;scrolled=n?"window.pageYOffset":"document.body.scrollTop"<BR>&nbsp;oMenu.css.left=-oMenu.width+lshow<BR>&nbsp;ltop=(n)?oMenu.css.top:oMenu.css.pixelTop;<BR>&nbsp;oMenu.css.visibility='visible'<BR>&nbsp;if(moveOnScroll) ie?window.onscroll=checkScrolled:checkScrolled();<BR>}</FONT></P>
<P><FONT color=blue>//Initing menu on pageload<BR>onload=menuInit;<BR>&lt;/script&gt;<BR>&lt;div id="divMenu" style="position:absolute; top:30; left:20; width:200; visibility:hidden; background-color:#64D0FE"&gt;<BR>&lt;nobr&gt;<BR>&lt;a href="<A href="http://www.bunbun000.com/"><FONT color=blue>http://www.bunbun000.com/</FONT></A><FONT color=blue>"&gt;【笨笨網站】&lt;/a&gt;</FONT></FONT><FONT color=blue> -<BR>&lt;a href="<A href="http://www.bunbunhk.com/BBS/Discuz/index.php"><FONT color=blue>http://www.bunbunhk.com/BBS/Discuz/index.php</FONT></A><FONT color=blue>"&gt;【笨網論壇】</FONT></FONT><FONT color=blue>&lt;/a&gt; - <BR>&lt;a href="<A href="http://www.bunbunhk.com/cgi-bin/html/index.htm"><FONT color=blue>http://www.bunbunhk.com/cgi-bin/html/index.htm</FONT></A><FONT color=blue>"&gt;【語法測試】</FONT></FONT><FONT color=blue>&lt;/a&gt; -</FONT></P>
<P><FONT color=blue>&lt;a href="<A href="http://www.bunbunhk.com/bg.htm"><FONT color=blue>http://www.bunbunhk.com/bg.htm</FONT></A><FONT color=blue>"&gt;【免費資源】&lt;/a&gt;</FONT></FONT></P>
<P><FONT color=blue>&lt;a href="javascript://" onclick="moveMenu()" style="background-color:yellow;text-decoration:none"&gt;MENU&lt;/a&gt;<BR>&lt;/nobr&gt;<BR>&lt;/div&gt;</FONT><BR></P>
<P>&nbsp;</P>
<P><FONT color=#0000ff></FONT>&nbsp;</P>
<P><FONT color=#0000ff></FONT>&nbsp;</P>
<P><FONT color=#0000ff>top:30;</FONT></P>
<P><FONT color=purple><FONT size=3>選單位置高低,可更改</FONT><BR></FONT><FONT color=#0000ff size=3></FONT></P>
<P><FONT color=#0000ff size=3></FONT>&nbsp;</P>
<P><FONT color=#0000ff size=3>width:200;</FONT><BR><FONT color=purple size=3>選單按鈕闊度,可更改</FONT></P>
<P><FONT color=#800080 size=3></FONT>&nbsp;</P>
<P><FONT color=#800080 size=3></FONT>&nbsp;</P>
<P><FONT color=purple>如連結要另開新頁可將 a href 改為 a target="_blank" href</FONT></P>
<P><FONT color=#800080 size=3></FONT>&nbsp;</P>
<P><FONT color=#800080 size=3></FONT>&nbsp;</P><FONT color=#800080 size=3>
<P><FONT color=#0000ff size=3>如不能顯示語法效果可貼去本站</FONT><A href="http://www.bunbun000.com/html/index.htm" target=_blank><FONT color=red size=3>語法測試板</FONT></A><FONT color=#0000ff size=3>試看</FONT></P></FONT>
頁: [1]
查看完整版本: 橫拉式選單 (隱藏式) 2