« »

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

Generate your business videos by AI with voice or just text

Your first FREE AI Video App! Automate Your First AI Video. Create Your Professional Video In 5 Minutes By AI No Equipment Or Video Editing Skill Requred. Effortless Video Production For Content Marketers. Free UNLMITED AI Video App in Your Hand

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

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

Deepfake Video
Deepfake AI Video Maker

Deepfake
Deepfake AI Video Maker

AI Deep Fake
Deepfake AI Video Maker

AIvidio
AI Video Mobile Solutions

AIvideos
AI Video Platform & Solutions

AIvedio
AI Video App Maker

Artificial General Intelligence
Ai and higher level Artificial General Intelligence (AGI)

Artificial General Intelligence
Ai and higher level Artificial General Intelligence (AGI)

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

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

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

Powerful AI Presentation PPT Maker for FREE
Build an impressive presentation with our free online AI presentation app

Your next top AI Assistant
Claude AI, developed by Anthropic

Your next top AI Assistant
Claude AI, developed by Anthropic

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!

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

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

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

JavaScript Scrolling Menu Bar

2/5 1 votes / 4,828 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