Version complte: jsB@nk » Menu » Flottables » Scrolling Menu Bar
URL: https://www.javascriptbank.com/scrolling-menu-bar.html
Voici un script qui fournit un menu déroulant qui demeure à la barre du haut de l'écran même si vous faites défiler la page. Pour les besoins de la démonstration, seuls les liens sous la rubrique "les liens de navigation de travail. Navigateurs autres que la version 4 et devrait mieux montrer la barre avec tous les liens pleinement développée, et il ne sera pas le défilement avec la page, bien sûr.
Version complte: jsB@nk » Menu » Flottables » Scrolling Menu Bar
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-->