 |
<<<
voltar
::
JAVA SCRIPT ::
JAVA SCRIPT-
Menu Suspenso
Descrição: Com esse Script você poderá
colocar em seu site notícias suspensas ou até mesmo você
poderá usar como menu. Muito Legal. Clique na Barra da
Geek Brasil e veja o script funcionando, para diminuir a
barra novamente basta você clicar novamente na Barra da
Geek Brasil
Passo1: Insira este código dentro da
seção <HEAD> da sua
página:
<style type="text/css">
DIV.clTopMenu{position:absolute; width:101; height:150; clip:rect(0,101,14,0); visibility:hidden; z-index:31; layer-background-color:#EEEEEE; background-color:#EEEEEE}
DIV.clTopMenuBottom{position:absolute; width:101; height:3; clip:rect(0,101,3,0); top:11; layer-background-color:#CECFCE; background-color:#CECFCE; z-index:2}
DIV.clTopMenuText{position:absolute; width:91; left:5; top:15; font-family:arial,helvetica; font-size:11px; background-color:#EEEEEE; z-index:1}
</style>
<script type="text/javascript" language="JavaScript">
/*Script de Mini Janelas-
Geek Brasil - O Seu Portal
www.scriptshelp.hpg.com.br
*/
function checkBrowser(){
this.ver=navigator.appVersion
this.dom=document.getElementById?1:0
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
this.ie4=(document.all && !this.dom)?1:0;
this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5)
return this
}
bw=new checkBrowser()
/********************************************************************************
Se você quiser mudar a aparência dos textos, cor do fundo, tamanho ou qualquer coisa faça isso na tag style acima.
****************************************************************************/
/***************************************************************************
Variaveis para mudar.
****************************************************************************/
//Há 2 caminhos que esses menus podem ser colocados
// 0 = column
// 1 = row
nPlace=0
//Quantos menus você tem? (lembre-se de copiar e adicionar divs no menus que você acrescentar)
var nNumberOfMenus=2
var nMwidth=101 //The width on the menus (set the width in the stylesheet as well)
var nPxbetween=20 //Pixels entre os menus
var nFromleft=250 //Posição do primeiro menu a esquerda
var nFromtop=355 //Posição de topo dos menus
var nBgcolor='#CECFCE' //O bgColor of the bottom mouseover div
var nBgcolorchangeto='#6380BC' //The bgColor to change to
var nImageheight=11 //The position the mouseover line div will stop at when going up!
/***************************************************************************
Você não deve mudar nenhum código abaixo desta linha
****************************************************************************/
//Construtor de objeto
function makeNewsMenu(obj,nest){
nest=(!nest) ? '':'document.'+nest+'.'
this.css=bw.dom? document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+"document.layers." +obj):0;
this.evnt=bw.dom? document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+"document.layers." +obj):0;
this.scrollHeight=bw.ns4?this.css.document.height:this.evnt.offsetHeight
this.moveIt=b_moveIt;this.bgChange=b_bgChange;
this.slideUp=b_slideUp; this.slideDown=b_slideDown;
this.clipTo=b_clipTo;
this.obj = obj + "Object"; eval(this.obj + "=this")
}
//Metodos Objetos
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y}
function b_bgChange(color){if(bw.dom || bw.ie4) this.css.backgroundColor=color; else this.css.bgColor=color}
function b_clipTo(t,r,b,l){
if(bw.ns4){this.css.clip.top=t; this.css.clip.right=r; this.css.clip.bottom=b; this.css.clip.left=l
}else this.css.clip="rect("+t+","+r+","+b+","+l+")";
}
function b_slideUp(ystop,moveby,speed,fn,wh){
if(!this.slideactive){
if(this.y>ystop){
this.moveIt(this.x,this.y-5); eval(wh)
setTimeout(this.obj+".slideUp("+ystop+","+moveby+","+speed+",'"+fn+"','"+wh+"')",speed)
}else{
this.slideactive=false; this.moveIt(0,ystop); eval(fn)
}
}
}
function b_slideDown(ystop,moveby,speed,fn,wh){
if(!this.slideactive){
if(this.y<ystop){
this.moveIt(this.x,this.y+5); eval(wh)
setTimeout(this.obj+".slideDown("+ystop+","+moveby+","+speed+",'"+fn+"','"+wh+"')",speed)
}else{
this.slideactive=false; this.moveIt(0,ystop); eval(fn)
}
}
}
//Inicializando a pagina
function newsMenuInit(){
oTopMenu=new Array()
zindex=10
for(i=0;i<=nNumberOfMenus;i++){
oTopMenu[i]=new Array()
oTopMenu[i][0]=new makeNewsMenu('divTopMenu'+i)
oTopMenu[i][1]=new makeNewsMenu('divTopMenuBottom'+i,'divTopMenu'+i)
oTopMenu[i][2]=new makeNewsMenu('divTopMenuText'+i,'divTopMenu'+i)
oTopMenu[i][1].moveIt(0,nImageheight)
oTopMenu[i][0].clipTo(0,nMwidth,nImageheight+3,0)
if(!nPlace) oTopMenu[i][0].moveIt(i*nMwidth+nFromleft+(i*nPxbetween),nFromtop)
else{
oTopMenu[i][0].moveIt(nFromleft,i*nImageheight+nFromtop+(i*nPxbetween))
oTopMenu[i][0].css.zIndex=zindex--
}
oTopMenu[i][0].css.visibility="visible"
}
}
//Move o menu
function topMenu(num){
if(oTopMenu[num][1].y==nImageheight)
oTopMenu[num][1].slideDown(oTopMenu[num][2].scrollHeight+20,10,40,'oTopMenu['+num+'][0].
clipTo(0,nMwidth,oTopMenu['+num+'][1].y+3,0)','oTopMenu['+num+'][0].clipTo(0,nMwidth,
oTopMenu['+num+'][1].y+3,0)')
else if(oTopMenu[num][1].y==oTopMenu[num][2].scrollHeight+20)
oTopMenu[num][1].slideUp(nImageheight,10,40,'oTopMenu['+num+'][0].clipTo(0,nMwidth,
oTopMenu['+num+'][1].y+3,0)','
oTopMenu['+num+'][0].clipTo(0,nMwidth,oTopMenu['+num+'][1].y+3,0)')
}
//Aqui você pode mudar o background do evento onmouseover
function menuOver(num){oTopMenu[num][1].bgChange(nBgcolorchangeto)}
function menuOut(num){oTopMenu[num][1].bgChange(nBgcolor)}
//Chama a função inicial onload
onload=newsMenuInit;
</script>
Passo2:
Insira
este código dentro da seção <body> da sua página,
um detalhe muito importante, é que o código deverá
ser a primeira coisa que irá aparecer depois da tag
<body>. obs: é nesse código que você irá
colocar suas mensagens.
<!-- Lembre-se o "news" "key control" e "page contols" texto são imagens, você provavelmente vai querer mudar para as suas próprias imagens.
Se suas imagens tem tamanho diferente por favor ajuste os comandos height e clips dos divs divs, e mude a varialvel nImageheight no script. Boa Sorte -->
<div id="divTopMenu0" class="clTopMenu"><a href="#" onmouseover="menuOver(0)" onmouseout="menuOut(0)" onclick="topMenu(0); if(bw.dom || bw.ie4)this.blur(); return false"><img src="http://www.geekbrasil.com.br/images/news.gif" width=101 alt="" border=0 align="top"></a>
<div id="divTopMenuText0" class="clTopMenuText">
Voce pode colocar aqui textos, links, etc etc....
</div>
<div id="divTopMenuBottom0" class="clTopMenuBottom"></div>
</div>
<div id="divTopMenu1" class="clTopMenu"><a href="#" onmouseover="menuOver(1)" onmouseout="menuOut(1)" onclick="topMenu(1); if(bw.dom || bw.ie4)this.blur(); return false"><img src="http://www.geekbrasil.com.br/images/news.gif" width=101 alt="" border=0 align="top"></a>
<div id="divTopMenuText1" class="clTopMenuText">
Que tal usar esta janela para colocar as novidades do seu site?
<br><br>
</font>
</div>
<div id="divTopMenuBottom1" class="clTopMenuBottom"></div>
</div>
<div id="divTopMenu2" class="clTopMenu"><a href="#" onmouseover="menuOver(2)" onmouseout="menuOut(2)" onclick="topMenu(2); if(bw.dom || bw.ie4)this.blur(); return false"><font face="Verdana" size="1"><img src="http://www.geekbrasil.com.br/images/news.gif" width=101 alt="" border=0 align="top"></font></a>
<div id="divTopMenuText2" class="clTopMenuText">
<font face="Verdana" size="1"><br>Agora é só usar a criatividade..</font><font face="Verdana" size="2">.</font>
</div>
<div id="divTopMenuBottom2" class="clTopMenuBottom"></div>
</div>
|
