Menu górne


Po kliknięciu nastąpi powrót do strony głównej skryptów.

       Proste, ale skuteczne i wystarczająco konfigurowalne menu, żeby można było go umieścić na swojej stronie. Wszystkie ustawienia dotyczące kształtu i kolorystyki znajdują się w stylach, zaś pozostałe elementy dostępne są w konstrukcji tabeli wywołania. Menu instaluje się u górnej krawędzi strony i tam pozostające mimo przewijania. Bardzo wygodne.








Kliknij
Choice 2 Choice 3 Choice 4 Choice 5
Pozycja menu 1
Pozycja menu 2
Pozycja menu 3
Pozycja menu 4


Do zamieszczenia w ramach HEAD:

<style>
#divBg{position:absolute; top:0; left:0; visibility:hidden; height:50}
DIV.clSub{position:relative; top:-5; padding:10px; visibility:hidden; background-color:#FFCCCC; 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

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;
}
function checkScrolled(){
if(!oMenu.go)oMenu.css.top=(!oMenu.state)?eval(scrolled):eval(scrolled)
if(n) setTimeout('checkScrolled()',30)
}
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();
}
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>


Do umieszczenia w dowolnym miejscu:

<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">Kliknij</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 on'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 -->
Pozycja menu 1<br>
Pozycja menu 2<br>
Pozycja menu 3<br>
Pozycja menu 4<br>
</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>




Skrypt do pobrania:

Po kliknięciu nastąpi transfer archiwum z plikiem tekstowym ze skryptem