Phiên bản đầy đủ: jsB@nk » Trình đơn » Có thể di chuyển » Menu di chuyển theo thanh trượt
URL: https://www.javascriptbank.com/scrolling-menu-bar.html
Hiệu ứng tạo một menu nhiều cấp ở đầu của trang web và luôn di chuyển theo thanh trượt.
Phiên bản đầy đủ: jsB@nk » Trình đơn » Có thể di chuyển » Menu di chuyển theo thanh trượt
URL: https://www.javascriptbank.com/scrolling-menu-bar.html
<STYLE type=text/css>A {COLOR: blue; TEXT-DECORATION: none}A:hover {COLOR: red}A:visited:unknown {COLOR: #808080}TD {FONT-SIZE: 10pt; FONT-FAMILY: Arial, Helvetica, sans-serif}</STYLE><STYLE type=text/css>A:hover {COLOR: red}#divBg {LEFT: 0px; VISIBILITY: hidden; POSITION: absolute; TOP: 0px; HEIGHT: 50px}DIV.clSub {PADDING-RIGHT: 10px; PADDING-LEFT: 10px; FONT-SIZE: 12px; VISIBILITY: hidden; PADDING-BOTTOM: 10px; PADDING-TOP: 10px; FONT-FAMILY: Arial, Helvetica, sans-serif; POSITION: relative; TOP: -5px; BACKGROUND-COLOR: silver; layer-background-color: Silver}</STYLE><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><SCRIPT language=JavaScript1.2> <!--//BEGIN Script ie=document.all?1:0 n=document.layers?1:0 //Do you want it to move with the page if the user scroll the page? var moveOnScroll=true //Do you want to hide all the other submenus when you click a new? var hideAll=true /******************************************************************************** If you want to change the appearans on the text, or background or anything do that in the style tag above, or in the table tag below. NOTE: This menu have some "small" bugs. In Netscape the links in the submenus will work even though the submenus are hidden, this has something to do with a lousy implementation of the relative positioning in Netscape. In IE links "underneath" the submenus will not work even though the submenus are hidden. I will look into this and might find a fix for it. ********************************************************************************/ /******************************************************************************** Object constructor ********************************************************************************/ 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; } /******************************************************************************** Checking if the page is scrolled, if it is move the menu after ********************************************************************************/ function checkScrolled(){ if(!oMenu.go)oMenu.css.top=(!oMenu.state)?eval(scrolled):eval(scrolled) if(n) setTimeout('checkScrolled()',30) } /******************************************************************************** Inits the page, makes the menu object, moves it to the right place, show it.. ********************************************************************************/ 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(); } /******************************************************************************** Shows and hides the submenus ********************************************************************************/ function extract(num){ if(hideAll){ for(i=0;i<oSub.length;i++){ if(num!=i) oSub[i].hideIt() } } !oSub[num].vis()?oSub[num].hideIt():oSub[num].showIt(); } onload=menuBarInit; //--> </SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><DIV id=divBg><TABLE cellSpacing=0 cellPadding=5 width="100%" align=center border=0 valign="MIDDLE"> <TBODY> <TR bgColor=#c0c0c0> <TD height=30><A onclick="extract(0); return false" href="">Navigation Links</A></TD> <TD><A onclick="extract(1); return false" href="">Choice 2</A></TD> <TD><A onclick="extract(2); return false" href="">Choice 3</A></TD> <TD><A onclick="extract(3); return false" href="">Choice 4</A></TD> <TD><A onclick="extract(4); return false" href="">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="http://jsbank.topcities.com/home.jpg">Home Page</A><BR><A href="http://jsbank.topcities.com/background/homebackground.jpg">Ná»n</A><BR><A href="http://jsbank.topcities.com/3d/home3d.jpg">3D</A><BR><A href="http://jsbank.topcities.com/text/hometext.jpg">Chữ</A><BR></DIV></TD> <TD vAlign=top> <DIV class=clSub id=divSub1><A href="">Sub choice 1</A> <BR><A href="">Sub choice 2</A><BR><A href="">Sub choice 3</A> </DIV></TD> <TD vAlign=top> <DIV class=clSub id=divSub2><A href="">Sub choice 1</A> <BR><A href="">Sub choice 2</A> </DIV></TD> <TD vAlign=top> <DIV class=clSub id=divSub3><A href="">Sub choice 1</A> <BR><A href="">Sub choice 2</A><BR><A href="">Sub choice 3</A><BR><A href="">Sub choice 4</A><BR><A href="">Sub choice 5</A> </DIV></TD> <TD vAlign=top> <DIV class=clSub id=divSub4><A href="">Sub choice 1</A> <BR><A href="">Sub choice 2</A><BR><A href="">Sub choice 3</A><BR><A href="">Sub choice 4</A> </DIV></TD></TR></TBODY></TABLE></DIV><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->