« »

Here's a script that supplies a dropdown menu bar that remains at the top of the screen even if you scroll the page. For the purposes of demonstration, only the links under 'Navigation Links' work. Browsers other than version 4 and better should show the bar with all the links fully expanded, and it will not scroll down with the page, of course.

Label: Scrolling Menu Bar

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Free iPage Web Hosting for First Year NOW

If you're still looking for a reliable web host provider with affordable rates, why you don't take a little of time to try iPage, only with $1.89/month, included $500+ Free Extra Credits for the payment of 24 months ($45)?

Over 1,000,000+ existisng customers can not be wrong, definitely you're not, too! More important, when you register the web hosting at iPage through our link, we're going to be happy for resending a full refund to you. That's awesome! You should try iPage web hosting for FREE now! And contact us for anything you need to know about iPage. Try iPage for FREE First Year NOW

Code
CSS
JavaScript
HTML
Print

Copy All x2

<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
	-->

Copy All x2

<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
	-->

Copy All x2

<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
	-->

Comment (0)
Write

by Preview

Cancel reply

Write your comment

Comments of Guest will be previwed before published
Give your real email to get notifying replies, or comment will be deleted

Your name *
Your email^g *
~~Your site~~

Comment's title

I assure 100% I am real human
I repeat I am not bot

Sent (0)
New

BBCode
HTML
URL
JID

AIVideo-App.com
Generate your business videos by AI with voice or just text

chatGPTaz.com
Talk to ChatGPT by your mother language

AppAIVideo
Your first FREE AI Video App

Faceswap AI Online
Swap Faces Video, Photo & GIFs Instantly with Powerful AI Tools - Faceswap AI Online FREE

Temu Free $500 for New Users
Claim Free Temu $500 Credit via Affiliate & Influencer Program

Free TikTok Ads Credit
Master TikTok Ads for Your Business Marketing

Dall-E-OpenAI.com
Generate creative images automatically with AI

chatGPT4.win
Talk to ChatGPT by your mother language

First AI Product from Elon Musk - Grok/UN.com
Speak to Grok AI Chatbot with Your Language

Tooly.win
Open tool hub for free to use by any one for every one with hundreds of tools

GateIO.gomymobi.com
Free Airdrops to Claim, Share Up to $150,000 per Project

iPhoneKer.com
Save up to 630$ when buy new iPhone 16

Buy Tesla Optimus Robot
Order Your Tesla Bot: Optimus Gen 2 Robot Today for less than $20k

Cool Domains for Sale!

gomy.mobi ZWVQ.com chatGPT4.win CryptoKD.com ApexBTC.com chatGPT2.fun ChatTotal.com chatGPTaz.com pornID.net Dall-E-OpenAI.com gomymobi.com AIvideo-app.com XMQV.com ABP3.com javascriptON.com system.money JavaScriptBank.com MetaTru.com Card.rip hearf.com war.money GrokUN.com ChainTutor.com AI-Trading-Bot.com gomy.mobi gomymobi.com lend.services eChainBank.com CreditCard.rip index.services CTRCoin.com

Submit day:
Author:
Previews:
Comment:
Votes:
Sent:
Size:
Rank:

30/01/2007
Unknown [more]
4,819
0
1
0
8.58 KBytes

JavaScript Scrolling Menu Bar

2/5 1 votes / 4,819 previews / 0 comment 30/01/2007 Here's a script that supplies a dropdown menu bar that remains at the top of the screen even if you scroll the page. For...JavaScript Scrolling Menu Bar - Scrolling Menu Bar

hanhufo lethanhtu Thangbinh nhatlinh2605 dooko_ds

Let's be first member to do this

vantam_132