Menu At Top Of Page

[Total: 0    Average: 0/5]

This creates a text menu that resides on the top of the window.

Head Code:

<style>
A:hover{color:red}
#divBg{position:absolute; top:0; left:0; visibility:hidden; height:50}
DIV.clSub{position:relative; top:-5; font-family:arial,helvetica; font-size:12px; padding:10px; visibility:hidden; background-color:Silver; layer-background-color:Silver}
</style>
<BR><BR>
Click a choice
<br>Click right mouse button and 'Back' if 'Back' button doesnt work
<br>
<script language="JavaScript1.2">
/*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',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>

Body Code:

<div id="divBg">
<table width="102%" border="0" cellspacing="0" cellpadding="5" align="CENTER" valign="MIDDLE">
	<tr bgcolor="#C0C0C0">
		<td height="30"><a href="#" onclick="extract(0); return false">Choice 1</a></td>
		<td><a href="#" onclick="extract(1); return false">Choice 2</a></td>
		<td><a href="#" onclick="extract(2); return false">Choice 3</a></td>
		<td><a href="#" onclick="extract(3); return false">Choice 4</a></td>
		<td><a href="#" onclick="extract(4); return false">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 id="divSub0" class="clSub">
			<!-- To make the links link somewhere, just replace the #'s
			with the link location -->
			<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 id="divSub1" class="clSub">
			<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 id="divSub2" class="clSub">
			<a href="#">Sub choice 1</a>     <br>
			<a href="#">Sub choice 2</a>
		</div>
		</td>
		<td valign="TOP">
		<div id="divSub3" class="clSub">
			<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 id="divSub4" class="clSub">
			<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>
</table>
</div>

Times Viewed: 0

Leave a Reply

Your email address will not be published. Required fields are marked *