Site hosted by Angelfire.com: Build your free website today!

Scrolling Menu Bar Script


This script is made by and copyrighted to Thomas Brattli at www.bratta.com
Visit for more great scripts.

Paste the following code between your <head> and </head> tags:

<style>
A:hover{color:white}
#divBg{position:absolute; top:0; left:0; visibility:hidden; height:50}
DIV.clSub{position:relative; top:-5; font-family:arial,helvetica; font-size:10px; padding:5px; visibility:hidden; background-color:Silver; layer-background-color:Silver}
</style>
<script language="JavaScript1.2">
/********************************************************************************
Copyright (C) 1999 Thomas Brattli
This script is made by and copyrighted to Thomas Brattli at www.bratta.com
Visit for more great scripts.
This may be used freely as long as this msg is intact!
********************************************************************************
Browsercheck:*/
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',0)
oSub[1]=new makeMenuBar('divSub1','divBg',3)
oSub[2]=new makeMenuBar('divSub2','divBg',9)
oSub[3]=new makeMenuBar('divSub3','divBg',5)
oSub[4]=new makeMenuBar('divSub4','divBg',0)
oSub[5]=new makeMenuBar('divSub5','divBg',0)
//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 if(num!=i) oSub[i].hideIt()
}
}
!oSub[num].vis()?oSub[num].hideIt():oSub[num].showIt();

}

onload=menuBarInit;
</script>


Paste the following script after your <body> tag, replacing the menu items and hypertext with your own:

<body bgcolor="White">
<div id="divBg">
<table width="102%" border="0" cellspacing="0" cellpadding="3" align="CENTER" valign="MIDDLE">
<tr bgcolor="##CC99CC">
<td height="20"><a href="https://www.angelfire.com/art/CountryGirl/index.html">Index Page</a></td>
<td><a href="https://www.angelfire.com/art/CountryGirl/GraphicPagesIndex.html" onclick="extract(1); return false"><center>Graphics</center></a></td>
<td><a href="https://www.angelfire.com/art/CountryGirl/Tutorials.html" onclick="extract(2); return false"><center>Tutorials</center></a></td>
<td><a href="https://www.angelfire.com/art/CountryGirl/Links.html" onclick="extract(3); return false"<center>Links</center></a></td>
<td><a href="https://www.angelfire.com/art/CountryGirl/Software.html">Software</a></td>
<td><a href="mailto:graphicsbykelly@hotmail.com"><center>Contact Me</center></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 id="divSub0" class="clSub">
Index Page
</td>
<!-- To make the links link somewhere, just replace the #'s with the link location -->

</div>
</td>
<td valign="TOP">
<div id="divSub1" class="clSub">
<a href="https://www.angelfire.com/art/CountryGirlGraphics2/index.html">Page Sets</a><<br>
<a href="https://www.angelfire.com/art/CountryGirl/backgrounds.html"<Backgrounds</a><br>
<a href="https://www.angelfire.com/art/CountryGirl/ButtonsBars.html">Buttons & Dividers</a>
</div>
</td>
<td valign="TOP">
<div id="divSub2" class="clSub">
<a href="https://www.angelfire.com/art/CountryGirl/Organized.html">File Organization</a><br>
<a href="https://www.angelfire.com/art/CountryGirl/HTML%20cheatsheet.html">HTML Tags</a><br>
<a href="https://www.angelfire.com/art/CountryGirl/navigation.html">Navigation</a><br>
<a href="https://www.angelfire.com/art/CountryGirl/leftbrdrtut.html">Border BG's</a><br>
<a href="https://www.angelfire.com/art/CountryGirl/WebTricks.html">Web Tricks</a><br>
<a href="https://www.angelfire.com/art/CountryGirl/MetaTags.html">Meta Tags</a><br>
<a href="https://www.angelfire.com/art/CountryGirl/ColorTable.html">Color Table</a><br>
<a href="https://www.angelfire.com/art/CountryGirl/DropDownMenu.html">Drop Down Menu</a><br>
<a href="https://www.angelfire.com/art/CountryGirl/TrailingCursor.html">Trailing Cursor Code</a><br>
<a href="https://www.angelfire.com/art/CountryGirl/Lake.html">Lake Applet</a>
</div>
</td>
<td valign="TOP">
<div id="divSub3" class="clSub">
<a href="https://www.angelfire.com/art/CountryGirl/GraphicsLinks.html">Graphic Sites</a><br>
<a href="https://www.angelfire.com/art/CountryGirl/CardLink.html">E-Cards</a><br>
<a href="https://www.angelfire.com/art/CountryGirl/BannerPage.html">Link to this Site</a><br>
<a href="https://www.angelfire.com/art/CountryGirl/CA.html">Clip Art Links</a><br>
<a href="https://www.angelfire.com/art/CountryGirl/Tools.html">Tools</a><br>
</div>
</td>
<td valign="TOP">
<div id="divSub4" class="clSub">
</div>
</td>
<td valign="TOP">
<div id="divSub5" class="clSub">
Contact Me
</div>


back