menu pop up no fireworks

7/24/2019 Menu Pop Up No Fireworks

1/12

Menu pop up no Fireworks, brbaro!

Data:30/09/2002Por:Eduardo Carrega

Novos recurso diferem o pop up menu do Fire MX em rea!"o ao Fire #$ como coocar o pop up menu em um%tm pronto sem &ue ee se deso&ue no reposicionamento ou no redimensionamento da tea'

(ue ta su)stituir um DropDo*n em seu site por um pop up menu mais ea)orado e ade&uado ao seu padr"ovisua+ Esta e muitas outras op!,es fa-em do novo pop up menu do Fire*or.s MX muito ti e mais vive do&ue nunca'

Nessa nova vers"o$ o pop up foi impementado com novos comandos e reguagens$ por e1empo$ possivereguar posi!"o do pop em rea!"o ao in.s$ ce pad e space$ tempo de e1i)i!"o entre outro'

Ci&ue e vea o exemplo

4amos ao passo a passo'Num tra)a%o em )ranco$ crie um )ot"o para servir de a)ertura desse pop menu

Ci&ue no centro desse )ot"o e soicite 56dd Pop 7p Menu5'

Nessa primeira tea$ muito fci$ voc8 possui controes de: ; ? ; @eedi!"o dos dados
http://www.imasters.com.br/web/colunistas/fireworks/31/exemplo/dropdown.htmlhttp://www.imasters.com.br/web/colunistas/fireworks/31/exemplo/dropdown.htmlhttp://www.imasters.com.br/web/colunistas/fireworks/31/exemplo/dropdown.html


2/12

Ent"o vamos criar$ coo&ue nestes campos &uantas pginas ac%ar conveniente$ afina$ sA estamos fa-endoum teste'

Em seguida$ ci&ue na guia superior 56ppearence5 ou no )ot"o 5ne1t5 na )ase dessa anea'

Na Buia appearence$ onde configurase a apar8ncia em gera do recurso$ iniciamente ee demonstrase nomodo %tm'Nessa tea$ voc8 possui controes de: ; 3 ; Formata!"o de te1to# ; Controes de estados menu e te1tos$ com posicionamento do mouse? ; Previs"o do resutado

4amos aterar para o modo 5mage5$ e recon%ecer estes recursos'


3/12

6gora temos uma tea mais compe1a$ porm$ t"o fci de idar &uanto a anterior'

6o ado es&uerdo =7p tate>$ esco%ese um modeo de preenc%imento para o menu sem a presen!a domouse so)re o tem'

6o ado direito$ esco%ese o modo com o mouse so)re =ver tate>

6ssim &ue configurado e testado a seu gosto os padr,es do menu$ vamos para a guia 56dvanced5 =ne1t>'

Nesta tea$ temos ainda a previs"o a)ai1o$ assim faciitando sempre a visuai-a!"o do resutado fina doo)eto'

6&ui temos o controe de todos os parGmetros %tm para cuas e ta)eas'

H conveniente cicar nos eementos para o)ter os mais diversos resutados$ at o &ue mais %e agrade'


4/12

4amos para a tima guia =Position>$ esta responsve por au1iiar o posicionamento do pop menu em rea!"oao )ot"o$ porm$ isso pode ser feito manuamente na tea do Fire*or.s$ mas vae a pena conferir'

De todas as teas &ue visuai-amos$ nen%uma mais A)via &ue essa'No Fire*or.s #$ tin%amos um srio pro)ema de posicionamento dos su) menus$ &ue agora tam)m possuemum controe eficiente =u)menus position>$ este recurso ativado automaticamente &uando e1istemendenta!,es de itens na guia 5Content5'

4amos ao resutado$ no meu caso$ optei em coocar o menu ain%ado I )ase do )ot"o$ em seguida pressionei5Done5$ para finai-ar o processo de cria!"o do pop up'

ao retornar I tea$ verificamos a seguinte imagem:

)serve &ue o avo do )ot"o agora possui uma iga!"o em curva com a previs"o do menu =# retGnguos a-uisa)ai1o>'


5/12

7ma constata!"o nesse ar&uivo &ue no necessrio ter o arquivo no Fireworks no tamanho detoda extenso do menu$ somente o taman%o do )ot"o )asta para gerar o %tm com os dadosperfeitamente visveis'

De agora em diante$ para &uem estiver satisfeito$ o menu esta pronto para ser savo e e1portado'6compan%e ao fina do tutoria o processo correto'

J&uees &ue desearem o)ter o resutado do DropDo*n$ com as caracterstica adicionais:; )ter o pop menu ao cicar so)re o )ot"o =defaut no onMousever>; Fa-er com &ue o Pop menu apare!a so)re o )ot"o e n"o a)ai1o dee; 7sar cursor defaut =seta> ao invs da 5M"o-in%a5 =stKe:%and>


6/12

ao cicar no centro do )ot"o$ um pop se a)rira e opte pea op!"o 5Edit Popup Menu5$ isso rea)rir a tea deedi!"o do pop up$ ou ainda cicando 21 so)re a rea do pop up$ isso tam)m se fa- possve'

6o c%egar na tea$ v novamente na guia 5Position5 e mar&ue a medida da vertica para: O 505

6o cicar em 5Done5$ o resutado ser como soicitado$ o pop up agora iniciase so)re o )ot"o'

Neste ponto savar e partir para os processos de e1porta!"o:

Fie / E1port2 Em seguida configure a tea como na figura a)ai1o$ esco%endo apenas uma pasta comum de tra)a%o$pode ser a rai- de seu site para savamento do menu'


7/12

Ci&ue em savar e vamos para o Dream*eaver'

No reamweaver M

6)ra o tra)a%o %tm &ue voc8 desea adicionar seu Pop Menu criado no Fire*or.s MX$ afina$ um doso)etivos do tutoria ustamente essa inser!"o

6gora$ ocai-e o cone 5Fire*or.s Qtm5 e ci&ue so)re ee e siga a se&u8ncia de imagens


8/12

o resutado o menu apicado no seu %tm

Para a maioria$ )asta savar e testar o documento$ isso est funcionando perfeitamente

'''mas para os mais e1igentes$ ainda devemos item:

; 7sar cursor defaut =seta> ao invs da 5M"o-in%a5 =stKe:%and> so)re os itens do menu e so)re o )ot"o'

J partir deste ponto$ aconse%ve o profissiona ter afinidade com a inguagem ava script e seus eventos$vamos seguir:

@etirando o Mouse Qand =m"o> de cima do menu:7saremos o pane Le%avior para efetuar essa opera!"o$ ci&ue so)re o )ot"o e o)serve a tea:

(uando os eventos est"o entre 5= >5$ sina &ue est se )aseando na tagRpara apicar as fun!,es$ precisamos portanto coocar o processo sem a necessidade de in. 5R5$ para isso$seecione a seta de atera!"o da primeira op!"o =onCic.>'
http://www.imasters.com.br/web/conteudo/http://www.imasters.com.br/web/conteudo/


9/12

s eventos do Dream*eaver$ atuamente est"o configurados para rodar em Netscape 3$ afina$ tudo tem&ue ser compatve$ mas nem tanto$ vamos aterar isso:

6terei para netscape S$ &uem estiver usando 7tradev ou Dream*eaver #$ pode usar eventos para E ?'0 &ued na mesma'

6gora vem a )oa surpresa$ o%a sA a &uantidade de eventos permitidos' 6gora sim podemos destituir a a!"odo )ot"o ao in.'


10/12

Fa!a a mesma coisa para os outros 2 eventos$ su)stituindo peos simiares sem os 5= >5'

Em seguida$ resta nesse documento apenas remover 5R5 do in. =deete>'

Podemos savar esse documento e testar$ o )ot"o$ certamente n"o possui o mouse Qand$ mas''' '''os itensdo su)menu ainda sim possuem

Min%a nossa$ vamos nos enfiar mais um pouco nos cAdigos' &ue ocorre agora &ue o pop menu do fire*or.s MX possui toda sua estrutura!"o num ar&uivo c%amado5mmTmenu's5 $ &ue sempre deve estar presente na pu)ica!"o do ar&uivo na *e)$ ee o segredo de tudo$vamos a)ro =no Dream*eaver mesmo>'

6gora$ acredite se &uiser$ moe-aUocai-e a paavra 5hand5$ neste documento$ atravs da ferramenta 5Find and @epace5 =ctr V F>'


11/12

eac% for = procurar por > O %and@epace it% = su)stituir por > O defaut

sso tudo &ue voc8 far nessa anea$ em seguida pressione 5@epace 65$ isso far a su)stitui!"oautomtica da instru!"o'

Para os &ue gostam de coisas mais deta%adas$ pode pressionar 5Find Ne1t5$ &ue ee ir mostrar no cAdigofonte$ o oca e1ato do item procurado'

Da so pressionar repace ou aterar manuamente$ voc8 esco%e

6o pressionar @epace$ o Dream*eaver %e entrega um reatArio e um aviso$ de &ue tudo correu )em e foiaterado =espero>'

ar&uivo deve ser savo e fec%ado$ o ar&uivo proeto'%tm tam)m est pronto e pode ser savo e testado'

e tudo ocorreu como o previsto$ este o resutado$ ci&ue a&ui para ver


12/12

Ci&ue e vea o primeiro exemplo

Fim 7fa

ave os ar&uivos png e %tm desta couna:popupmenu"#ip

4aeu

Dicas:

6gumas pessoas soicitam como aterar fontes dos pop menus$ um modo muito prtico aterar nodocumento em &ue o pop menu foi apicado$ ocai-ando as in%as:

7se o Brupo de fontes &ue desear neste oca$ e ainda pode fa-er atera!,es de parGmetros de cores$taman%o de fonte$ cor do over$ up e outros''' vae a pena testar
http://www.imasters.com.br/web/colunistas/fireworks/31/popupmenu.ziphttp://www.imasters.com.br/web/colunistas/fireworks/31/popupmenu.ziphttp://www.imasters.com.br/web/colunistas/fireworks/31/popupmenu.zip

menu pop up no fireworks

Documents