Jump to content

  2. →
  3. →

Photo

Socorro - Menu Com Submenu

Started By sandro_candido, 02/06/2003, 08:58

  • Faça o login para participar
5 replies to this topic

#1 sandro_candido

sandro_candido

    Normal

  • Usuários
  • 114 posts
  • Sexo:Não informado

Posted 02/06/2003, 08:58

Olá Forumaniacos,

É o seguinte com ainda naum programo preciso fazer um menu que tenha um submenu. Ao clicar no botão principal vai aparecer logo embaixo do botão o submenu, naum quero que o submenu apareça do lado tipo o do iniciar do ruindows, e sim embaixo do botão principal. Por favor me ajudem

Exemplo
-------------
Produtos
-------------
submenu
-------------
Peças
------------
submenu
------------
Help.

Intel,

Sandro C. Oliveira

#2 Pirucask8

Pirucask8

    SouzaColen

  • Usuários
  • 1925 posts
  • Sexo:Não informado
  • Localidade:São Paulo - Capital !!

Posted 02/06/2003, 09:26

faz o menu em um MC.. no primeiro frame deixa coloca uma action STOP e o botão do menu...
quando vc clicar nele.. manda o filme pro próximo frame que vai conter o menu abaixado...
e coloca actions onrollout nos botões do menu para ele sumir quando o mouse sair de cima dele...

simples..

B)
Matheus Colen

Escabroso Produções

#3 Robocop

Robocop

    Normal

  • Usuários
  • 72 posts
  • Sexo:Não informado
  • Interesses:Mulheres!!!

Posted 02/06/2003, 11:41

Eu tenho um javascript aqui q faz exatamente isso. Tem umas barras .gif tb, se vc quiser me fala q eu te mando por e-mail.

O código do script é esse aí embaixo:

<html>
<head>
<meta name="Generator" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Coyotee Labs  -  Cool Menu with 2 submenu levels</title>

<!-- 2 Steps to install Cool Menu -------------------------------------------------------------------------->
<!------------------- Step 1. Copy the following code to your HEAD section --------------------------------->
<!-- This style sheet is requiered. It will not modify how your page looks -->
<style type="text/css">
DIV.clSlide{position:absolute;  ;z-index:10; left:0; width:138; height:22; clip:rect(0,138,22,0); padding:3px;}
DIV.clSlideSub{position:absolute; ;z-index:10; padding:2px; clip:rect(0,127,20,0); width:127; height:20; left:8; visibility:hidden}
DIV.clSlideSub2{position:absolute; ;z-index:10; padding:2px; clip:rect(0,118,20,0); width:118; height:20; left:8; visibility:hidden}
#divSlideCont{position:absolute; z-index:10; left:0; top:100; height:600; width:170; visibility:hidden}
A.clSlideLinks{font-family:Verdana, Helvetica, Helv; font-size:11px; font-weight:bold; text-decoration:none; color:white}
A.clSlideSubLinks{font-family:Verdana, Helvetica, Helv; font-size:10px; text-decoration:none; color:Navy}
A.clSlideSub2Links{font-family:Verdana, Helvetica, Helv; font-size:9px; text-decoration:none; color:Navy}
</style>
<script language="JavaScript" type="text/javascript">
function lib_bwcheck(){ //Browsercheck (needed)
this.ver=navigator.appVersion
this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.opera5=this.agent.indexOf("Opera 5")>-1
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
this.ie=this.ie4||this.ie5||this.ie6
this.mac=this.agent.indexOf("Mac")>-1
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
return this
}
//Copyright © 2002 Coyotee Labs Romania (www.coyoteelabs.go.ro)
//This script can be used freely as long as all copyright messages are intact.
//Visit WWW.COYOTEELABS.GO.RO for more scripts
var bw=new lib_bwcheck()
if(bw.opera5) document.write("<style>DIV.clSlide{padding:0px; background-image:url(' ')}\nDIV.clSlideSub{padding:0px; background-image:url(' ')}\nDIV.clSlideSub2{padding:0px; background-image:url(' ')}</style>")
//Making cross-browser objects
function makeMenuObj(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.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0;
this.ref=bw.dom || bw.ie4? document:bw.ns4?eval(nest+"document.layers." +obj+".document"):0; 
this.x=(bw.ns4 || bw.ns5)? this.css.left:this.css.offsetLeft;
this.y=(bw.ns4 || bw.ns5)? this.css.top:this.css.offsetTop; 
this.hideIt=b_hideIt; this.showIt=b_showIt; this.movey=b_movey
this.moveIt=b_moveIt; this.moveBy=b_moveBy; this.status=0;
this.bgImg=b_bgImg; this.obj = obj + "Object"; eval(this.obj + "=this");
this.clipTo=b_clipTo;
return this
}
function b_showIt(){this.css.visibility="visible"; this.status=1}
function b_hideIt(){this.css.visibility="hidden"; this.status=0}
function b_movey(y){this.y=y; this.css.top=this.y}
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x;this.css.top=this.y}
function b_moveBy(x,y){this.x=this.x+x; this.y=this.y+y; this.css.left=this.x;this.css.top=this.y}
function b_bgImg(img){if(bw.ie||bw.dom)this.css.backgroundImage="url('"+img+"')"
else this.css.background.src=img
}
function b_clipTo(t,r,b,l,w){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+")"; if(w){this.css.width=r; this.css.height=b}}}
//Initiating page, making objects..
function SlideMenuInit(){
oSlideMenu=new makeMenuObj('divSlideCont')
oSlideMenu.moveIt(menux,menuy)
oSlide=new Array()
for(i=0;i<menus.length;i++){
  oSlide[i]=new makeMenuObj('divSlide'+i,'divSlideCont')
  oSlide[i].subs=menus[i].subs
  oSlide[i].sub=new Array()
  oSlide[i].moveIt(0,mainheight*i)
  oSlide[i].starty=oSlide[i].y
    if(bw.opera) oSlide[i].css.paddingLeft="10px"
  if(!menus[i].seperator) oSlide[i].bgImg(level0_regular)
  for(j=0;j<oSlide[i].subs;j++){
  oSlide[i].sub[j]=new makeMenuObj('divSlideSub'+i+"_"+j,'divSlideCont')
  oSlide[i].sub[j].moveIt(10,oSlide[i].y+subheight*j+between)
  oSlide[i].sub[j].starty=oSlide[i].sub[j].y
  oSlide[i][j]=new Array()
  oSlide[i][j].subs=menus[i][j].subs
  oSlide[i][j].sub=new Array()
  img=level1_round
  if(oSlide[i][j].subs!=0){
    if(j!=oSlide[i].subs-1) img=level1_sub
    else img=level1_sub_round
    oSlide[i].sub[j].css.color="white"
  }else{
    if(j!=oSlide[i].subs-1)img=level1_regular
  }
  oSlide[i].sub[j].origimg=img
  oSlide[i].sub[j].bgImg(img)
  for(a=0;a<oSlide[i][j].subs;a++){
    oSlide[i][j].sub[a]=new makeMenuObj('divSlideSub'+i+"_"+j+"_"+a,'divSlideCont')
    oSlide[i][j].sub[a].moveIt(20,oSlide[i].sub[j].y+subheight*a+between-2)
    oSlide[i][j].sub[a].starty=oSlide[i][j].sub[a].y 
    oSlide[i][j][a]=new Array()
    oSlide[i][j][a].subs=menus[i][j][a].subs
    oSlide[i][j][a].sub=new Array()
    if(a!=oSlide[i][j].subs-1) img=level2_regular
    else img=level2_round
    oSlide[i][j].sub[a].origimg=img
    oSlide[i][j].sub[a].bgImg(img)
  }
  }
}
oSlideMenu.showIt()
}
//Variables
var active=-1;var going;var isthere; var sactive=-1; var sisthere=-1; var s2active=-1; var s2isthere=-1
//Switch menu function.
function swmenu(num,snum,s2num){
if(snum!=-1){
  if(oSlide[num][snum].subs==0) return
}
if(s2num!=-1){
  if(oSlide[num][snum][s2num].subs==0) return
}
if((num!=active || snum!=sactive || s2num!=s2active) && !going){going=true;isthere=0;sisthere=0;moveUp(num,snum,s2num)}
}
//Moving the menus upward to their original position.
function moveUp(num,snum){
if(snum==-1){
  for(i=0;i<oSlide.length;i++){
  if(oSlide[i].y>oSlide[i].starty+pxspeed && active!=i) oSlide[i].moveBy(0,-pxspeed)
  else{if(active!=i) oSlide[i].moveIt(oSlide[i].x,oSlide[i].starty); isthere=i}
  }
 
  if(isthere<oSlide.length-1) setTimeout("moveUp("+num+","+snum+")",timspeed)
  else swmenu2(num,snum)
}else{
  if(num==oSlide.length-1) isthere=num

  if(sactive!=-1){ //Is out!
  //Slide subs
  j=0
  for(i=sactive+1;i<oSlide[num].sub.length;i++){
    j++
    if(oSlide[num].sub[i].y>oSlide[num].sub[i].starty+pxspeed) oSlide[num].sub[i].moveBy(0,-pxspeed)
    else{oSlide[num].sub[i].moveIt(oSlide[num].sub[i].x,oSlide[num].sub[i].starty); sisthere=i}
  }
  //Slide main
  for(i=num+1;i<oSlide.length;i++){
    if(oSlide[i].y>oSlide[i].starty + oSlide[num].sub[sactive].y +subheight*j )  oSlide[i].moveBy(0,-pxspeed)
    else{oSlide[i].moveIt(oSlide[i].x,oSlide[i].starty + oSlide[num].sub[sactive].y +subheight*j ); isthere=i}
  }
  }else{ //Slide to the one clicked
  for(i=num+1;i<oSlide.length;i++){
    if(oSlide[i].y>oSlide[i].starty + snum*between+between)  oSlide[i].moveBy(0,-pxspeed)
    else{oSlide[i].moveIt(oSlide[i].x,oSlide[i].starty + snum*between+between); isthere=i}
  }
  }
  if(isthere<oSlide.length-1 || (sactive!=-1 && sisthere<oSlide[num].sub.length-1 && sactive!=oSlide[num].sub.length-1)) setTimeout("moveUp("+num+","+snum+")",timspeed)
  else swmenu2(num,snum)
}
}
//Switch menu 2, stuff that happens before the menus are moved down again.
function swmenu2(num,snum){
isthere=0;
sisthere=0;
if(active>-1 && snum==-1){
  //Hiding submenus
  for(j=0;j<oSlide[active].subs;j++){oSlide[active].sub[j].hideIt()}
  oSlide[active].bgImg(level0_regular)
  oSlide[active].moveIt(0,oSlide[active].starty)
}
if(sactive>-1){
  //Hiding submenus
  for(j=0;j<oSlide[active][sactive].sub.length;j++){oSlide[active][sactive].sub[j].hideIt()}
  oSlide[active].sub[sactive].bgImg(oSlide[active].sub[sactive].origimg)
  oSlide[active].sub[sactive].moveIt(10,oSlide[active].sub[sactive].starty)
  //Move back to place
  for(i=sactive+1;i<oSlide[active].sub.length;i++){
  oSlide[active].sub[i].moveIt(oSlide[active].sub[i].x,oSlide[active].sub[i].starty)
  }
}
active=num
//Showing submenus
if(snum>-1){
  sactive=snum
  for(j=0;j<oSlide[num][snum].sub.length;j++){oSlide[num][snum].sub[j].showIt()}
  oSlide[num].sub[snum].moveBy(10,3)
  oSlide[num].sub[snum].bgImg(level1_round2)
}else{
  sactive=-1
  for(j=0;j<oSlide[active].subs;j++){oSlide[active].sub[j].showIt()}
  oSlide[num].moveBy(10,3)
  oSlide[num].bgImg(level0_round)
}
if(num!=oSlide.length-1) moveDown(num,snum)
else{
  isthere=num
  moveDown(num,snum)
}
}
//Moving the menus down
function moveDown(num,snum){
//if(num==oSlide.length-1) isthere=num
for(i=num+1;i<oSlide.length;i++){
  if(snum==-1){
  if(oSlide[i].y<(oSlide[num].subs-1)*subheight+oSlide[i].starty+between-pxspeed) oSlide[i].moveBy(0,pxspeed)
  else{oSlide[i].moveIt(oSlide[i].x,(oSlide[num].subs-1)*subheight+oSlide[i].starty+between); isthere=i}
  }else{
  if(oSlide[i].y<(oSlide[num].subs-1)*subheight+oSlide[i].starty+between-pxspeed + (oSlide[num][snum].subs-1)*subheight+between)  oSlide[i].moveBy(0,pxspeed)
  else{oSlide[i].moveIt(oSlide[i].x,(oSlide[num].subs-1)*subheight+oSlide[i].starty+between  + (oSlide[num][snum].subs-1)*subheight+between); isthere=i}
  }
}
if(snum!=-1){
  for(i=snum+1;i<oSlide[num].sub.length;i++){ 
  if(oSlide[num].sub[i].y<(oSlide[num][snum].subs-1)*subheight+oSlide[num].sub[i].starty+between-pxspeed) oSlide[num].sub[i].moveBy(0,pxspeed)
  else{oSlide[num].sub[i].moveIt(oSlide[num].sub[i].x,(oSlide[num][snum].subs-1)*subheight+oSlide[num].sub[i].starty+between); sisthere=i}
  }
}
if(snum==-1){
  if(isthere<oSlide.length-1) setTimeout("moveDown("+num+","+snum+")",timspeed)
  else going=false
}else{
  if(isthere<oSlide.length-1 || (sisthere<oSlide[num].sub.length-1 && snum!=oSlide[num].sub.length-1)) setTimeout("moveDown("+num+","+snum+")",timspeed)
  else going=false
}
}
var test=0
//Functions to write out the layers...
menus=new Array(); var a=0; var b=0; var c=0; var d=0
function makeMenu(type,text,lnk,target,end){
str=""; tg="";
  if(target) tg='target="'+target+'"'
  if(!lnk) lnk="#"
  self.status=lnk
if(a==0) str='<div id="divSlideCont">\n'
if(type=="top"){
  menus[a]=new Array();
  if(text=="seperator"){
  str+='\t<div id="divSlide'+a+'" class="clSlide"></div>\n'
  menus[a].seperator=1
  }else{
      str+='\t<div id="divSlide'+a+'" class="clSlide"><a href="'+lnk+'" '+tg+' onclick="swmenu('+a+',-1,-1); if(bw.ie || bw.ns6) this.blur(); '
      if(lnk=="#") str+='return false'
      str+='" class="clSlideLinks"> '+text+'</a><br></div>\n'
  }
    menus[a].subs=0; a++; b=0
}else if(type=="sub"){
  str+='\t\t<div id="divSlideSub'+(a-1)+'_'+(beer_mug.gif+'" class="clSlideSub"><a '+tg+' onclick="swmenu('+(a-1)+','+b+',-1); if(bw.ie || bw.ns6) this.blur(); '
    if(lnk=="#") str+='return false'
    str+='" href="'+lnk+'" class="clSlideSubLinks">  '+text+'</a><br></div>\n'
  b++; menus[a-1].subs=b; menus[a-1][b-1]=new Array(); c=0; menus[a-1][b-1].subs=0
}else if(type=="sub2"){
  str+='\t\t<div id="divSlideSub'+(a-1)+'_'+(b-1)+'_'+c+'" class="clSlideSub2"><a '+tg+' href="'+lnk+'" class="clSlideSub2Links">  '+text+'</a><br></div>\n'
  c++; menus[a-1][b-1].subs=c; menus[a-1][b-1][c-1]=new Array(); d=0; menus[a-1][b-1][c-1].subs=0
}
if(end) str+="</div>"
document.write(str)
}
function preLoadBackgrounds(){
  for(i=0;i<arguments.length;i++){
    this[i]=new Image()
    this[i].src=arguments[i]
  }
  return this
}
</script>
<!----------------------------- End step 1. Proceed to step 2 ---------------------------------------------->
</head>

<body marginleft="0" marginheight="0" bgcolor="#000000" text="#FFFF00" link="#00FF00" vlink="#00FF00" alink="#00FF00">

<!------------------- Step 2. Copy the following code to your BODY section --------------------------------->
<script>

//Variables to set
between=28 //The pixel between the menus and the submenus
mainheight=25 //The height of the mainmenus
subheight=22 //The height of the submenus
pxspeed=13 //The pixel speed of the animation
timspeed=15 //The timer speed of the animation
menuy=80 //The top placement of the menu.
menux=0 //The left placement of the menu
//Images
level0_regular="level0_regular.gif"
level0_round="level0_round.gif"
level1_regular="level1_regular.gif"
level1_round="level1_round.gif"
level1_sub="level1_sub.gif"
level1_sub_round="level1_sub_round.gif"
level1_round2="level1_round2.gif"
level2_regular="level2_regular.gif"
level2_round="level2_round.gif"

//Leave this line
preLoadBackgrounds(level0_regular,level0_round,level1_regular,level1_round,level1_sub,level1_sub_round,level1_round2,level2_regular,level2_round)


//There are 3 different types of menus you can make
//top = Main menus
//sub = Sub menus
//sub2 = SubSub menus

//You control the look of the menus in the stylesheet

//makeMenu('TYPE','TEXT','LINK','TARGET', 'END (THE LAST MENU)')

//Menu 0
makeMenu('top','News')
makeMenu('sub','Test demo','#')
makeMenu('sub','Test demo','#')

//Menu 1
makeMenu('top','Coyotee Labs')
makeMenu('sub','Main Page','http://www.coyoteelabs.go.ro,_blank')
makeMenu('sub','E-Mail Us','mailto:coyoteelabs@go.ro')
makeMenu('sub','Other')
  makeMenu('sub2','Vote us','http://www.top100.ro...id=13334,_blank')
  makeMenu('sub2','Mailling list','http://signup.postma...ate=coyoteelabs')

//Menu 2   
makeMenu('top','Tutorials')
  makeMenu('sub','Not available','#')
//Menu 3
makeMenu('top','Forums')
  makeMenu('sub','Our forum','http://www.fido7.net...=Coyotee,_blank')
  makeMenu('sub','Test demo','#')

//Menu 4 
makeMenu('top','Test')
  makeMenu('sub','Test','#')
  makeMenu('sub','Test','#')
  makeMenu('sub','Test','#')
  makeMenu('sub','Test','#',"end")  // the last menu

//Starting the menu
onload=SlideMenuInit;
</script>

<!----------------------- End step 2. Enjoy it but first configure the menu -------------------------------->
</body>
</html>




Robocop - Programado pra Jogar Sinuca!

#4 hudheb

hudheb

    Normal

  • Usuários
  • 80 posts
  • Sexo:Não informado
  • Localidade:São Paulo/SP
  • Interesses:FLASH, XML e ASP.

Posted 02/06/2003, 12:18

bem , acho muuuuuuuuuito mais fácil fazer em FLASH, vou procurar um exemplo e te mando , ou passo um link p/ vc aprender ou baixar um .fla...

peraí....
... em caso de ARREBATAMENTO, estarei fora por um período ...

#5 Pirucask8

Pirucask8

    SouzaColen

  • Usuários
  • 1925 posts
  • Sexo:Não informado
  • Localidade:São Paulo - Capital !!

Posted 02/06/2003, 12:19

Cara.. ele quer fazer em flash! ;)

é o seguinte... vou explicar mais detalhadamente!

1- você cria um novo MC e no primeiro frame coloca a action "STOP".
nesse primeiro frame você coloca o botão do menu(o botão que irá mostrar o menu).
nesse botão vc coloca a seguinte action!
on (rollOver) {
    gotoAndPlay(5);
}
isso faz com que quando o cara passe o mouse sobre o botão, o filme seja direcionado para o FRAME número 5 desse MC..

2- no frame número 5 do MC você coloca o menu que quer mostrar e não se esqueca de colocar a action "STOP" NO FRAME 5...
ainda nesse frame adicione todos os outros botões do menu com o seguinte código!

on (release) {
    getURL("sua URL");
}
isso manda o cara pro link que você quer...

depois você vai fazer um retângulo em volta do menu, veja a figura!
Posted Image

desenhe um retângulo igual ao retângulo verde em volta do seu menu! aperta F8 e defina ele como um botão e coloque a seguinte action!

on (rollOver) {
    gotoAndStop(1);
}
isso faz com que quando o cara passar o mouse para fora do seu menu ele volte para o frame 1, escondendo o menu!!

sacou?? :) é simples cara.. a idéia é essa.. agora é com você .. usa a criatividade e faz uns menus animados.. fica massa!!
B)
Matheus Colen

Escabroso Produções

#6 hudheb

hudheb

    Normal

  • Usuários
  • 80 posts
  • Sexo:Não informado
  • Localidade:São Paulo/SP
  • Interesses:FLASH, XML e ASP.

Posted 02/06/2003, 13:16

dê uma olhada aqui>>>>>>> MENUS

tem vários modelos, todos com o .fla
é só escolher e baixar, aí você modifica como quiser
... em caso de ARREBATAMENTO, estarei fora por um período ...
Voltar para Adobe Flash e ActionScript


1 user(s) are reading this topic

0 membro(s), 1 visitante(s) e 0 membros anônimo(s)

  1. Fórum WMO
  2. → Desenvolvimento
  3. → Adobe Flash e ActionScript
  4. Privacy Policy
  5. Regras ·
IPB Skin By Virteq