Menu Popup: Tipo Texto(cód.) X Tipo Imagem(export.)

November 30, 2006

Quero fazer um menu popup somente com textos e não imagens do tipo, vá no fireworks crie uma imgem para menu e adicionar menu popup.

Quero fazer menu popup somente no dreamweaver. Tem como? Alguém conhece algum material para que eu possa dar uma estudada(tutorial, artigo, etc...)?

Agradeço desde já.

konras · November 30, 2006

você faz uma pagina html comum com seu texto, ai vai na pagina que quer colocar o pop up e programa p abrir a pop up com o txt. :)

November 30, 2006

Deixa ver se entendi. Faço uma página com os textos que vão ser o submenu e salvo como popup.htm e linko esta página com o texto(menu do submenu ) da página que tem o menu principal.

Estou certo?

December 1, 2006

Eu fiquei meio confuso com a explicação, daí procurei algo sobre isso e descobri um link que fala sobre Pop-it menu e é feito com script, cheguei fazer uns testes e deu certo, só uma coisa que não consegui fazer é deixar os textos do submenu centralizado. Se alguém puder ajudar vou deixar o script que fiz.

Agradeço desde já.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Documento sem título</title>

#popitmenu{

position: absolute;

background-color: #01537E;

border:0px solid black;

font: normal 10px Verdana;

line-height: 18px;

z-index: 100;

visibility: hidden;

}

#popitmenu a{

text-decoration: none;

padding-left: 6px;

color: #FFFFFF;

display: block;

}

#popitmenu a:hover{ /*hover background color*/

background-color: #FFCC00;

}

</style>

/***********************************************

* Pop-it menu- © Dynamic Drive (www.dynamicdrive.com)

* This notice MUST stay intact for legal use

* Visit http://www.dynamicdrive.com/ for full source code

***********************************************/

var defaultMenuWidth="105px" //set default menu width.

var linkset=new Array()

//SPECIFY MENU SETS AND THEIR LINKS. FOLLOW SYNTAX LAID OUT

linkset[0]='<a href="comercial.htm">Comercial</a>'

linkset[0]+='<a href="suporte.htm">Suporte</a>'

linkset[0]+='<a href="rh.htm">Oportunidades</a>'

linkset[1]='<a href="teste1.htm">teste 1</a>'

linkset[1]+='<a href="teste2.htm">teste 2</a>'

linkset[1]+='<a href="teste3.htm">teste 3</a>'

linkset[1]+='<a href="teste4.htm">teste 4</a>'

////No need to edit beyond here

var ie5=document.all && !window.opera

var ns6=document.getElementById

if (ie5||ns6)

document.write('<div id="popitmenu" onMouseover="clearhidemenu();" onMouseout="dynamichide(event)"></div>')

function iecompattest(){

return (document.compatMode && document.compatMode.indexOf("CSS")!=-1)? document.documentElement : document.body

}

function showmenu(e, which, optWidth){

if (!document.all&&!document.getElementById)

return

clearhidemenu()

menuobj=ie5? document.all.popitmenu : document.getElementById("popitmenu")

menuobj.innerHTML=which

menuobj.style.width=(typeof optWidth!="undefined")? optWidth : defaultMenuWidth

menuobj.contentwidth=menuobj.offsetWidth

menuobj.contentheight=menuobj.offsetHeight

eventX=ie5? event.clientX : e.clientX

eventY=ie5? event.clientY : e.clientY

//Find out how close the mouse is to the corner of the window

var rightedge=ie5? iecompattest().clientWidth-eventX : window.innerWidth-eventX

var bottomedge=ie5? iecompattest().clientHeight-eventY : window.innerHeight-eventY

//if the horizontal distance isn't enough to accomodate the width of the context menu

if (rightedge<menuobj.contentwidth)

//move the horizontal position of the menu to the left by it's width

menuobj.style.left=ie5? iecompattest().scrollLeft+eventX-menuobj.contentwidth+"px" : window.pageXOffset+eventX-menuobj.contentwidth+"px"

else

//position the horizontal position of the menu where the mouse was clicked

menuobj.style.left=ie5? iecompattest().scrollLeft+eventX+"px" : window.pageXOffset+eventX+"px"

//same concept with the vertical position

if (bottomedge<menuobj.contentheight)

menuobj.style.top=ie5? iecompattest().scrollTop+eventY-menuobj.contentheight+"px" : window.pageYOffset+eventY-menuobj.contentheight+"px"

else

menuobj.style.top=ie5? iecompattest().scrollTop+event.clientY+"px" : window.pageYOffset+eventY+"px"

menuobj.style.visibility="visible"

return false

}

function contains_ns6(a, B) {

//Determines if 1 element in contained in another- by Brainjar.com

while (b.parentNode)

if ((b = b.parentNode) == a)

return true;

return false;

}

function hidemenu(){

if (window.menuobj)

menuobj.style.visibility="hidden"

}

function dynamichide(e){

if (ie5&&!menuobj.contains(e.toElement))

hidemenu()

else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))

hidemenu()

}

function delayhidemenu(){

delayhide=setTimeout("hidemenu()",500)

}

function clearhidemenu(){

if (window.delayhide)

clearTimeout(delayhide)

}

if (ie5||ns6)

document.onclick=hidemenu

</script>

</head>

<body>

<a href="#" onMouseover="showmenu(event,linkset[0])" onMouseout="delayhidemenu()">Contate-nos</a>

| <a href="#" onMouseover="showmenu(event,linkset[1], '150px')" onMouseout="delayhidemenu()">News

sites</a>

</body>

</html>

December 1, 2006

Este script que eu passei no post anterior funcionou quando eu copiei e colei numa página html em branco.Até aí é fácil, mas eu fui fazer este script funcionar na página pra valer ele não funcionou. Aconteceu uma coisa inusitada, quando passei o mouse em cima para testar o submenu não apareceu e layout que eu tinha feito em tabela ele desceu junto com o acontecido. Eu acho que a tabela ou o iframe embaixo deve ter escondido o sobmenu, eu não sei, estou chutando.

O que eu posso fazer? Qualquer ajuda é bem vinda.

December 1, 2006

Esquece tudo o que eu falei. Já resolvi o problema. O que aconteceu é esqueci de copiar um ítem do script, por isso estava desconfigurado, mas agora está ok.

Valeu pela força.

December 1, 2006

Só uma coisa, como faço para os textos do submenu ficar centralizado.

Qualquer ajuda é bem vinda.

Jaquelinerz · December 1, 2006

é facil fácil...

vai no DW e cria uma tabela que serão seus links raiz....

faz o link deles pra #

ex.: <a href="#">menu1</a>

clica no link e vai na janela behaviors (window / behaviors)

clique no + e escolha a opção Show Pop-up Menu

e vai criando os intens do menu!!

qualquer duvida posta aí =***

December 4, 2006

Dúvida: esse Show Pop-up Menu em versão português é o quê?

Significa mostrar menu popup?

Se não for post de novo.

Jaquelinerz · December 4, 2006

é isso sim!!

mostrar menu pop-up ^^"

e os behaviors... em portugues... comportamentos ^^"

December 6, 2006

Jaquelinerz, eu fiz da maneira que você me ensinou e deu certo, mas uma coisa não me agradou quando testei no browser. Acontece que o texto que você linka com "#" não substitui o menu, ou seja, aparece o texto linkado, o menu e o submenu. Não tem como substituir o texto linkado pelo criado(menu). Desta forma que estou falando, vai aparecer só o menu e o submenu. Entendeu o que quis dizer?

Jaquelinerz · December 6, 2006

bom... pelo que entendi você não quer que o link do menu tenha "cara de link" é isso!?!?

simples... vai lá no seu código e retira o href="#" o resto é só css ^^"

ex:

seu código está assim

<a href="#" name="link2" id="link2" onmouseover="MM_showMenu(window.mm_menu_1206171012_0,43,16,null,'link2')" onmouseout="MM_startTimeout();">

ele vai ficar assim

<a name="link2" id="link2" onmouseover="MM_showMenu(window.mm_menu_1206171012_0,43,16,null,'link2')" onmouseout="MM_startTimeout();">

=***

December 6, 2006

Quando dá um refresh no DW para testar acontece o seguinte. o texto que é o link, aparece, mas quando passa o mouse em cima ele substitui com cara menu. Até aí tudo bem, mas o que quero é quando sua página html é aberta no browser não apareça o texto e sim ele já com cara de menu.

Jaquelinerz · December 8, 2006

cara não entendi muito bem sua pergunta....

você fez como eu disse?!?!?

e você está usando CSS??

Sign In

Menu Popup: Tipo Texto(cód.) X Tipo Imagem(export.)

Question

Guest - s_ric_ptbrasil -

Link to comment

Share on other sites

13 answers to this question

Recommended Posts

Link to comment

Share on other sites

Guest - s_ric_ptbrasil -

Link to comment

Share on other sites

Guest - s_ric_ptbrasil -

Link to comment

Share on other sites

Guest - s_ric_ptbrasil -

Link to comment

Share on other sites

Guest - s_ric_ptbrasil -

Link to comment

Share on other sites

Guest - s_ric_ptbrasil -

Link to comment

Share on other sites

Link to comment

Share on other sites

Guest Visitante

Link to comment

Share on other sites

Link to comment

Share on other sites

Guest - s_ric_ptbrasil -

Link to comment

Share on other sites

Link to comment

Share on other sites

Guest - s_ric_ptbrasil -

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Forum Statistics